MCP アプリ：モデルにデータを与え、ユーザーに UI を提供 — インドックのダスティン・ミハリック氏

MCP アプリ開発の核心：UI より先に「モデルに渡すデータ」を設計せよ

Indeed の AI プラットフォームチームで働くダスティン・ミハリック氏は、MCP（Model Context Protocol）アプリの実践において最も重要な教訓として、「ユーザーに表示する UI を作る前に、まずモデルに提供すべきデータを定義せよ」と説きます。単なる API 呼び出しや HTML の注入はモデルにとってブラックボックスとなり、文脈の喪失を招くため、構造化されたデータと UI の同期が不可欠です。

ブラックボックス化を防ぐ「データと UI の同期」

多くの開発者が陥りやすいのが、既存の API を呼び出してデータを取得し、それをそのまま HTML としてページに注入してしまうアプローチです。ミハリック氏はこれを「モデルにとってブラックボックスになる行為」と指摘します。

「ツールが『今表示します』と返しても、モデルは実際に何が表示されているのか全く知りません」

この状態では、ユーザーが「最初の結果について詳しく教えて」「会社をランキング順に並べて」といった質問を投げかけても、モデルは背後にあるデータ構造を理解していないため、適切な回答やアクションが取れません。これを防ぐための第一のルールは以下の通りです。

「ユーザーに表示される情報は、必ずモデルにも構造化されたデータとして提供すること」

具体的には、テキスト形式でデータを返す従来の MCP と同様に、リソース URI を通じて HTML の場所を指定しつつ、両方の要素（構造化データと表示用 HTML）を同時に返し、常に同期させる必要があります。API に新しい項目が追加されたら、必ず同じデータ構造をモデルにも反映させることが重要です。

また、ツール説明に「結果は自動的にインターフェースコンポーネントとしてユーザーに表示されます」といった一文を追加するだけで、モデルが文脈を理解しやすくなり、複雑な質問への対応もスムーズになります。

ユーザー操作の文脈を維持する「更新メソッド」

MCP アプリには「詳細を見る」ボタンや「応募する」ボタンといったインタラクティブな要素が含まれることが多く、ユーザーがこれらを操作するとモーダルウィンドウが開いたり画面が切り替わったりします。しかし、モデルはこれらの操作によって何が変わったのかを自動的に知ることはできません。

例えば、10 件の求人を表示し、その中からユーザーが 1 件をクリックして詳細モーダルを開いた場合、モデルはその「どの求人が開かれたか」という情報を欠落したままになります。この結果、「この職種の給与について教えて」「カバーレターを書いて」といった要求に対して、モデルは適切な文脈に基づいて回答できなくなります。

これを解決するのが MCP アプリケーション仕様に用意された「更新モデルコンテキスト（update model context）」メソッドです。

「ユーザーのインタラクションに関する情報は、すべてモデルに渡す必要があります」

このメソッドを使うことで、ボタンがクリックされたことや、表示された求人の ID などを文字列としてモデルに通知できます。ショッピングカートアプリの例のように、ユーザーがカートのアイテムを追加した際にも同様に総額や内容を更新し続けることで、モデルは常に最新の状況を把握できるようになります。

処理とレンダリングを分離する「モジュール性の高い設計」

データと UI の同期が取れても、それだけでは不十分な場合があります。ミハリック氏は、複雑なタスク（例：複数の都市で検索し、給与の高い順に絞り込むなど）において、モデルが「結果が表示されているからもう深く調べなくていい」と判断してしまい、探索を放棄してしまう現象を指摘します。

「ユーザーが必要としているのは、10 個のカルーセル表示ではありません。モデルが柔軟にデータを探索できる環境が必要です」

この課題に対する解決策は、「データ処理（ロジック）」と「インターフェースレンダリング（表示）」を完全に分離した設計です。

具体的には、以下のようなモジュール化されたツール群を作成します。

1. 検索ツール: データの取得・フィルタリングのみを行い、結果を UI に直接返さない。
2. 表示エンジン: 検索ツールから受け取った ID のリストを受け取り、それを画面に表示する役割だけを持つ。

このように分離することで、モデルは「100 件の求人を検索し、その中から 5 件を選別して表示」といった複雑な意思決定を自由に行うことができます。また、ツール説明に「レンダリング前に必ず検索ツールを呼び出すこと」という指示を加えることで、モデルの行動パターンを誘導することも可能です。

まとめ：データ中心設計が真の UX を生む

ミハリック氏の提唱するアプローチは、従来の「いかに UI を ChatGPT に組み込むか」という発想から、「いかにモデルに質の高いデータを渡し、探索させるか」というデータ中心設計への転換を意味します。ツールは小さくモジュール化し、検索ロジックと表示ロジックを切り離すことで、モデルはより創造的なアプローチでユーザーの課題解決にあたることが可能になります。

MCP アプリ開発において、UI の見た目よりも先に「モデルに何を働かせたいか」を定義することが、高品質な AI エージェント体験への近道なのです。