AdGate for WebMCP

2026年9月17日(木)に開催されたBrave MeetupでのLT用のスライドです。

Transcript

1. AdGate for WebMCP エージェント時代の新しい広告・決済モデル 1
3. 今日話すこと(10分) 1. WebMCP の概要 2. OpenAI WebMCP Challenge とは 3. 作った作品 AdGate の概要 4. 実際に作って わかったこと キーワードは「人がアクセスの主導権を握ったまま、AIに任せる」 3
4. 01. WebMCPの概要 エージェントが「Webページの中の道具」を直接使うための標準 4
5. WebMCPとは ページ自身が AIエージェント向けの道具(ツール) を公開する実験的なオープン標準 エージェントは画面を スクレイピング/推測せず、構造化ツールを直接呼び出せる 人とエージェントが 同じ認証済みセッション・同じUI をそのまま共有できる OpenAI・Google Chrome・Cloudflareなどが中心になって推進中 「ページの中に、エージェント専用の操作口をつくる」という発想 5
6. WebMCPの仕組み // ページ側であらかじめツールを宣言しておく document.modelContext.registerTool({ name: "analyze_recipe", description: "レシピを解析し、栄養メモや代替案を返す", inputSchema: { /* Zodなどでスキーマを定義 */ }, async execute(input, { signal }) { // 実行前に人の確認ゲートを挟むこともできる return await gateCoordinator.run(input, signal); }, }); navigator.modelContext へのフォールバックも用意しておくのが定石 6
7. MCPとWebMCPの違い MCP サーバー側でツールを呼び出す バックエンド/ローカルツール向け ブラウザUIとは独立に動く WebMCP ブラウザ・ページの中でツールを呼ぶ 既存のUI・ログイン状態をそのまま利用 実行中に 人がその場で介入・承認 できる 7
8. 02. OpenAI WebMCP Challengeとは 今回このAdGateを作ったハッカソン 8
9. Challenge概要 OpenAI主催、約10日間のオンラインハッカソン 登録開始 8/25 → 提出締切 9/4 → 結果発表 9/23予定 協賛: Google Chrome / Cloudflare / Shopify / Vercel / Render / Netlify 賞金総額 $35,000(上位10チームに各$3,000 現金 + ChatGPT Pro 1年 など) 9
10. 03. AdGateの概要 WebMCP × x402 で考えた、エージェント時代の広告モデル 10
11. 課題意識 AIエージェントが 人の代わりにWebを読む 時代がやってきた エージェントは広告を見ない → パブリッシャーの収益機会が消える 便利さと引き換えに、無料コンテンツを支えてきた仕組みが崩れるリスク 人がアクセス許可の主導権を保ったまま、収益化の道を残せないか? 11
12. AdGateとは 架空のレシピサイト 「Open Table Journal」 を構築 プレミアム機能として WebMCPツール analyze_recipe を実装 画面のボタンから使っても、エージェント経由で使っても 同じ1つのゲート を通る ゲート通過後、栄養メモ・代替案・注意書きを含む 1つの構造化結果 が返る 12
13. 2つのアクセス方法 スポンサー広告 8秒間 の広告視聴 ウォレット不要・無料 サーバー側で視聴時間を厳密に検証 x402決済 Base Sepolia上で 0.01 testnet USDC ウォレットで金額を確認して明示的に承認 秘密鍵はAI側に一切渡らない どちらの経路も、同じ「保護されたエンドポイント」を解放する 13
14. システム構成 コンポーネント 役割 Frontend(React / Vite) WebMCP登録・ゲートUI・ウォレット連携 Resource Server(Hono) 認可判定・スポンサー/決済の検証・解析処理 Facilitator(Hono / viem・任意) x402決済の検証とtestnet決済の実行 Cloudflare Durable Object でスポンサーセッションと発行済みグラントを永続化 React Vite Hono Cloudflare Workers x402 Base Sepolia 14
15. デモの流れ 1 エージェントに「このレシピを解析して」と依頼する 2 が呼ばれ、ゲートで一時停止する 3 その場で 広告視聴 or 決済承認 を選ぶ 4 同じツール呼び出しが 自動的に再開 し、結果が返る analyze_recipe 15
16. 実際の画面 エージェント側:ツールインスペクタに analyze_recipe が見える 人側:スポンサー視聴のゲートとカウントダウン 16
17. 04. 実際に作ってみてわかったこと 短い開発期間で見えた学びと反省 17
18. 苦労した点 WebMCPとx402を どう組み合わせるか、ウォレットの置き場所に悩んだ 初期版は注入型ウォレットのみ → アプリ内ブラウザで決済デモがしづらい Privyのパスキー embedded wallet を追加し、ブラウザウォレットと併用可能に パスキー認証そのものは決済を承認しない設計を維持(人が金額を見て署名) 18
19. 学んだこと WebMCPは 「見えるブラウザ」が前提 → 人とAIの役割分担を設計しやすい MCPとの違いは、実際に実装して初めて体感できた x402との相性の良さ:決済も「見えるゲート」の一部にできる 人が主導権を握ったまま、AIに任せる範囲を広げる設計は十分できる 19
20. 今後の展望 ニュース・研究・クリエイターツールなど 他コンテンツへゲートを拡張 スポンサー向け ダッシュボード、対応チェーン/資産の拡充 本番運用に向けて:認証・レート制限・監視・鍵管理・決済レールの検証 プライバシーに配慮した スポンサー計測 の検討 20
21. まとめ 1 WebMCPは「ページの中にエージェント専用の入口を作る」標準 2 AdGateは 人の承認を挟んだまま 広告 or 決済で収益化する一例 3 見えるWebだからこそ、人とAIの役割分担を設計できる 21
22. 見えるWebが、人とAIの信頼を設計する 22
23. Thank you！ 23