WebMCPを理解しよう

概要
本資料は、AIが外部データやツールを扱うための共通規格である**MCP（Model Context Protocol）と、そのWeb版とも言える最新の仕組み「WebMCP」**について、初心者の方でもイメージしやすいよう図解とともに解説したものです 。

これまでのMCPは、主にAIツールとAPIを繋ぎ込む「システム寄り」の役割が中心でしたが、WebMCPの登場により、Webサイトから直接AIに「できること」を教えるという新しいユーザー体験の形が見えてきました 。

主な内容
そもそもMCPとは？
AIが外部データを扱うための「Type-C」のような共通規格 。
個別の開発コストを抑え、AIが自律的に「どの処理を使えばよいか」を判断できる仕組みを提供します 。

WebMCPの正体とメリット
HTML属性やJavaScriptを追加するだけで、Webページ上の機能をAIに公開可能 。
従来のMCPの課題であった「認証情報の安全性」や「コンテキストの増大」を、ブラウザ側の仕組みで解決します 。

具体的な実装方法
HTML（Declarative API）: タグに属性を追加するシンプルな方法 。
JavaScript（Imperative API）: より詳細な入出力や処理内容を定義する方法 。

今後の展望
現状はChromeのEarly Preview段階ですが、ユーザー操作の強力な補助ツールとして、Webのあり方を変える可能性を秘めています 。

こんな方におすすめ
MCP（Model Context Protocol）の概要をサクッと理解したい方
AIエージェントとWebサイトの連携の未来に興味がある方
WebMCPの実装コード例（HTML/JS）を参考にしたいエンジニアの方

Transcript

1. WebMCPを理解しよう
2. そもそもMCPとは
3. そもそもMCPとは ・Model Context Protocolの略 ・AIが外部データを扱う時のType-Cのようなもの 操作1 データ 連携の専用 の仕組み 操作2 操作3 ・個別の操作毎に処理を作 る必要がある ・増やすときにコストが上が る
4. ・Model Context Protocolの略 ・AIが外部データを扱う時のType-Cのようなもの そもそもMCPとは 操作1 MCP 連携の専用 の仕組み 操作2 操作3 データ MCPがある程度吸収する 仕組みを提供する
5. ・APIと何が違うの？ そもそもMCPとは MCP 処理1 ・概要や説明 ・入力に何が必要か 処理2 ・概要や説明 ・入力に何が必要か こんな処理があるのね 処理1を使ったらよさそうだか らこのデータを渡すよ
6. WebMCPとは
7. ・これまでのMCPはAIツールからAPIなどの繋ぎ込みが主役だった ・WebサイトからAIに教える機能を追加する HTMLに属性の追加 or JavaScriptで追加 ・ChromeのEarly Previewで利用できる ・現状は利用できるツールはない （Googleのエンジニアが出しているChrome拡張機能で試す） ・現状の機能の目的はユーザー操作の補助 WebMCPとは
8. WebMCPとは こんな処理が あります こんな処理が あります これをして これをして 欲しいそうです
9. WebMCPとは(サンプルページ)
10. 実装方法
11. <form toolname="sortReviews" tooldescription="レビュー 一覧を指定した順序に並び替えます"> ... <select name="sortValue"> <option value="default">標準</option> ... </select> </form> 実装方法1 HTMLで定義 この二つの属性を 追加する 選択肢が自動で候補 になる
12. <form toolname="sortReviews" tooldescription="レビュー 一覧を指定した順序に並び替えます"> ... <select name="sortValue" toolparamtitle="Possible Options" toolparamdescription="A nice description"> <option value="default">標準</option> ... </select> </form> 実装方法1 HTMLで定義 選択肢の説明で 詳しく伝えることもで きる
13. 実装方法1 HTMLで定義 1)入力する 2)AIにプロンプトを送る 3)反映される
14. <form class="search-controls" toolautosubmit toolname="searchReviews" tooldescription="レビューをキーワー ドで検索・絞り込みます" > <input type="text" id="search-input" name="keyword" placeholder="レビューを検索..."> <button type="submit">検索</button> </form> 実装方法1 HTMLで定義 選択肢の説明で 詳しく伝えることもで きる
15. const getProductReviewsTool = { name: "getProductReviews", description: "Retrieve customer names, ratings, dates, and review comments from the product page.", inputSchema: { 入力の定義 }, outputSchema: { 出力の定義 }, execute: async function (params) { 処理} } window.navigator.modelContext. registerTool(getProductReviewsTool); 実装方法2 JavaScriptで定義 入出力や処理内容な どを定義 関数を参照できるよう にする
16. 実装方法2 JavaScriptで定義 1)入力する 2)AIにプロンプトを送る 3)結果が表示される
17. 利便性はあるのか？
18. 利便性はあるのか？ MCPはいくつかの課題がある ・コンテキストの増大 ・認証情報が平文で設定ファイルにあるので安全性が低い 処理1 処理2 処理3 処理4 ・ ・ ・ ・ の処理がある その上で何 使うか？ =コンテキストの 増大 処理1{ 認証情報1 }, 処理2{ 認証情報2 } =特定のテキストファイルに設 定が書かれている =このファイルが見られると 認証情報がバレる
19. 利便性はあるのか？ MCPはいくつかの課題がある ・コンテキストの増大 ・認証情報が平文で設定ファイルにあるので安全性が低い 今実行できるのは、 この処理です Webページにある機能だけなので数が減る+認証はブラウザ側 今できる機能だけ提 供します ＝認証はブラウザ側
20. まとめ
21. まとめ システムとしてのMCPから、一般的な利用の選択肢の候補となる可能性がある 追記内容がそこまで複雑ではないので、実装が容易である 現状はユーザー補助がゴールとしているが、Webサイトへのアクセスせずにツールから利 用する前準備となりそう 現状はAPIキーが必要で課金しないとかなり制限がかかる →今後全ての人に同じ体験を提供するWebページとなっていることから変わりそう サンプルページ→　　　　　　　　　　　　まとめたQiitaページ→