ChatGPTやClaude上でリッチUIを表示する「MCP Apps」をAWSがサポート — AIホスト非依存の標準仕様でサービス公開が変わるか

9月12日、AWSが「Build interactive MCP Apps using Amazon Bedrock AgentCore」と題した記事を公開した。この記事では、Amazon Bedrock AgentCore上にインタラクティブなHTMLウィジェット付きMCPアプリを構築・デプロイする方法について詳しく紹介されている。

MCPにUIを載せる——なぜ今これが必要か

ChatGPTやClaudeのようなAIホストが日常的なサービスの入口になりつつある中、企業がサービスを「プレーンテキストだけでなくリッチUIで」AIホスト上に公開したいというニーズが高まっている。しかしホストごとに個別実装するのは非現実的だ。

そこで登場するのがMCP Appsという拡張仕様だ。Model Context Protocol（MCP）にインタラクティブなHTMLウィジェットのレンダリング機能を加えたもので、ホスト非依存の標準として設計されている。ChatGPTでもClaude.aiでも、同一のMCPサーバーから同じUIを届けられることを目指した仕様だ。ただし現時点でこの記事が接続例として示しているのはChatGPTとClaude.aiの2ホストのみであり、その他のAIホストでの動作実績や対応状況については元記事では言及されていない。普及の広がりという意味では、今後の対応状況を継続的に確認することが望ましい。

Amazon Bedrock AgentCoreはそのMCPサーバーをサーバーレスで安全にホスティングするプラットフォームだ。AgentCore Runtimeがセッション分離された実行環境を提供し、AgentCore Gatewayが単一の管理エンドポイントとして外部AIホストからのアクセスを受け付ける。

デモ：Unicorn Rentalsで見る動作フロー

記事ではサンプルアプリ「Unicorn Rentals」を使って4ステップの動作を具体的に示している。

Step 1: ユニコーン一覧の表示
「Can you show all unicorns?」と入力するだけで、AIホストは各ユニコーンの画像・名前・説明・時間料金・空き状況をカード形式でレンダリングする。テキストの羅列ではなくインタラクティブなUIとして表示される点がポイントだ。

Step 2: 予約
「I would like to book Stardust unicorn」と話しかけると、予約IDや日時・料金がチャット内に確認カードとして即座に表示される。

Step 3: 予約確認
「Show me my unicorn bookings」で現在のレンタル状況を取得できる。このリクエストにはウィジェットが不要なため、テキスト形式で返却される。すべてのレスポンスにUIが必要なわけではなく、ケースに応じてテキストとウィジェットを使い分けている点が実用的だ。

Step 4: 返却
「I would like to return my unicorn」で終了。レンタル時間と時間料金から合計金額を計算して会話内に表示する。

これらすべてが、AgentCore Runtime上で動く単一のMCPサーバーと、その前段に置いたAgentCore Gatewayで実現される。

アーキテクチャの構造

元記事に掲載されているアーキテクチャ図を参照されたい。構成の概要は以下の通りだ。

AIホスト（ChatGPT / Claude等）: tools/call・resources/read等のMCPメッセージを発行する
AgentCore Gateway（AWS WAF付き）: 外部AIホストからのリクエストを受け付ける単一エンドポイント。AIホストとGateway間の接続認証方式については後述する
AgentCore Runtime: SigV4（IAM）で認証されたリクエストをGatewayから受け取り、MCP Appコンテナ（TypeScript + Express.js）を実行する。GatewayとRuntime間の通信にSigV4が使われる
AWS Lambda: ビジネスロジックを担う。MCPプロトコルを一切知らない
Amazon DynamoDB: 予約データ等の永続化に使用

ウィジェットのHTMLはMCP Resourceとして登録され、AIホストがサンドボックス化されたiframe内でレンダリングする。ウィジェット内の画像はAmazon CloudFront（オリジンはS3）から配信される。

MCP AppはTypeScriptで実装されており、MCP公式TypeScript SDK（@modelcontextprotocol/sdk）と@modelcontextprotocol/ext-appsパッケージを使用する。@modelcontextprotocol/ext-appsはMCP Apps固有のウィジェット登録APIを提供するパッケージだが、元記事ではMCP公式SDKの一部なのかAWS独自の拡張なのかが明示されていないため、利用前に最新のパッケージ情報を確認することを推奨する。ツールはregisterAppTool、ウィジェットはregisterAppResourceでそれぞれ登録する。ツールのレスポンス内_meta.ui.resourceUriフィールドにリソースURIを指定することで、AIホストが対応するウィジェットHTMLを取得しレンダリングする仕組みだ。

ビジネスロジックはMCPとは完全に分離されているのも設計上のポイントだ。Lambdaはプロトコルを一切知らず、MCPサーバーが薄いアダプター層として機能する。既存サービスをECSやEKSで動かしている場合でも、HTTP呼び出しやSDKクライアント経由で接続できる。

デプロイ手順

前提条件はNode.js 22以上、AWS CLI v2、AWS CDK CLIの3点。

git clone https://github.com/aws-samples/sample-agentcore-mcp-apps.git
cd sample-agentcore-mcp-apps
bash deploy.sh

デプロイ完了後に出力されるGatewayResourceUrlを使い、AIホストに接続する。

ChatGPTへの接続はDeveloper Modeを有効化した上でNew Pluginとして登録、Claude.aiはConnectors画面からAdd Connectorで追加する。いずれもAuthenticationは「No Auth」を選択する。

ここでの「No Auth」は、AIホスト（ChatGPTやClaude.ai）とAgentCore Gateway間の接続においてAIホスト側が資格情報を持たない構成を指す。Gateway〜Runtime間の通信にはSigV4（IAM）が使われており、AIホストから見ると認証なしでGatewayに接続できるが、Gateway以降はAWS側が認証を担う設計だ。本番環境でこの構成が適切かどうかはセキュリティ要件に応じて検討する必要がある。

本番運用時の考慮点

記事では以下が明示されている。

モニタリング: CloudWatchでGatewayリクエスト指標・Lambda呼び出し・Runtimeコンテナの状態を監視し、エラー率とレイテンシにアラームを設定する
コスト: AgentCore RuntimeはコンテナのランタイムとInvocation数に基づく従量課金。コンテナのメモリ・CPU割り当てを適切にサイジングする
セキュリティ: MCPサーバー側でツール引数をスキーマで検証し、Lambdaでも再検証する。非構造化テキストにはAmazon Bedrock GuardrailsでPIIのフィルタリングや有害コンテンツのブロックを適用する

クリーンアップはnpx cdk destroyで完了する。

詳細はBuild interactive MCP Apps using Amazon Bedrock AgentCoreを参照していただきたい。