WebMCPを理解しよう

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. 実装方法
10. <form toolname="sortReviews" tooldescription="レビュー 一覧を指定した順序に並び替えます"> ... <select name="sortValue"> <option value="default">標準</option> ... </select> </form> 実装方法1 HTMLで定義 この二つの属性を 追加する 選択肢が自動で候補 になる
11. <form toolname="sortReviews" tooldescription="レビュー 一覧を指定した順序に並び替えます"> ... <select name="sortValue" toolparamtitle="Possible Options" toolparamdescription="A nice description"> <option value="default">標準</option> ... </select> </form> 実装方法1 HTMLで定義 選択肢の説明で 詳しく伝えることもで きる
12. <form class="search-controls" toolautosubmit toolname="searchReviews" tooldescription="レビューをキーワー ドで検索・絞り込みます" > <input type="text" id="search-input" name="keyword" placeholder="レビューを検索..."> <button type="submit">検索</button> </form> 実装方法1 HTMLで定義 選択肢の説明で 詳しく伝えることもで きる
13. 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で定義 入出力や処理内容な どを定義 関数を参照できるよう にする
14. まとめ
15. まとめ システムとしてのMCPから、一般的な利用の選択肢の候補となる可能性がある 追記内容がそこまで複雑ではないので、実装が容易である 現状はユーザー補助がゴールとしているが、Webサイトへのアクセスせずにツールから利 用する前準備となりそう 現状はAPIキーが必要で課金しないとかなり制限がかかる →今後全ての人に同じ体験を提供するWebページとなっていることから変わりそう 　　　　　　　　　　　　　　　　　　　　まとめたQiitaページ→