MCPツールの応答がテキストだけでは物足りない。データベースの検索結果もダッシュボードの指標も、すべて文章に変換されて返ってくる。Laravel MCPパッケージの新機能「MCP Apps」を使えば、AIチャットの中にインタラクティブなHTML画面を直接表示できます。

この記事でわかること：

  • MCP Appsとは何か、従来のテキスト応答と何が違うのか
  • Laravel MCP Appsの導入手順
  • Blade一枚でUIを構築する方法
  • ツールの可視性制御とLocketの実例

MCP Appsとは

GitHub - laravel/mcp: Rapidly build MCP servers for your Laravel applications.
Rapidly build MCP servers for your Laravel applications. - laravel/mcp
GitHub

MCP Apps は、MCPツールがテキストではなくインタラクティブなHTMLを返せるようにする公式拡張仕様です。2026年1月にModel Context Protocolの公式ブログで発表され、Claude、Claude Desktop、VS Code Copilot、ChatGPT、Gooseがすでに対応しています。

ホスト側はサンドボックス化されたiframeでHTMLをレンダリングします。このiframe内のアプリは、MCPサーバー上のツールを直接呼び出したり、AIモデルにメッセージを送り返したりできます。認証やAPIを別途用意する必要はありません。

従来のMCPツールでは、数百行のデータを取得しても、モデルがテキストで要約するしかありませんでした。ユーザーが「先週のデータだけ見たい」「売上順に並べ替えたい」と思うたびに、プロンプトを入力し直す必要があります。MCP Appsなら、ソート・フィルター・ドリルダウンといった操作をUI上で直接実行できます。

Laravel MCP Appsの仕組み

The Easiest and Fastest Way to Build MCP and Claude Apps | Laravel - The clean stack for Artisans and agents
Laravel MCP Apps let your MCP tools return live, interactive HTML, all rendered inline inside Claude and VS Code Copilot…
Laravel

Laravel MCPパッケージ v0.7.0（2026年4月21日リリース）で、MCP Apps対応が追加されました。実装を担当したのはPushpak Chhajed氏です。

MCP Appsのプロトコル実装には、いくつかの面倒なステップが伴います。MCPハンドシェイク時のio.modelcontextprotocol/uiケイパビリティ宣言、ui://URIスキームとtext/html;profile=mcp-appのMIMEタイプ指定、iframe向けのCSPヘッダー調整、ダークモード対応の設定などです。

Laravel MCPパッケージはこれらをすべて自動化します。開発者はPHPクラスとBladeビューだけに集中できます。

導入手順

Artisanコマンド1つでスキャフォールドが完了します。生成されるのはPHPリソースクラスとBladeビューの2ファイルです。

Bladeビューでは <x-mcp::app> コンポーネントを使います。このコンポーネントがMCP Apps用のJavaScript SDKを自動でインライン展開するため、npmもViteもCDN設定も不要です。

Tailwind CSSとAlpine.jsを使いたい場合は、リソースクラスにLibrary列挙型の属性を1つ追加するだけです。スクリプトタグの挿入、Alpine.jsの[x-cloak]スタイル設定、ホストのdata-theme属性に合わせたダークモード設定がすべて自動で行われます。

ツールとアプリを紐づけるには #[RendersApp] アトリビュートを使います。これにより _meta.ui.resourceUri がツール定義に注入され、サーバーがUIケイパビリティを自動で公開します。

ツールの可視性制御

UIを持つアプリでは、iframe側からだけ呼び出したいツールが出てきます。たとえば「現在のページデータを取得する」ツールは、AIモデルが推論に使うものではなく、UIの内部実装です。

Visibility::App を指定すると、そのツールはモデルのツール一覧から完全に除外されます。iframe内のapp.callServerTool(...)からのみ呼び出し可能です。選択肢は Model（モデルのみ）、App（UIのみ）、両方（デフォルト）の3つです。

実例：Locket

GitHub - laravel/locket: MCP Demo App
MCP Demo App. Contribute to laravel/locket development by creating an account on GitHub.
GitHub

Locketは、Laravel公式が公開しているオープンソースのMCPサーバーです。MCP Appsの実装例として2つのアプリが含まれています。

TrendingLinksApp は、その日のブックマーク数が多いリンクをカード形式で表示します。ユーザーはリンクを開く、ブックマークする、「要約して」とモデルに依頼する操作をすべてUI上で完結できます。

UnreadQueueApp は、未読ブックマークの一覧を表示する個人用リーディングキューです。認証が必要なため、未認証ユーザーにはアプリ読み込み前にエラーを返します。

どちらもPHPリソースクラスは約12行で、UIのロジック・HTML・CSS・Alpine.jsの記述はすべてBlade 1ファイルに収まっています。ビルドツールは一切使っていません。

対応クライアントと今後

MCP Appsは、Claude、Claude Desktop、VS Code Copilot、ChatGPT、Gooseで利用できます。MCP公式の最初の拡張仕様として策定されたため、今後対応クライアントはさらに増える見込みです。

Laravelを使っているなら、既存のMCPサーバーにUI層を追加するハードルは低いです。Bladeとの統合がスムーズなので、フロントエンドのビルド環境を新たに構築する必要がありません。テキスト応答では伝えきれないデータをAIチャット内で直接操作できる仕組みとして、試す価値があります。