|Labs
デモを予約プラットフォーム
React (Lingo Compiler)
Alpha
React MCP
React (i18n)旧CLI(v0)
非推奨

Lingo.dev React MCP

  • 仕組み
  • セットアップ

AIエージェント

  • Claude Code
  • Cursor
  • GitHub Copilot Agents
  • Codex(OpenAI)

I18n MCP

私たちは、AIコーディングエージェントがWebアプリの国際化をゼロから設定しようとすると、途中で行き詰まりやすいことに気づきました。ロケールルーティング、ミドルウェア、翻訳ファイル、プロバイダーラッパー、言語切り替えなど、相互に依存する作業が多く、何が完了していて何が残っているのかを見失ってしまうのです。

Sequential Thinking MCP に着想を得て、i18n のセットアップを、エージェントが順を追って進められるガイド付きチェックリストに分解する無料の MCP サーバーを作りました。これをAIエージェントに接続して「i18n を設定して」と入力するだけで、セットアップ全体が数分で完了します。

How to set up i18n in Next.js 16 (App Router) with Lingo.dev MCP Server

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 Routerv13-16
Next.js Pages Routerv13-16
TanStack Startv1
React Routerv7

使い方#

MCP を AIコーディングアシスタントに接続したら、次のように入力します。

i18n を設定して

ロケールを具体的に指定することもできます。

次のロケールで i18n を設定して: en、es、pt-BR。デフォルトのロケールは "en" です。

エージェントはまず i18n_checklist を呼び出して開始し、その後はガイドされた手順に従いながら、必要に応じてほかのツールを呼び出します。その結果、利用中のフレームワークやプロジェクト構成に合わせた、実際に動作する i18n セットアップが完成します。

AI支援コーディングは本質的に非決定的です。この MCP はチェックリスト主導のアプローチによって一貫性を高めますが、結果は実行ごとに異なる場合があります。

次のステップ#

セットアップ
MCP を AIコーディングアシスタントに接続する
Claude Code
Claude Code でセットアップする
Cursor
Cursor でセットアップする
GitHub Copilot
GitHub Copilot Agents でセットアップする

このページは役に立ちましたか?

Max PrilutskiyMax Prilutskiy·更新済み 4か月前·1分で読めます