Next.js アプリに WebMCP を追加する方法

AI エージェントは、ウェブアプリの理解に苦労することがよくあります。DOM をスクレイピングし、ボタンの機能を推測するため、エラーやハルシネーション（幻覚）が発生しやすくなります。

WebMCP はこの問題を解決します。これはブラウザに modelContext API を追加する W3C 標準です。推測に頼るのではなく、Next.js アプリがエージェントに対して、実行可能な関数を正確に伝えます。

WebMCP vs Anthropic MCP

Anthropic MCP はサーバー上で動作します。JSON-RPC を使用してデータベースや API に接続し、ブラウザの外で動作します。

WebMCP はブラウザのタブ内で動作します。ツールをローカルに登録し、ユーザーの既存のセッションを利用します。追加の認証やバックエンドは必要ありません。

これらは組み合わせて使用できます。バックエンドのタスクには MCP を、フロントエンドのインタラクションには WebMCP を使用できます。

ツールを公開する2つの方法：

  • HTML フォーム: フォームに toolname と tooldescription 属性を追加します。エージェントは JavaScript なしでツールとパラメータを認識できます。検索やフィルターに使用してください。

  • JavaScript: 動的なロジックには navigator.modelContext API を使用します。これはマルチステップのフローに最適です。

Next.js での実装

  1. ブラウザ対応のためのポリフィルをインストールします: npm install @mcp-b/global @mcp-b/react-webmcp

  2. レイアウト内でポリフィルを初期化するために WebMCPProvider を作成します。

  3. クライアントコンポーネントで useWebMCP フックを使用します。このフックは、ツールの登録とクリーンアップを自動的に処理します。

例：ツールのセットアップ

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

ベストプラクティス

  • HTTPS を使用する: 本番環境では WebMCP に安全な接続が必要です。
  • ツールの数を少なく保つ: ツールが多すぎると AI のコンテキストが肥大化し、推論が遅くなります。1ページあたり 50 個未満に抑えてください。
  • 詳細な説明を提供する: エージェントは、いつツールを使用すべきかを判断するために、これらの文字列に依存します。
  • サービスレイヤーを使用する: ツールハンドラー内で React の state に依存しないでください。データの不整合（stale data）を避けるため、プレーンな関数を使用してください。

テスト

Chrome 146 以降を開きます。chrome://flags で WebMCP フラグを有効にします。AI エージェントなしでツールをテストするには、Model Context Tool Inspector 拡張機能を使用してください。

WebMCP は、エージェントによるウェブブラウジングの未来です。ブラウザがデフォルトで有効にしたときにすぐ対応できるよう、今すぐ実装を開始しましょう。

ソース: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp