エージェントは無限のキャンバスである — Rachel Lee Nabors (Dressed for Space) が示すブラウザ・プリミティブの再武装

AI Engineer Code Summit 2026 / 約 23 分

Rachel Lee Nabors / レイチェル・リー・ネイバーズ · 02:11 「ブラウザは単なるドキュメントリーダーではない。動画も音声も、必要な何でもレンダリングできる無限のキャンバスだ — どんな用途にも API がある」

AI Engineer Code Summit 2026 (NYC) での Rachel Lee Nabors 講演、約 23 分。 Dressed for Space 代表として 3 年間 AI スタートアップやブラウザ大手と仕事をしてきた Rachel Lee が、直前に Arize の Principal DX Engineer に新たに着任した直後の発表。ニュースレター「 The Agentic Web 」の主筆でもある立場から、「ブラウザ・プリミティブを使えば agent を無限のキャンバスに変えられる」という命題を 23 分で実演する

講演の構造は明快。 (1) 1 つのサーバーで 3 種類のクライアント — humans-in-browsers、 humans-in-agents、 agents-in-browsers — をどう満たすか、 (2) MCP transports として STDIO と HTTP の選び分け、 (3) MCP apps の実装と落とし穴、 (4) WebMCP によるブラウザ側からの agent capability 提供。全編を通じて、自分の旧 webcomics サイト rachelthegreat.com を題材にしたデモが続く。

Rachel Lee の経歴がそのまま「ブラウザを信じる人間が agent 時代に立ち戻る」物語になっている点が、この講演の重みを支える。 2006 年に iVillage Network のサブサイトで 10 代少女向け webcomics を運営し、週 40 万読者を抱えていた頃に、「広告で回す、読者がいる場所で会う」ためにブラウザを学んだ。その後 Mozilla で Firefox / DevTools、 W3C で Web Animations API、 Microsoft Edge の PM、 React チームで react.dev と reactnative.dev を立ち上げた。「ブラウザはドキュメントリーダーじゃなくて無限のキャンバスだ、 CSS の連中が何と言おうと」が、 20 年以上ぶれずに本人の通底主張になっている。

この前提があるから、講演で繰り返される「chat is the lowest common denominator」 (チャットは UX の最低共通分母) という挑発が効く。母親が COBOL プログラマで「ゲームはアイコンをダブルクリックじゃない、 DOS を開いて cd blah.EXE だ」と教える家庭で育ったが、 iPhone は誰もそんな操作はしない、タップして指差してうなる。つまり開発者にとっての starfish design — チャットボックスだけがランディングに鎮座し、ユーザーが文脈を全部抱える設計 — は、ちょうど 1980 年代のテキストアドベンチャーで税金申告するような不親切さがある、という主張。

その対案として講演中盤で示されるのが MCP apps と WebMCP。結論を先取りすると、「ブラウザに既に揃っているプリミティブ — HTML / CSS / JavaScript / Web Speech API / Canvas / WebAssembly — を agent の中に持ち込めば、 inference を 1 度も要求せずに agent を視覚的・聴覚的・操作可能な体験に変えられる」が本人の処方箋。講演末尾では、自分のコミックのテキストをブラウザ標準の web speech API で text-to-speech する寸劇まで実演する。

着眼点

MCP resources の PSA — 「仕様はある、でも実装したクライアントが 1 つもない」 (10:04 - 11:30)

この講演で最も industry-facing な発言。 Rachel Lee は MCP tools の出力として 533 本のコミック全文テキストを context に流したかったが、「Claude に MCP tool を 533 回叩かせるのは context の使い方として極めて非効率」と判断した。そこで MCP の MCP resources 仕様に目を向けると、「skills を扱う完璧な vehicle」だと評価する。が、実装の現実はこうだ。

「仕様は緩く定義され、緩く実装されている。 actively にこの resources にアクセスできるクライアントが見つからない。 server 側にはある、でも UI に出ない。だからお願いだ、 agent harness を作っている人が聞いているなら、 bare bones でいい、何でもいいから実装してほしい」 (10:25 - 10:50)。これは MEMEX 編集部の視点では、業界全体に向けた具体的な PSA (public service announcement) と読める。「documentation サイトに MCP tools を追加して問題が解決すると思った人 — coding agent は documentation を MCP tools 経由で呼ぶくらいなら火の中で死ぬほうを選ぶ」という痛烈なジョークが、「tools と resources を取り違えるな」という設計指針を裏返しで示している。 React mode に切り替わった瞬間に React MCP server から resources を全部 pre-prime する、そういう使い方ができないままになっている。

WebMCP — 「ブラウザは MCP server である」という反転 (17:30 - 20:50)

講演後半の概念的ハイライト。既存の agent-in-browser ソリューションは、ブラウザに組み込まれた agent がスクリーンショットを撮って画面構造を推測するか、 DOM を XML として食って次の URL を探す。「両者とも compute 集約的 — vision モデルを回すか、 HTML を大量に飲み込んで次のリンクを掘る」 (18:00)。体感スケールで言えば、 1 ページ移動するために agent が画面写真の OCR と XML 全文走査を要求する状況は、人が雑誌を 1 ページめくるたびに虫眼鏡と国語辞典を持ち出してくるような不経済さだ。

WebMCP の発想はこれを反転させる。「web page 上の JavaScript には、 next page に行く関数や検索フォームに値を入れる関数が既に存在している。 agent にそれを直接呼ばせれば良いのでは?」 (17:50)。実装は window.navigator.modelContext.registerTools で tool を名前 + 説明 + input schema + 実行コールバックの 4 点セットで登録する。 MCP の tool 定義とほぼ同じ形をしているが、 Rachel Lee は重要な注釈を入れる — 「WebMCP は MCP に対して、 JavaScript が Java に対する関係と同じ。 hype の波に乗ったインスピレーションであって、 1 対 1 の準拠ではない」 (18:18)。仕様は今も標準化団体で議論中で、デモは MCPB という debugging 用拡張を経由している。

2 つの flavor も整理されている。 (1) declarative — form 要素に tool name / tool description 属性を付けるだけで、既に処理用 JavaScript が書かれている form が tool として agent に露出する。 form が多いサイト向け。 (2) imperative — JavaScript から API を直接呼んで tool を登録する。 API 呼び出し・workflow・データ変換に強い、 dashboard 型のサイト向け。 Rachel Lee 自身のコミックサイトは form が search 以外にほぼ無いため、 imperative 中心で組まれている。

「chat is the lowest common denominator」 — starfish design 批判の射程 (11:40 - 13:20)

着眼点 3 つめは、講演全編に通底する UX 思想批判。 Rachel Lee の論立てはこうだ。「CLI から double-click アイコンへ、さらに iPhone のタップ操作へと UX は層を重ねてきた。開発者がチャット中心の設計に偏るのは、過渡期にいる開発者特有のフェーズで、一般ユーザーには通じない」 (12:18)。

starfish design という命名は秀逸で、「ヒトデのようにランディングページの真ん中にチャットボックスが鎮座し、周囲は何もない」という視覚イメージを名付けている。 Linear のような既存システムを熟知したユーザーには有効だが、初見ユーザーには「mailbox を check しろ、 mail があるか、ここは誰の家だ」と問い続けるテキストアドベンチャーで税金申告するのと同じだ、という比喩。この批判の射程は、単なる UI 論ではなく「MCP apps をなぜ作るべきか」の動機付けに直結している。 inline で agent に表示される rich media (HTML + CSS + JS bundle) は、 starfish design の対極にある、視覚的手がかりとガイダンスを提供する UX だ、という対比構造。

動画の構成

(00:00) 自己紹介、 Mozilla / W3C / Edge / React.dev / Arize の経歴
(01:39) iVillage 時代の webcomics、週 40 万読者、 2006 年の MySpace 文化と goth/emo 感
(02:11) 「ブラウザは無限のキャンバス」命題、 Web Animations API、 Alice in Wonderland デモ、 The Agentic Web ニュースレター
(02:58) ASA (Anti-Social Social Agent) — Twitter と Blue Sky を並べて使うための自作 MCP app
(03:46) rachelthegreat.com 再構築の動機、「3 種類のクライアント (humans-in-browsers / humans-in-agents / agents-in-browsers) のための 1 つの server」
(05:11) 当日アジェンダ、会場の MCP server 運用経験リサーチ
(06:04) MCP transports 概論
(06:49) STDIO — ローカルプロセス、 JSON 設定とコマンドライン引数の組み合わせがインストール体験を悪化させる
(07:36) HTTP — web service、 POST endpoint、 serverless 設定との相性、 Vercel / Cloudflare edge functions の文脈
(08:21) Claude での HTTP MCP 接続の実演、「コネクター」として URL を貼る
(09:08) 公開されている tools の構造 — list comics / storylines / characters、 search、 search by character、 get transcripts (markdown 返却)
(09:55) 「chat 中心は未来じゃない」命題の最初の提示、 Claude との長い往復ダイアログを揶揄
(10:04) MCP resources PSA — 仕様はあるが UI に出すクライアントが無い、 agent harness 制作者への公開要請
(11:40) tool 出力は plain data だけでなく interactive app も返せる
(11:44) コミックリーダーを agent の中に置く動機、「chat is the lowest common denominator」命題、母親の COBOL プログラマ逸話
(12:31) starfish design 命名、テキストアドベンチャーで税金申告するアナロジー
(13:19) MCP apps 概論 — inline / in-agent / rich media、 DHTML 既視感ジョーク
(13:24) GetPage tool 実演、 Crow Princess を agent 内で読む、 commentary / comments / forward-backward / text mode
(14:52) tool 定義の構造、 input schema、 _meta 属性に UI URL を渡す
(15:00) MCP apps の制約 — 単一 HTML、 base64 embed、 sandboxed iframe、 local storage なし、 async tool calling、 network access なし
(15:37) 「mother may I」 — call server tool 経由でしか外と話せない
(15:50) design system 共有の効用、 Vite single file bundling
(16:35) 落とし穴 (foot guns) — link は host permission 必須、 CSP / cores policy、 visibility を app にして tool 出力を agent に直接読ませない指示
(17:29) WebMCP 導入、既存 agent-in-browser の scrape / vision アプローチの非効率
(18:16) WebMCP は JavaScript と Java の関係、仕様は MCP と diverge する可能性
(18:38) declarative vs imperative の 2 形態、 form 中心サイトと dashboard 中心サイトの使い分け
(19:08) navigator.modelContext.registerTools の実装、 next page navigation のコールバック例
(19:58) MCPB extension での実演、 read this to me、 go to next page の音声操作
(20:45) WebMCP creator (元 Amazon) インタビュー紹介、 Standards Community Group の現状
(21:37) 「browser is going to die」過去発言の自己訂正、 web は死んでない、進化しているだけ
(21:50) Web Speech API の text-to-speech 実演、 zero dependency / no inference のメリット
(22:23) 締めくくり、 Web Speech / Animation / Audio / Canvas / WASM / CSS など既存 API を agent と組み合わせる呼びかけ

出典

AI Engineer Code Summit 2026 公式 YouTube プレイリスト掲載予定。動画 ID は確認時点で未確定 (UNKNOWN_PLACEHOLDER)。

レイチェル・リー・ネイバーズ

Rachel Lee Nabors

Dressed for Space 代表 / Arize Principal DX Engineer / 元 Mozilla・W3C・Microsoft Edge・React チーム

用語集

MCP transports: MCP server が agent と通信するときのプロトコル選択肢。 STDIO (Standard Input / Output、「スタジオ」と読む) はローカルプロセスとして spawn され、標準入出力で通信、セッション中ずっとローカル。 HTTP は web service として動作、 POST endpoint で通信、 serverless との相性が良い。 transport の選び方がインストール体験を抜本的に左右する。
STDIO: MCP の transport の 1 つ。 server がクライアントによって spawn されるローカルプロセスとして動作、標準入出力で通信。 JSON 設定ファイルにコマンドライン引数を書く必要があり、「ほとんどのユーザーは触りたがらない」 (Rachel Lee) インストール体験になる。
HTTP: MCP の transport の 1 つ。 server が web service として動作、 HTTP POST で通信。 Vercel や Cloudflare の edge functions のような serverless 環境に乗せやすく、ユーザーは URL を貼り付けるだけで接続できるため、 STDIO に比べてインストール障壁が大きく下がる。
MCP apps: MCP server が tool 呼び出しの応答として返せる、 HTML / CSS / JavaScript を 1 ファイルにバンドルした island 型 web app。 sandboxed iframe で隔離、ネットワーク直叩き不可、 local storage 不可、外部リソースは CSP / cores policy で明示許可、外との通信は親 agent への tool 呼び出し (call server tool) を経由する「mother may I」構造。
MCP resources: MCP 仕様で定義されている、 server が agent に提供できる markdown / テキスト等のリソース機能。 tool 呼び出しと違い、 agent harness 側が context priming のタイミングを制御できる設計。ただし 2026 年 5 月時点では UI に露出させているクライアントが存在せず、 Rachel Lee は agent harness 制作者に向けて「bare bones でいいから実装してほしい」と PSA を発出。
WebMCP: ブラウザの中で動く web page が MCP server として振る舞うための提案中の API。 window.navigator.modelContext.registerTools 経由で、 page 内の JavaScript 関数を agent から呼び出せる tool として公開する。 declarative (form 要素への属性付与) と imperative (JS からの登録) の 2 形態。標準化議論は進行中、 MCP との 1 対 1 準拠ではない。
Content Security Policy (CSP): ブラウザが web 資源 (font / image / script / iframe など) の読み込み元を制限するための仕様。 MCP apps の sandboxed iframe では CSP がデフォルトで厳しく、外部 CDN font などを使うには明示許可が必要。「blank look が出たら CSP を疑え」 (Rachel Lee)。
iframe sandboxing: HTML iframe の sandbox 属性によって、中で動くコンテンツの権限を厳しく制限する仕組み。 MCP apps はこの上に成立しており、親文書への DOM アクセス・popup 開封・top-level navigation などが既定で禁じられる。結果として、 link を開くにも host permission が必要になる。
cores policy: MCP apps が外部リソース (font ファイル、 CDN 上の画像など) を読み込むときに、 server が許可するドメインを宣言する設定。デフォルトでは何も載らないため、 design system を共有したい場合は cores policy にエントリを追加する必要がある。
The Agentic Web: Rachel Lee Nabors が書いているニュースレター。 agent と AI がブラウジング・コンテンツ消費をどう変えるかをテーマに扱う。「browser is going to die」という挑発的な過去発言の自己訂正 — 「web は死んでない、進化しているだけ」 — の延長線上で運営されている。
ASA (Anti-Social Social Agent): Rachel Lee 自作の MCP app。 Twitter と Blue Sky を並べて使うためのインターフェースで、「サイトを訪れることも、他人のアルゴリズムに晒されることもなく」 SNS を消費できるよう設計されている。講演冒頭で agent 自作経験の例として紹介される。
starfish design: Rachel Lee 命名の UX アンチパターン。ヒトデのようにチャットボックスだけがランディングページに鎮座し、ユーザー側に文脈を全部抱え込ませる設計。既存システムを熟知したユーザーには有効だが、初見ユーザーには「箱の中をテキストで探索するアドベンチャーゲーム」を強いる。 chat is the lowest common denominator 批判の中核。