最近、WebMCPという技術を知り、実際にWebMCPを使ったポートフォリオサイトを作ってみました。
WebMCPは、Webサイトの機能をツールとして公開し、ブラウザ上のAIエージェントなどから利用できるようにする仕組みです。
今回は詳しい仕組みには触れず、ChromeでWebMCPを使えるようにする手順を簡単に紹介します。
実際に作ったサイトはこちらです。
このサイトでは、AIがWebMCPを通して既存のポートフォリオサイトから情報を取得し、その情報をもとに質問に合わせた画面を生成します。
WebMCPを有効にする前
最初にサイトを開くと、WebMCPを利用できない環境では質問機能を使えません。
画面には「この環境ではWebMCPを利用できません」と表示されます。
この記事では、PC版のGoogle Chromeを使って進めます。
※環境によっては、PC版ChromeでないとWebMCPを利用できない場合があります。
2026年9月時点では、WebMCPはまだ試験提供中の機能です。Chrome 149からOrigin Trialが開始されており、自分のPCで試す場合はChromeのフラグからWebMCPを有効にできます。
それでは、実際に有効にしていきます。
WebMCPを有効にする
Chromeのアドレスバーに、次のURLを入力します。
chrome://flags/#enable-webmcp-testing
すると、WebMCPの設定が表示されます。
WebMCP for testing を Enabled に変更します。
その後、右下に表示される再起動ボタンをクリックしてChromeを再起動します。
Chrome公式ドキュメントでも、WebMCPのテスト機能を有効にしてChromeを再起動する手順が案内されています。
もう一度サイトを開く
Chromeを再起動したら、もう一度ポートフォリオを開きます。
WebMCPが利用できるようになり、質問を入力できるようになります。
まとめ
Chromeでは、フラグを1つ有効にするだけでWebMCP対応サイトを試すことができます。
今回は利用する側の設定を紹介しました。
WebMCPを使ったサイトの具体的な仕組みや構成について知りたい方は、こちらの記事もご覧ください。
https://zenn.dev/tk_1/articles/cd4c88ce8d88ab