Tools
Tools: Automatically translate your i18n messages while you develop
2026-02-14
0 views
admin
What is Interceptor? ## Quick start ## Why this matters during development ## Works with your stack ## Try it out 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. @wrkspace‑co/interceptor is an on‑demand translation compiler that: It supports popular libraries like react-intl, i18next, vue-i18n, and custom t() calls. It’s TypeScript‑first, and includes watch mode + batching. Create interceptor.config.ts: 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: Interceptor is designed to fit into modern tooling: Webpack plugin example: Repo: https://github.com/wrkspace-co/Interceptor
MIT‑licensed. If you’ve been battling missing i18n keys during development, I’d love feedback — especially edge cases, new library support, or workflow ideas. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK:
pnpm add -D @wrkspace-co/interceptor Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
pnpm add -D @wrkspace-co/interceptor CODE_BLOCK:
pnpm add -D @wrkspace-co/interceptor CODE_BLOCK:
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; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
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; CODE_BLOCK:
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; CODE_BLOCK:
OPENAI_API_KEY=sk-your-real-key Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
OPENAI_API_KEY=sk-your-real-key CODE_BLOCK:
OPENAI_API_KEY=sk-your-real-key CODE_BLOCK:
pnpm interceptor Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
pnpm interceptor CODE_BLOCK:
pnpm interceptor CODE_BLOCK:
import { defineConfig } from "vite";
import { interceptorVitePlugin } from "@wrkspace-co/interceptor/vite"; export default defineConfig({ plugins: [interceptorVitePlugin({ configPath: "interceptor.config.ts" })]
}); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
import { defineConfig } from "vite";
import { interceptorVitePlugin } from "@wrkspace-co/interceptor/vite"; export default defineConfig({ plugins: [interceptorVitePlugin({ configPath: "interceptor.config.ts" })]
}); CODE_BLOCK:
import { defineConfig } from "vite";
import { interceptorVitePlugin } from "@wrkspace-co/interceptor/vite"; export default defineConfig({ plugins: [interceptorVitePlugin({ configPath: "interceptor.config.ts" })]
}); CODE_BLOCK:
const { InterceptorWebpackPlugin } = require("@wrkspace-co/interceptor/webpack"); module.exports = { plugins: [new InterceptorWebpackPlugin({ configPath: "interceptor.config.ts" })]
}; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
const { InterceptorWebpackPlugin } = require("@wrkspace-co/interceptor/webpack"); module.exports = { plugins: [new InterceptorWebpackPlugin({ configPath: "interceptor.config.ts" })]
}; CODE_BLOCK:
const { InterceptorWebpackPlugin } = require("@wrkspace-co/interceptor/webpack"); module.exports = { plugins: [new InterceptorWebpackPlugin({ configPath: "interceptor.config.ts" })]
}; - 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 - Fewer broken i18n UIs
- Cleaner PRs
- Translations that stay in sync with the codebase - 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
how-totutorialguidedev.toaiopenaillmgptgitgithub