エージェントは無限のキャンバスへ—RL ナボース、宇宙着衣で

エージェントは無限のキャンバスへ：ブラウザネイティブな UI で AI 体験を再定義する

AI エージェント開発において、チャットボックスという最低限のインターフェースから脱却し、ブラウザが持つ「動画・音声・インタラクション」という無限の可能性を引き出す時代が到来しています。本記事では、MCP（Model Context Protocol）を活用して Web サーバー上で動作させる手法や、HTML/CSS/JS をバンドルしたインラインアプリをエージェント内に組み込む技術を通じて、次世代の「Agentic Web」の実現に向けた具体的なロードマップを解説します。

ブラウザは単なる文書リーダーではない：無限のキャンバスとしての再定義

従来の視点では、ブラウザはテキストや画像を表示する「文書リーダー」として捉えられがちです。しかし、ウェブ開発者として長年 Mozilla や Microsoft のエッジブラウザで標準策定に携わってきた著者は、ブラウザを「動画、音声、インタラクションを含む無限のキャンバス」と定義し直すべきだと主張します。

「ブラウザは単なるドキュメントリーダーではない。それは無限のキャンバスであり、文書だけでなく動画やオーディオなど何でも描画できる。必要なものはすべて API で対応可能だ」

この視点転換が重要です。AI エージェントがテキストベースの対話に留まる限り、その体験は CLI（コマンドラインインターフェース）時代のままです。現代のユーザーは iPhone のようにアイコンをタップし、視覚的な手がかりで操作することに慣れています。チャットボックス中心の「ヒトデ型デザイン」では、ユーザーが自らの頭の中でシステムの状態や機能を推測する必要があり、非熟練者にとって高い参入障壁となります。

MCP トランスポートの比較：ローカル実行から Web 上への移行

MCP サーバーをエージェントと通信させるためのトランスポート（転送層）には、主にSTDIOとHTTPの 2 つがあります。この選択が、開発者の体験とユーザーの UX に決定的な影響を与えます。

STDIO（ローカル実行）の限界

STDIO は「Standard Input/Output」を指し、サーバーがローカルプロセスとして動作する方式です。クライアント（エージェント）が起動時にコマンドライン引数でサーバーを呼び出し、セッション中も常時稼働させます。

• 課題: 設定ファイルに多数の JSON コマンドライン引数を記述する必要があり、ユーザーは複雑な設定を強要されます。
• UX の欠如: ユーザーが「設定画面」に行かされる必要があり、すぐに使える体験を提供しにくいです。

HTTP（Web 上ホスティング）の優位性

一方、HTTP を利用すれば、MCP サーバーは Web サービスとして動作します。API エンドポイントでリッスンし、信頼性の高い HTTP POST リクエストで通信を行います。

• メリット: Vercel や Cloudflare のようなサーバーレス環境やエッジ関数と相性が良く、すぐに URL を入力するだけで利用可能です。
• UX の向上: ユーザーは名前をつけて URL を入力するだけ。設定の手間が大幅に削減され、エージェントへの接続が瞬時に行えます。

「STDIO ではコマンドでローカルサーバーを起動するために設定ファイルを更新する必要がありますが、HTTP を使えば、ユーザーの体験は自分の設定画面に行くだけ。とてもシンプルです」

Web MCP とインラインアプリ：チャットボックスからの脱却

トランスポートの問題を解決するだけでなく、MCP の真価を発揮するのは「Web MCP」、つまりエージェント内に直接 HTML/CSS/JS アプリを組み込む技術にあります。

インタラクティブな UI の実装方法

従来の MCP ツールは、JSON やテキスト、マークダウンといった構造化データを返すことに限られていました。しかし、MCP アプリとして単一の HTML ファイルをバンドルし、エージェント内で直接動作させることで、リッチな UI を提供できます。

著者の例では、2010 年代に作成したウェブコミックのアーカイブサイトを MCP サーバー化しました。エージェントは以下の機能を持つアプリを返します：

• コミックリーダー: 画像付きで漫画を読み進めるインタラクティブな UI。
• メタデータ検索: キャラクターやストーリーラインに基づいた検索機能。
• 双方向性: テキストモードとビジュアルモードの切り替え、解説表示、コメント機能など。

「エージェントにコミックリーダーを入れようと思った。長いテキストの壁ではなく、画像付きで読めるようにしたんだ」

このアプローチにより、エージェントは「クロード、君は私の最悪の友人じゃないか」と言いたくなるような、文字の壁を投げつけるのではなく、視覚的に直感的な体験を提供します。

技術的な制約と解決策

MCP アプリは孤立した島のような単一 HTML ファイルとして動作するため、いくつかの制約があります：

1. リソースの埋め込み: 外部 CDN のフォントや画像へのリンクは、Content Security Policy (CSP) で許可するか、Base64 で直接埋め込む必要があります。
2. 状態管理: iframe 内でサンドボックス化されているため、ローカルストレージの利用や iframe を跨いだ状態追跡はできません。
3. ネットワークアクセス: アプリ内からサーバーへリクエストを送るには、call_server ツールを介して外部ツールを呼び出す必要があります。

これらの制約を克服するためには、デザインシステムの活用が不可欠です。フォント、CSS、JavaScript コンポーネントをすべて同じサーバーから提供し、単一ファイルにバンドルすることで、安定した動作を実現できます。

未来への示唆：Agentic Web の実現

この技術的パラダイムシフトは、AI エージェント開発における UI/UX のあり方を根本から変える可能性があります。テキストベースの対話からブラウザネイティブなリッチ体験への移行により、エージェントが直接 Web アプリを実行・操作する「Agentic Web」の実現が現実味を帯びてきます。

開発者にとって、ツール作成のハードルは低下し、ユーザーにとっては「チャットボックス」という最低限のインターフェースから解放された、視覚的・聴覚的な次世代体験が待っています。ブラウザという無限のキャンバスを活用することで、AI エージェントは単なる情報検索ツールから、真に人間に近いインタラクションを可能にするパートナーへと進化していくでしょう。