WebMCP Challenge に星空観察アプリで参加した話

2026/09/09(水)のAgentic Tokyo #2　でのLT用
https://aibuilders.connpass.com/event/401510/

Transcript

1. WebMCP Challengeに 星空観察アプリで参加した話 Agentic Tokyo #2 2026/09/09 オカザキ 1
2. 今日の内容 OpenAI主催のWebMCP Challengeに参加した話と、 ほかの方の作品＝使用例の紹介をしながらWebMCPの利用例につ いて話します。 2
3. 自己紹介 • オカザキ（@dario_okazaki） • とある企業のシステムエンジニア • 前職はweb開発のPM • 四捨五入すると50歳 • 個人開発で保護猫の管理アプリや畜産関係のアプリを開発してます 3
4. WebMCP Challengeとは • OpenAI 主催のハッカソン • 開発期間：2026年8月25日〜9月3日 • 参加登録：約7,100人 • 参加ルール • WebMCPを使ったWebアプリをDevpostへ投稿 • 新規アプリでも既存アプリでも参加可能 • 既存アプリの場合は、期間中にWebMCP部分を新規開発すればよい • コーディングエージェントは自由 • 日本からもSNSやGitHubで確認できた範囲では少なくとも数名が提出。 ※Project Galleryがまだ公開されていないため、正確な日本からの提出数は不明 4
5. WebMCPとは(1/2) • Webサイト自身が、AI Agent向けのToolを公開する仕組み • 人間とAgentが同じWebページ・同じ状態を共有できる 人間 Web UIで操作・確認 Webアプリ Agent WebMCP Tools 5
6. WebMCPとは（2/2) • 特徴 • 動作レイヤー：フロントエンド / ブラウザ内 • ライフサイクル：ページ・タブ・セッションに紐づく • 主な用途：現在開いているWebアプリの状態取得・操作 • ChatGPT Desktopの内蔵ブラウザで利用可能(9/9時点） 実装などの詳細は、クラスメソッドの記事が分かりやすいです。 WebMCPがアツいので見てほしい： https://dev.classmethod.jp/articles/webmcp-introduction/ 6
7. 開発した天体観測アプリについて • InteractiveStarLab：https://github.com/okajun35/InteractiveStarLab • https://interactive-star-lab.vercel.app/ • 自然言語で日時と場所を指定すると星空観察のプランと観測計画を作成するアプリ 7
8. DEMO 8
9. WebMCP Challengeでの傾向 https://x.com/question_false/status/2094361752184275233 この分類をもとに今回のハッカソンでWebMCPの傾向を見てみる 9
10. WebMCP Challengeでの傾向 01 単純接続型 既存機能をToolとして公開 02 AI統治型 重要な操作を承認・記録 03 WebMCP体験型 Agentの操作が人間の体験につながる 04 問題提起型 仕様やアクセシビリティの課題を検証 05 汎用基盤型 既存アプリをWebMCP対応にする • DevPost、Githubから例を紹介する 10
11. 単純接続型 | 既存機能をToolとして公開 Agent 目的を受け取る WebMCP Tool → search() create() Web機能 → 検索・登録・編集 絞り込み・計算 update() • フォームへの入力選択を人間の代わりに入力する • LedgerAgent AI：https://devpost.com/software/developers-xa3nw7 11
12. AI統治型｜重要な判断を人間に戻す Webサイトでプレミアム 機能にアクセスしようと する Agent Human Decision Agent → X40２決済するかどうか 判断する → 人間が決済後に、 プレミアム機能にアクセ スする • 通常処理はAgentが進め、承認が必要な操作で止まる。 • AdGate for WebMCP：https://github.com/mashharuki/OpenAI-WebMCP-Challenge-Hackathon2026 12
13. WebMCP体験型｜操作が、そのまま体験になる 作品や鑑賞ルートを選 ぶ Human Decision UI Update Agent → 選んだ作品へ画面が移 動・強調される → 人間がその作品を 鑑賞する。 • AI Agentの操作が、そのまま人間の鑑賞体験として画面に反映される。 • Gallery 402 :https://devpost.com/software/gallery-402 13
14. 問題提起型｜仕様やアクセシビリティの課題を検証 図やオブジェクトを 編集する Human Verification UI Update Agent → 変更内容を構造化して 伝える → スクリーンリーダ※で 変更を確認する • AIに操作を任せても、結果を人間が確認できるとは限らない。 • 2D WebMCP: https://devpost.com/software/screen-readers-webmcp • ※スクリーンリーダー：画面を見ずに、Webの内容や操作結果を音声で確認するための支援ソフト 14
15. 汎用基盤型｜複数アプリのAgent対応を支える 既存ゲームの操作を共通 インターフェース化する Shared Game WebMCP Adapter Game Integration → 変更内容を構造化して 伝える → 人間とAIが同じゲーム を操作する • 1つのアプリを越えて、共通の SDK・Adapterを提供する。 • Godot / Unity向けの既存自動化基盤に WebMCP Adapterを追加し、ゲームの操作を AI Agentへ公開する。 • AI Lovey-Dovey Kyun-Kyun!：https://devpost.com/software/ai-lovey-dovey-kyun-kyun-our-first-mission-together 15
16. WebMCP Challengeに参加した気づき 16
17. AgentはGUIを経由せず、Toolを直接利用できる • WebMCPをつかわずボタンを押す場合がある • ボタンがあるUIでなくてボタンがなくて情報表示に特化したUIにしたほうがよい？ 17
18. AgentはGUIを経由せず、Toolを直接利用できる • 人間が操作するのとは別にWebMCP用の画面を作成 18
19. まなび 従来 人間 操作・手順実行 → GUI → Application WebMCP化 Agent → Tool → Application → 人間 確認・判断 19
20. 推論は誰が担う？ ティラノスクリプト(tyrano.jp)のWebMCP対応（試作） • AIチャットなどの推論が重い部分をユーザー側が肩代わりする可能性がある • コスト的に難しかったWebサービスが今後作りやすくなるかも 20
21. まとめ • WebMCPは「AI用APIをWebにつける」だけの話ではなさそう。 • AIがWebを操作するようになったとき、 「人間向けの Web UIをどう再設計するか 」というところが、 一番面白いと感じた。 21
22. 付録1：どう作ったか • アプリ本体：Qwen3.8-27B + OpenCode • Web：GPT-5.6 Sol + Codex cli • ホスティング：Vercel 22
23. 付録２：WeｂMCPの例 • AI統治型 • https://github.com/thato899/lifeos • https://github.com/blackstackdev/actalume • https://github.com/mashharuki/OpenAI-WebMCP-Challenge-Hackathon2026 • WebMCP体験型 • https://github.com/hello-ai-company/livingtown • https://github.com/GharsallahDev/cahoots • 問題提起型 • https://github.com/zz08matsujp-max/barge-in • https://github.com/Winchestor2001/blindfold-webmcp • 汎用基盤型 • https://github.com/link1345/gua • https://github.com/agentdesksdk/agentdesk 提供：ぷらむらいす @question_false 23