Lingo.dev React MCP は、AI コーディングアシスタントが React のコードベースに国際化を導入するためのツールです。1つのプロンプトだけで、ロケール対応ルート、言語スイッチャー、ロケール検出までセットアップできます。Sequential Thinking MCP に着想を得ており、i18n のセットアップをエージェントが順を追って進めるガイド付きチェックリストに分解することで、キーの抽出から翻訳インフラの組み込みまで自動化します。
Lingo.dev MCP とは別物です
Lingo.dev React MCP は、React コードベースでの i18n のひな形作成に特化しています。一方、別の Lingo.dev MCP は、ローカライゼーションエンジン(用語集、ブランドボイス、スコアラー、モデル設定)を扱うためのものです。このページで扱うのは React MCP です。
仕組み#
Lingo.dev React MCP サーバーは、エージェントに4つのツールを提供します。
| ツール | 目的 |
|---|---|
i18n_checklist | セットアップ全体を進行管理するステップ形式の実装ガイドです。エージェントは各ステップでこれを呼び出し、次に何をすべきかを判断します。 |
get_project_context | プロジェクトのアーキテクチャ(フレームワーク、ルーター、ディレクトリ構成)を把握し、実装方針に反映します。 |
get_framework_docs | 検出したフレームワーク(Next.js、React Router、TanStack Start)の公式ドキュメントを取得します。 |
get_i18n_library_docs | プロバイダーやコンポーネントの設定時に使う i18n ライブラリ(例: react-intl)のドキュメントを取得します。 |
i18n_checklist ツールが司令塔です。プロジェクト分析からロケールルーティング、翻訳設定、言語スイッチャー、ビルド検証まで、13のステップでエージェントを導きます。
実装されるもの#
Lingo.dev React MCP による一般的なセットアップでは、次のような構成が実装されます。
- ロケール対応ルート - 現在のロケールが URL の先頭に付くルート(
/en/about、/es/about) - 言語スイッチャー - 対応ロケールを切り替えるための UI コンポーネント
- ロケール検出 - ユーザーの優先言語を自動で検出
- 翻訳インフラ - コンポーネントからキーを抽出し、プロバイダー設定、翻訳ファイル、ヘルパー関数を整備
対応フレームワーク#
| フレームワーク | バージョン |
|---|---|
| Next.js App Router | v13-16 |
| Next.js Pages Router | v13-16 |
| TanStack Start | v1 |
| React Router | v7 |
使い方#
Lingo.dev React MCP を AI コーディングアシスタントに接続したら、次のようにプロンプトします。
i18n をセットアップして
または、最初にロケールを指定しておくこともできます。
次のロケールで i18n をセットアップして: en、es、pt-BR。デフォルトロケールは "en" です。
エージェントはまず i18n_checklist を呼び出して開始し、その後はガイドに沿って必要に応じて他のツールも呼び出します。最終的に、フレームワークとプロジェクト構成に合わせた、実際に動作する i18n セットアップが完成します。
AI 支援コーディングは本質的に非決定的です。Lingo.dev React MCP はチェックリスト主導のアプローチで一貫性を高めますが、実際の結果は実行ごとに異なる場合があります。
