私たちは、AIコーディングエージェントがWebアプリの国際化をゼロから設定しようとすると、途中で行き詰まりやすいことに気づきました。ロケールルーティング、ミドルウェア、翻訳ファイル、プロバイダーラッパー、言語切り替えなど、相互に依存する作業が多く、何が完了していて何が残っているのかを見失ってしまうのです。
Sequential Thinking MCP に着想を得て、i18n のセットアップを、エージェントが順を追って進められるガイド付きチェックリストに分解する無料の MCP サーバーを作りました。これをAIエージェントに接続して「i18n を設定して」と入力するだけで、セットアップ全体が数分で完了します。
MCP でできること#
このサーバーは、AIエージェントに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のステップに沿ってエージェントを導きます。各ステップでは、何を実装するか、どのツールを呼び出すかが明確に示されます。
実装されるもの#
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 |
使い方#
MCP を AIコーディングアシスタントに接続したら、次のように入力します。
i18n を設定して
ロケールを具体的に指定することもできます。
次のロケールで i18n を設定して: en、es、pt-BR。デフォルトのロケールは "en" です。
エージェントはまず i18n_checklist を呼び出して開始し、その後はガイドされた手順に従いながら、必要に応じてほかのツールを呼び出します。その結果、利用中のフレームワークやプロジェクト構成に合わせた、実際に動作する i18n セットアップが完成します。
AI支援コーディングは本質的に非決定的です。この MCP はチェックリスト主導のアプローチによって一貫性を高めますが、結果は実行ごとに異なる場合があります。
