Automate Frontend i18n with JoyCode and i18n-mcp: From Weeks to Hours

Background and Pain Points: The "Multilingual Nightmare" of Legacy Code

In frontend development, converting a mature Chinese codebase to an internationalized, multi‑language (i18n) version faces several challenges: massive workload due to thousands of hard‑coded Chinese strings spread across .vue, .js, and .ts files; high error risk from manual copy‑paste; difficulty naming semantic English keys (e.g., homePageTitle) consistently; and high maintenance cost when synchronizing translation files ( zh.ts / en.ts) with code changes. Manual refactoring could take weeks.

Solution: JoyCode + i18n-mcp

The author built i18n-mcp (Model Context Protocol) and leveraged JoyCode’s AI capabilities to automate the entire i18n workflow in three core steps.

Step 1 – Intelligent Extraction and Deduplication

i18n-mcp

scans all source files, using regex or AST to accurately locate Chinese strings in templates, scripts, and JSX. It supports:

Full‑project scan ( full-project-scan) for exhaustive analysis.

Incremental scan ( git-change) that processes only files changed in the current Git commit, greatly improving efficiency.

Smart deduplication to ensure identical Chinese texts (e.g., “确认”, “取消”) generate a single key.

Step 2 – AI‑Assisted Translation and File Generation

Translation cache: previously translated entries are stored in a Translation Cache to reuse results, saving token usage.

Automated translation: uncached strings are sent to an LLM for English translation.

Semantic key generation: the LLM creates camel‑case keys based on context, such as pleaseInputPassword, improving readability.

File output: standard zh.ts and en.ts files are generated under a lang directory.

{ "pleaseSelect": "请选择" }

{ "pleaseSelect": "Please Select" }

Step 3 – One‑Click Code Replacement

Preview changes with preview-changes before applying.

AST‑based node replacement using extract-and-replace, converting hard‑coded strings to $t('pleaseSelect') calls.

Lossless formatting: the AST approach preserves original indentation, line breaks, and comments, so the modified code passes linting without further adjustments.

Results and Benefits

Quantitative Gains

Qualitative Gains

Productivity boost: developers are freed from tedious copy‑paste work and can focus on core business logic.

Consistent code style: AI‑generated keys follow a uniform camel‑case convention, eliminating naming chaos.

Improved maintainability: an automated language‑pack management mechanism allows new entries to be added simply by rerunning the script.

i18n-mcp Development

The tool was built as the author’s first MCP project, using a GitHub template and publishing to a private NPM registry. Core code was assisted by JoyCode’s coding features, with the development driven by interactive Q&A.

Configuration example:

{
  "mcpServers": {
    "i18n-mcp": {
      "autoApprove": [],
      "disabled": true,
      "timeout": 180,
      "command": "npx",
      "type": "stdio",
      "transportType": "stdio",
      "args": ["-y", "@jd/i18n-mcp@latest"],
      "env": {}
    }
  }
}

Effect Demonstration

After configuration, invoking the prompt “call i18n-mcp’s auto-i18n-process method” produces the expected automated translation and replacement results, as shown in the screenshot below.

Conclusion

While i18n-mcp still has limitations—such as occasional connection errors during large‑scale scans and occasional translation inaccuracies requiring manual verification—it dramatically accelerates frontend i18n migration. The author’s workflow, driven by JoyCode’s AI‑powered interaction, showcases how AI can deeply empower frontend development, boosting efficiency and reducing repetitive work.