AIにブラウザを使わせる　～MCP接続方法とブラウザ情報の受け渡し～

1. MCPとは？

Anthropicとの関係

MCP（Model Context Protocol） は、Anthropicが開発したAIモデルと外部システムを接続するためのプロトコル(とりきめ)です。Claude CodeやClaude Desktopなど、Anthropicの製品で積極的に活用されています。

MCPを使用することで、AIが単体では実現できない機能（ファイル操作、Web検索、データベースアクセスなど）を、外部ツールとの連携により実現できるようになります。

MCPの種類

MCPには大きく分けて以下の種類があります：

ファイルシステム型: ローカルファイルの読み書きや検索
Web型: ブラウザ操作やWeb検索
データベース型: SQLiteやPostgreSQLなどとの連携
API型: 外部サービスのAPI呼び出し
システム型: コマンド実行やシステム情報取得

2. MCPの仕組み

前の章ではMCPにいくつかの種類があることを紹介しましたが、ここではもう少し技術的に踏み込んで、MCPがどのような仕組みで動作するのかを解説します。

プロトコルとしてのMCP

まず重要な点として、MCPは「Model Context Protocol」の略であり、その名の通り プロトコル（通信上の取り決め） です。特定のプログラムやツールそのものを指す言葉ではありません。

AIツール（今回でいえばClaude Desktop）と、外部機能を提供するプログラム（MCPサーバー）が連携する際に、「このような形式でリクエストを送り、このような形式でレスポンスを返しましょう」というルールを定めたものがMCPです。

具体的にどのような文字列がMCPの内部で使われるのかはこちらのサイトから確認できます。典型的な命令としては、以下のような内容をやり取りしています。

{
  jsonrpc: "2.0";
  id: string | number;
  method: string;
  params?: {
    [key: string]: unknown;
  };
}

ただし、基本的にはクライアントもサーバも実装にはSDKを使うため、この文字列を直接扱うことは少ないかと思います。

SDKはGitHub上で公開されており、PythonやC#をはじめ、様々な方式で自作のMCPサーバを開発できます。ただし、言語によって開発状況はまちまちで、C#では標準出力経由でやりとりするか、Httpサーバ経由でやり取りするしか選択肢はありません。

MCPサーバの立ち位置も、基本的にはAIツールと操作対象のツールの間に小型のMCPサーバを立て、標準出力にJson-RPCのみ出力して動作するのが一般的な実装方法の様です。

自前のHTTPサーバを起動してSDKに流し込むことも不可能ではありませんが、現状簡単なわけではないため、使える場合にはSDKを使うのがおすすめです。

AIツールとMCPサーバーの連携

実際の処理は、ユーザーと対話するAIツールと、ブラウザ操作やファイル操作といった具体的な処理を実行するMCPサーバーの間で情報をやり取りすることで進行します。

MCP workflow

※画像は本家のWebサイトのものです。

処理の流れは以下のようになります。

ユーザーがAIツールにプロンプト（指示）を入力。
AIツールは指示の内容を解釈し、外部ツールの助けが必要だと判断。
AIツールは、MCPのルールに従ってMCPサーバーに処理をリクエスト。
MCPサーバーは、リクエストに応じてブラウザの起動やWeb検索などの処理を実行。
処理結果をMCPサーバーが受け取り、AIツールが解釈しやすい形式に整えて返却。
AIツールは、MCPサーバーから受け取った情報を元に、最終的な回答を生成してユーザーに提示。

このように、AIツールが司令塔となり、MCPサーバーが手足となって動くことで、AI単体では不可能な処理を実現しています。

MCP呼び出しの例

ここでは、後述する Playwright MCPというMCPサーバーを例として、Claude DesktopがMCPにどのようなメッセージを送っているのかを確認してみましょう。

AIツールからMCPサーバーへのリクエスト

AIがユーザーの指示を解釈し、特定の指示をJSON形式で依頼していることがわかります。

{
  `ref`: `e39`,
  `text`: `渋谷 30人 団体 飲み放題 5000円 歓迎会 居酒屋`,
  `element`: `検索ボックス`
}

MCPサーバーからAIツールへのレスポンス

MCPサーバーはブラウザで検索を実行し、結果を返します。AIは元のリクエストに対する結果だと認識し、この内容を元に、ユーザへの返答を出力します。

### Ran Playwright code
js
// Fill "渋谷 30人 団体 飲み放題 5000円 歓迎会 居酒屋" into "検索ボックス"
await page.getByRole('combobox', { name: '検索' }).fill('渋谷 30人 団体 飲み放題 5000円 歓迎会 居酒屋');


### Page state
- Page URL: https://www.google.com/
- Page Title: Google
- Page Snapshot:
yaml
- generic [ref=e2]:
  - navigation [ref=e3]:
    - link "Googleについて" [ref=e4] [cursor=pointer]:
      - /url: https://about.google/?fg=1&utm_source=google-JP&utm_medium=referral&utm_campaign=hp-header
    - link "ストア" [ref=e5] [cursor=pointer]:
      - /url: https://store.google.com/JP?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=ja-JP
    - generic [ref=e7]:
      - generic [ref=e8]:
        - link "Gmail" [ref=e10] [cursor=pointer]:
          - /url: https://mail.google.com/mail/&ogbl
        - link "画像を検索する" [ref=e12] [cursor=pointer]:
          - /url: https://www.google.com/imghp?hl=ja&ogbl
          - text: 画像
      - button "Google アプリ" [ref=e15] [cursor=pointer]:
        - img [ref=e16] [cursor=pointer]
      - link "ログイン" [ref=e20] [cursor=pointer]:
        - /url: https://accounts.google.com/ServiceLogin?hl=ja&passive=true&continue=https://www.google.com/&ec=futura_exp_og_so_72776762_e
        - generic [ref=e21] [cursor=pointer]: ログイン
  - img [ref=e24]
  - search [ref=e27]:
    - generic [ref=e29]:
      - generic [ref=e31]:
        - img [ref=e35]
        - combobox "検索" [expanded] [active] [ref=e39]:
          - text: 渋谷 30人 団体 飲み放題 5000円 歓迎会 居酒屋
          - listbox [ref=e83]:
            - option "渋谷 30人 団体 飲み放題 5000円 歓迎会 居酒屋 渋谷" [ref=e87]:
              - generic [ref=e88]: 居酒屋 渋谷
        - generic [ref=e40]:
          - button "消去" [ref=e91] [cursor=pointer]:
            - img [ref=e93] [cursor=pointer]
          - button "音声で検索" [ref=e42] [cursor=pointer]:
            - img [ref=e43] [cursor=pointer]
          - button "画像で検索" [ref=e45] [cursor=pointer]:
            - img [ref=e46] [cursor=pointer]
      - generic [ref=e50]:
        - button "Google 検索" [ref=e51] [cursor=pointer]
        - button "I'm Feeling Lucky" [ref=e52] [cursor=pointer]
  - contentinfo [ref=e63]:
    - generic [ref=e64]: 日本
    - generic [ref=e65]:
      - generic [ref=e66]:
        - link "広告" [ref=e67] [cursor=pointer]:
          - /url: https://www.google.com/intl/ja_jp/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1
        - link "ビジネス" [ref=e68] [cursor=pointer]:
          - /url: https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1
        - link "検索の仕組み" [ref=e69] [cursor=pointer]:
          - /url: https://google.com/search/howsearchworks/?fg=1
      - generic [ref=e70]:
        - link "プライバシー" [ref=e71] [cursor=pointer]:
          - /url: https://policies.google.com/privacy?hl=ja&fg=1
        - link "規約" [ref=e72] [cursor=pointer]:
          - /url: https://policies.google.com/terms?hl=ja&fg=1
        - button "設定" [ref=e76] [cursor=pointer]:
          - generic [ref=e77] [cursor=pointer]: 設定

(表示の都合上一部特殊文字を削除しています)

このように、MCPはAIと外部機能を繋ぐための標準化された「通訳者」のような役割を担っています。

3. 今回導入するMCP

今回は、Claude DesktopにWeb検索機能を追加する ブラウザ操作型MCP のPlaywright MCPを導入します。

このMCPを追加することで以下のようなことができるようになります：

Web検索機能: Googleなどの検索の実行
ページ内容の取得: 指定したWebページの内容を読み取り
検索結果の解析: 検索結果から関連情報を抽出

これにより、Claude Desktopが最新の情報を検索し、リアルタイムで情報を収集できるようになります。

4. 導入方法

前提条件

Windows 11
Claude Desktopが動作していること
Node.jsとnpmがインストールされていること

手順1: MCPサーバーのインストール

Claude Desktopの設定ファイルに以下の内容を書き込みます。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

手順2: Claude Desktopの再起動

設定を反映するため、Claude Desktopを再起動します：

Claude Desktopのタスクバーボタンを右クリックして、「Quit」を押しましょう。ウインドウの×ボタンでは閉じられないのでご注意ください。

quit

これでインストールは完了です！ MCPサーバはちゃんと作られていると、これだけで使い始められてしまうんですね！

手順3: 確認

最後にインストールできたかの確認です。再起動した後にClaude Desktopのチャット欄下部のボタンをクリックして、Playwright が表示されていたら成功です！

playwright

5. 使用例：会社近くにある飲み屋の場所を調べてみよう

軽い過去語り

１世代下の新入社員の歓迎会

皆さんの会社でも、新入社員が入社したり、正式に採用が決まったときに歓迎会が開催されることがあると思います。

飲み会が少ない文化でも、新入社員が入ってきたときだけは飲み会を開催するという会社さんも多いのではないでしょうか。

自分も店を知らないけど幹事

この時は私と数人の若手が幹事を任されることになりました。大体、若手の幹事は新人の歓迎会が最後の幹事の仕事になったりしますよね。

しかし、普段はあまり飲み歩かないため、会社周辺の飲み屋事情には詳しくありません。さてどうしましょうか。

30人入れて、飲み放題付き、MAX5,000円程度

しかも条件が結構厳しいんです：

30人収容可能
席がばらけすぎない
飲み放題付き
予算はMAX5,000円程度
できれば個室

って、地味に調べるの大変なんですよね

この条件で店を探すのは意外と大変です。以前は自分でグルメサイトを何個も見比べたり、電話で空席確認したり、店に直接聞きに行ったり…

そんな面倒な作業を、今回はClaude Desktopに任せてみることにしました。

実際に動かしてみる

Claude Desktopに以下のプロンプトを入力してみました：

ブラウザを使って、東京都渋谷駅周辺で、以下の条件に合う飲み屋を3件探してください： 
- 30人程度の団体客が入れる 
- 飲み放題コースがある 
- 予算は一人5,000円以内
- 新入社員歓迎会に適している雰囲気
検索結果から、店名、住所、電話番号、料金、収容人数、特徴をまとめて教えてください。

処理が開始されるとGoogle検索からブラウザが開始し、検索を進めていきます。

google

Claude Desktopが自動的にWeb検索を開始し、以下の手順で情報を収集してくれました：

Google検索の実行: 「渋谷 30人団体飲み放題 5000円歓迎会居酒屋」で検索
検索結果の解析: 上位サイトの情報を自動取得
詳細情報の収集: 各店舗の公式サイトや予約サイトから詳細情報を取得
結果の整理: 条件に合う店舗を表形式で整理

6. 結果

ホットペッパーグルメなどを使って検索し、有効そうな店を見つけてきてくれました。

最終的にまとめられた結果を表にしてみます。ちゃんと人数や個室、駅の条件を正しく認識して調べてくれていますね。

店舗名	場所	料金	収容人数	アクセス	特徴	おすすめ度
トリ一番渋谷店	東京都渋谷区道玄坂2-29-13 若槻ビル201	2,480円〜3,190円（税込）	最大100名（半個室20名〜、貸切40名〜）	渋谷駅徒歩3分	3時間飲み放題付き食べ放題コース・完全個室で30人団体に対応可能・炭火焼き鳥、しゃぶしゃぶ、もつ鍋・新入社員歓迎会に最適な雰囲気	⭐⭐⭐⭐⭐（最もコスパ良好）
鳥ごころ渋谷本店	渋谷センター街（詳細住所は要確認）	2,480円〜2,700円（税込）	2〜80名まで個室対応	渋谷駅徒歩3分	夜景が楽しめる完全個室・3時間飲み放題付き・炭火焼き鳥・もつ鍋食べ放題・全席個室で団体利用に最適	⭐⭐⭐⭐
いいとこ鷄渋谷店	渋谷センター街（詳細住所は要確認）	3,000円〜3,300円（税込）	2〜80名まで完全個室対応	JR渋谷駅徒歩3分	国産いわい鷄使用の地鶏料理専門・3時間食べ飲み放題コース・幹事様1名無料特典あり・TV取材実績多数の人気店	⭐⭐⭐⭐

実際に使う場合はこれに加えて電話口での対応やコースのボリューム、導線、予算感や名物など考慮して決めることになるかと思います。

さらに、Claude Desktopは分析の結果から一番おすすめの店舗や役立ちそうな追加情報も出力してくれました。

予約の取りやすさ: 各店舗の予約状況
口コミ情報: 実際の利用者の評価
注意事項: 団体利用時の注意点

7. まとめ

MCP紹介

MCPは、Claude CodeやClaude Desktopに外部機能を追加するためのプロトコルです。今回紹介したブラウザ操作型MCP以外にも、様々な種類のMCPが存在し、AIの活用範囲を大幅に広げることができます。

導入方法が簡単

Windows環境（WSL2）でのMCP導入は設定ファイルの編集が必要でしたが、手順通りに進めることで問題なく動作しました。

イイ感じに検索できた

実際に使用してみた結果、以下のような効果を実感できました：

良かった点：

サイトを自動で検索してくれる
情報を整理して表形式で提示してくれる
検索条件を適切に解釈してくれる
手作業では見つけにくい店舗も発見できた

かゆいところに手が届かなかった点：

リアルタイムの空席情報は取得できない
最新の料金情報が古い場合がある
電話番号や住所など一部の情報がマスクされたり間違ったりすることがある

まだ最終候補の中から確認する作業は必要ですが、 情報収集の時間を大幅に短縮でき、幹事業務が非常に楽になりそうです！

弊社ではAIを活用した開発環境の構築や業務効率化にも取り組んでおります。
AIツールの導入やMCP開発に関するご相談も承っておりますので、ぜひお気軽にお問い合わせください。

お問い合わせ：https://kashika.co.jp/contact.html

目次