Automatically translate your i18n messages while you develop

#ai #webdev #opensource #javascript

Missing translations slow teams down. You add a string, run the app, and your UI shows a raw key or a fallback. Then someone forgets to fill it later, and you ship partial locales.

Interceptor fixes this by automatically translating your i18n messages while you develop.

What is Interceptor?

@wrkspace‑co/interceptor is an on‑demand translation compiler that:

Scans your code for translation calls
Finds missing keys
Translates them via an LLM
Writes them into your i18n message files
Never overwrites existing translations

It supports popular libraries like react-intl, i18next, vue-i18n, and custom t() calls. It’s TypeScript‑first, and includes watch mode + batching.

Quick start

Install:

pnpm add -D @wrkspace-co/interceptor

Create interceptor.config.ts:

import type { InterceptorConfig } from "@wrkspace-co/interceptor";

const config: InterceptorConfig = {
  locales: ["en", "fr"],
  defaultLocale: "en",
  llm: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKeyEnv: "OPENAI_API_KEY"
  },
  i18n: {
    messagesPath: "src/locales/{locale}.json"
  }
};

export default config;

Add your API key:

OPENAI_API_KEY=sk-your-real-key

Run:

pnpm interceptor

Why this matters during development

When you’re iterating fast, missing translations are easy to ignore. Interceptor helps you keep locale files complete as you code, so your UI always reflects the current language state. You get:

Fewer broken i18n UIs
Cleaner PRs
Translations that stay in sync with the codebase

Works with your stack

Interceptor is designed to fit into modern tooling:

Works with react-intl, i18next, vue-i18n, and custom t() calls
Watch mode and batching for speed
TypeScript‑first configuration
LLM providers: OpenAI, Gemini, Claude, Mistral, Cohere, Groq, DeepSeek, and OpenAI‑compatible providers

Vite plugin example:

import { defineConfig } from "vite";
import { interceptorVitePlugin } from "@wrkspace-co/interceptor/vite";

export default defineConfig({
  plugins: [interceptorVitePlugin({ configPath: "interceptor.config.ts" })]
});

Webpack plugin example:

const { InterceptorWebpackPlugin } = require("@wrkspace-co/interceptor/webpack");

module.exports = {
  plugins: [new InterceptorWebpackPlugin({ configPath: "interceptor.config.ts" })]
};