Next Devtools MCP

Amp CLIを使用する場合：

amp mcp add next-devtools -- npx next-devtools-mcp@latest

または手動で設定する場合： AmpのMCPドキュメント に従い、上記の標準設定を適用してください。

Codex CLIを使用する場合：

codex mcp add next-devtools -- npx next-devtools-mcp@latest

または手動で設定する場合： 標準設定形式でMCPセットアップガイドに従ってください。

• コマンド: npx
• 引数: -y, next-devtools-mcp@latest

Windows 11の特殊設定： .codex/config.toml を環境変数と起動タイムアウトの増加で更新します。

env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

ボタンをクリックしてインストールする場合： Cursorでインストール

または手動でインストールする場合： Cursor Settings → MCP → New MCP Server に移動し、上記の設定を使用してください。

Gemini CLIを使用する場合： プロジェクト全体でのインストール：

gemini mcp add next-devtools npx next-devtools-mcp@latest

グローバルインストール：

gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

または手動で設定する場合： 以下のパラメータでMCPセットアップガイドに従ってください。

• コマンド: npx
• 引数: -y, next-devtools-mcp@latest

VS Code CLIを使用する場合：

code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

または手動で設定する場合： 公式のVS Code MCPサーバーセットアップガイドに従い、VS Code設定を通じてNext.js DevToolsサーバーを追加してください。

Warp UIを使用する場合： Settings | AI | Manage MCP Servers に移動し、+ Add を選択して新しいMCPサーバーを以下の設定で登録します。

• 名前: next-devtools
• コマンド: npx
• 引数: -y, next-devtools-mcp@latest

• Cache Components (12セクション):

  • cache-components://overview
  • cache-components://core-mechanics
  • cache-components://public-caches
  • cache-components://private-caches
  • cache-components://runtime-prefetching
  • cache-components://request-apis
  • cache-components://cache-invalidation
  • cache-components://advanced-patterns
  • cache-components://build-behavior
  • cache-components://error-patterns
  • cache-components://test-patterns
  • cache-components://reference

• Next.js 16移行:

  • nextjs16://migration/beta-to-stable
  • nextjs16://migration/examples

• Next.jsの基本:

  • nextjs-fundamentals://use-client

• upgrade-nextjs-16 - Next.js 16へのアップグレードガイド
• enable-cache-components - Next.js 16でCache Componentsモードを移行して有効にする

機能：

• Next.jsで作業するAIアシスタントの適切なコンテキストを設定します。
• すべてのNext.js関連のクエリに nextjs_docs を使用する要件を設定します。
• すべての利用可能なMCPツールとそのユースケースをドキュメント化します。
• MCPを使用したNext.js開発のベストプラクティスを提供します。
• サンプルワークフローとクイックスタートチェックリストを含みます。

使用時期：

• Next.js開発セッションの開始時
• 利用可能なツールを理解し、適切なコンテキストを設定するとき
• Next.js開発でドキュメント優先のアプローチを確保するとき

入力：

• project_path (オプション) - Next.jsプロジェクトへのパス（デフォルトは現在のディレクトリ）

出力：

• MCPツールを使用したNext.js開発の包括的な初期化コンテキストとガイダンス

機能：

• 2段階のプロセス：1) キーワードでドキュメントを検索してパスを取得する、2) パスで完全なMarkdownコンテンツを取得する
• 公式のNext.jsドキュメント検索APIを使用します。
• 包括的なNext.jsガイド、APIリファレンス、およびベストプラクティスにアクセスできます。
• ルータータイプ（App Router、Pages Router、または両方）でフィルタリングをサポートします。

入力：

• action (必須) - 実行するアクション：ドキュメントを検索するには search、完全なコンテンツを取得するには get
• query (オプション) - search で必要。キーワード検索クエリ（例: 'metadata', 'generateStaticParams', 'middleware'）
• path (オプション) - get で必要。検索結果からのドキュメントパス（例: '/docs/app/api-reference/functions/refresh'）
• anchor (オプション) - get でオプション。検索結果からのアンカー/セクション（例: 'usage'）
• routerType (オプション) - search のみ。フィルタリングするタイプ: app, pages, または all（デフォルト: all）

出力：

• ドキュメントのタイトル、パス、コンテンツのスニペット、セクション、およびアンカーを含む検索結果
• 特定のドキュメントページの完全なMarkdownコンテンツ

使用時期：

• Next.jsプロジェクトのページを検証するとき（特にアップグレードまたはテスト中）
• ユーザーインタラクションとフローをテストするとき
• ビジュアル検証のためにスクリーンショットを撮るとき
• ランタイムエラー、ハイドレーション問題、およびクライアント側の問題を検出するとき
• ブラウザコンソールのエラーと警告をキャプチャするとき

重要: Next.jsプロジェクトでは、nextjs_index と nextjs_call ツールを優先的に使用し、ブラウザコンソールログの転送は避けてください。これらのツールが利用できない場合のみ、browser_evalの console_messages アクションをフォールバックとして使用してください。

利用可能なアクション：

• start - ブラウザ自動化を開始する（必要に応じて自動的にインストールする）
• navigate - URLに移動する
• click - 要素をクリックする
• type - 要素にテキストを入力する
• fill_form - 複数のフォームフィールドを一度に入力する
• evaluate - ブラウザコンテキストでJavaScriptを実行する
• screenshot - ページのスクリーンショットを撮る
• console_messages - ブラウザコンソールのメッセージを取得する
• close - ブラウザを閉じる
• drag - ドラッグアンドドロップを実行する
• upload_file - ファイルをアップロードする
• list_tools - サーバーから利用可能なすべてのブラウザ自動化ツールをリストする

入力：

• action (必須) - 実行するアクション
• browser (オプション) - 使用するブラウザ: chrome, firefox, webkit, msedge（デフォルト: chrome）
• headless (オプション) - ヘッドレスモードでブラウザを実行する（デフォルト: true）
• アクション固有のパラメータ（詳細はツールの説明を参照）

出力：

• アクションの結果、スクリーンショット（Base64形式）、コンソールメッセージ、またはエラー情報を含むJSON

このツールの機能： 自動的にマシン上で実行中のすべてのNext.js 16+開発サーバーを検出し、各サーバーの組み込みMCPエンドポイント /_next/mcp から利用可能なランタイム診断ツールをリストします。

パラメータ不要 - ツールを呼び出すだけでサーバーをスキャンします。

利用可能なNext.jsランタイムツール（Next.jsバージョンによって異なります）：

• get_errors - 現在のビルド、ランタイム、およびタイプエラーを取得する
• get_logs - 開発ログファイルのパスを取得する（ブラウザコンソール + サーバー出力）
• get_page_metadata - アプリケーションのルート、ページ、およびコンポーネントのメタデータをクエリする
• get_project_metadata - プロジェクトの構造、設定、および開発サーバーのURLを取得する
• get_server_action_by_id - IDでサーバーアクションを検索してソースファイルを見つける

必要条件：

• Next.js 16+（デフォルトでMCPが有効）
• 実行中の開発サーバー (npm run dev)

出力：

• 検出されたサーバーのリストを含むJSON。各サーバーには以下が含まれます。
  • ポート、PID、URL
  • 説明と入力スキーマを含む利用可能なツール

このツールの機能： Next.js 16+開発サーバーの組み込みMCPエンドポイント /_next/mcp で特定のランタイム診断ツールを呼び出します。

入力パラメータ：

• port (必須) - 開発サーバーのポート（まず nextjs_index を使用して検出する）
• toolName (必須) - 呼び出すNext.jsツールの名前
• args (オプション) - ツールに必要な場合のみ、ツールの引数オブジェクト

必要条件：

• Next.js 16+（デフォルトでMCPが有効）
• 実行中の開発サーバー (npm run dev)
• まず nextjs_index を使用して利用可能なサーバーとツールを検出する

典型的なワークフロー：

// Step 1: Discover servers and tools
// (call nextjs_index first)

// Step 2: Call a specific tool
{
  "port": 3000,
  "toolName": "get_errors"
  // args is optional and only needed if the tool requires parameters
}

出力：

• ツールの実行結果を含むJSON

このツールを使用する例のプロンプト：

• "Next Devtools, what errors are in my Next.js app?"
• "Next Devtools, show me my application routes"
• "Next Devtools, what's in the dev server logs?"
• "Next Devtools, find the Server Action with ID xyz"

機能：

• 公式のNext.jsコードモッドを自動的に実行します（クリーンなgit状態が必要）
• 非同期APIの変更（params, searchParams, cookies, headers）を処理します。
• 設定の変更を移行します。
• 画像のデフォルトと最適化を更新します。
• 並列ルートと動的セグメントを修正します。
• 廃止されたAPIの削除を処理します。
• React 19互換性のガイダンスを提供します。

入力：

• project_path (オプション) - Next.jsプロジェクトへのパス（デフォルトは現在のディレクトリ）

出力：

• 段階的なアップグレードガイダンスを含む構造化されたJSON

機能：

• 事前チェック（パッケージマネージャー、Next.jsバージョン、設定）
• Cache Components設定を有効にする
• MCPが有効な開発サーバーを起動する
• 自動ルート検証とエラー検出
• インテリジェントな境界設定（Suspense、キャッシュディレクティブ、静的パラメータ）を伴う自動エラー修正
• 最終検証とビルドテスト

入力：

• project_path (オプション) - Next.jsプロジェクトへのパス（デフォルトは現在のディレクトリ）

出力：

• 完全なセットアップガイダンスと段階的な指示を含む構造化されたJSON

使用例： Claude Codeを使用する場合：

Next Devtools, help me enable Cache Components in my Next.js 16 app

他のエージェントまたはプログラム的に使用する場合：

{
  "tool": "enable_cache_components",
  "args": {
    "project_path": "/path/to/project"
  }
}