前回、Claude CodeのCLI版をインストールして、ターミナルからも使えるようになりました。 ターミナルからClaude Codeを使えるようにしておくと、MCPという仕組みを使って「外部アプリとの連携」が可能になります。
今回はMCPの概念を理解したうえで、Chrome連携を実際に体験してみましょう。
MCPとは
MCPとは何か？ 規格としての意味
MCPとは「Model Context Protocol（モデル・コンテキスト・プロトコル）」の略で、AIと外部のアプリやサービスをつなぐための共通規格です。
「プロトコル」とは、複数のシステムが通信するための決まりごとのこと。
たとえばインターネットには「https」というプロトコルがあり、メーカーや機種を問わず世界中のコンピューターが同じルールで情報を送り合えるようになっています。
MCPもこれと同じ発想です。
外部ツール側が「こういう操作ができます」とMCPのルールに沿って情報を公開し、Claude CodeなどのAIはそのルールに従って接続・操作します。MCPは双方が同じ言語で話せるようにするための規格です。
MCPはAnthropicだけの独自仕様ではなく、OpenAI・Google・Microsoftなど主要なAI企業も採用する業界共通の標準規格です。一度仕組みを理解しておくと、Claude Code以外のAIツールにも広く応用できる知識になります。
MCPのイメージ・できること
MPCの定義を簡単に説明しましたが、これだけではピンとこないですよね。
パソコンをイメージしてみてください。
パソコン単体でも文章を書いたり、計算したりできますが、プリンターをつなげば印刷ができ、Webカメラをつなげばビデオ通話ができるようになりますよね。MCPは、この機器をつなぐためのUSBケーブルのような役割を果たす、と考えるとイメージしやすいと思います。
Claude CodeもMCP経由でさまざまな外部ツールを接続することで、できることが広がります。たとえばこんなことが可能になります。
- Chromeと接続
→ ブラウザの画面を見ながらデバッグ - Google ドライブと接続
→ ドキュメントやスプレッドシートの内容を参照しながら作業 - Slackと接続
→ 作業の進捗や完了をチャンネルに自動で通知 - Obsidianと接続
→ ノートの内容を参照しながら作業 - Notionと接続
→ 仕様書やメモを読み取りながらコードを生成 - Figmaと接続
→ デザインデータを読み取ってコードに変換
MCPの接続方法は2種類ある
パソコンを外部機器とつなぐときは、USBケーブルを差し込む、ドライバをインストールする、など手順が必要ですよね。 MCPを使用する場合も同様に、Claude Codeと外部ツールの用意が必要です。
- Claude Code側：MCPサーバーを登録するコマンドを実行
- 外部ツール側：拡張機能のインストールやMCP許可設定
こうしたMCPの接続・設定方法は、使うサービスによって異なります。
ClaudeCode側で必要な操作な、大きく以下２パターンです。
1. Anthropic公式の組み込み機能（コマンド不要）
Anthropicが公式に対応しているサービスでは、専用の拡張機能をインストールするだけで使えるものがあります。
代表例がChrome連携です。
「Claude in Chrome」拡張機能を入れてログインするだけで、MCPサーバー登録なしに接続できます。
2. サードパーティのMCPサーバー（コマンドで登録）
Notion・Slack・Figmaなど、外部サービスのMCPを追加するときは、CLIのコマンドでMCPサーバーを登録する必要があります。
claude mcp add サービス名等
サービス名部分は連動したいアプリ・サービスによって変わります。
接続済みMCPの確認
チャット画面で以下を入力すると、現在接続されているMCPの一覧を確認できます。
/mcp
ChromeをClaudeCodeにつないでみよう
MCPの仕組みがイメージできたら、まずコマンド不要で試せるChrome連携から体験してみましょう。
以前のレッスンで、Chrome拡張機能のClaude（Claude in Chrome）を使ってデバッグする方法を紹介しました。今回は MCP で接続することで、ブラウザの表示確認からファイルの修正まで、Claude Code が一貫して行えるようになります。
Claude用拡張機能をChromeに追加
まず Chrome 側の準備を確認します。
拡張機能がClaude（Claude in Chrome）インストールされ、Claudeの有料プラン（Pro以上）のアカウントでログインされているかを確認してください。
拡張機能のインストール・ログイン方法はClaudとGoogle Chromeを連携して「原因がわからない」「修正できない」を無くそうで紹介しています。まだインスト―スされていない方は、こちらの記事を参考に拡張機能インストールとClaudeアカウントでのログインを行ってください。
CLIを起動して、Chromeに接続する
Chrome 拡張機能の準備ができたら、VSCode のターミナルから接続を行います。
前回のレッスンでインストールした CLI 版 Claude Code を使います。
1. ClaudeCode CLIを起動する
VSCode の上部メニューから、もしくはショートカットキーでターミナルを開いてください。
ターミナルに以下を入力して Claude Code を起動します。
claude
補足
claude --chromeでChrome接続付きとClaude起動を同時にできるという記述もありますが、Claude in Chrome自体がβ版のせいか、本記事執筆時はこちらのコマンドでは上手くいきませんでした。
claude --chromeコマンドを試してみても上手く動かない方は、claudeで起動して、以下のようにチャットでブラウザ起動を頼むと良いです。
2. ブラウザの起動をお願いする
起動したら、プロンプトの入力欄に「ブラウザの表示を確認しながら、デバックのサポートをしてほしい」という旨をそのまま打ち込みます。
お願いしたいことのみ入力しもClaudeが自動的にブラウザ接続を試みてくれる場合もありますが、以下のように指定すると確実です。
GoogleChromeでブラウザの表示を見ながら、デバックのサポートをしてほしいです。
MCPタブグループを作成して、http://edbase.local/company/ を参照してくれますか？
※参照してほしいURLは、ご自身のローカルWordPressや、live serverのものに置き換えてください。
GoogleChromeでClaude（MCP）というタブが開かれた、新しいウィンドウが起動します。
同時に、指定したサイトでClaudeが操作を行って良いか、確認のウィンドウが表示されます。
ローカル環境のWordPress（Local等のアドレス）であれば、「常にアクションを許可する」を選択しても問題ありません。
アクションが許可されると、プロンプトで指定したページが開きます。
今回のデモの場合だとhttp://edbase.local/company/ です。
少し待つと、ClaudeCodeCLI（ターミナル側）に概要を把握したというような旨が表示されます。
これで、VSCode側から、ページの確認・修正の依頼ができるようになりました。
実際にファイルの修正・変更を行う
ターミナル側でページの確認が出来たという表示が出たら、そのままチャットで進めていけばOKです。
今回は大きなエラーが無いので、スマホ幅でのナビゲーション修正を依頼してみます。
入力欄に以下の内容を入力して、Enterキーで送信しました。
スマホ幅でのヘッダーメニューを開いた際に、通常コンテンツとの境界がわかりにくいと考えています。
メニュー展開時には通常コンテンツに黒い半透明のオーバーレイを追加するなど、メニューとコンテンツの境界をユーザーの視覚的にわかりやすく表現できますか？
VScode拡張機能のチャットとは少し見た目が違いますが、ファイルを変更しても良いか確認が出ます。
変更箇所を確認してYesを選ぶと、ファイルを修正してくれます。
Chromeと連携したことで、実際にChromeを操作して動作確認までしてくれるようになります。
ただ、見た目のチェックに関しては…人間、Webデザイナー/コーダーのOKラインとは差があります。デモで試した場合は、以下のようにメニュー部分だけが浮き上がった表示にされてしまいました。
こういう場合は、追加で指示を送って調整してもらいましょう。
もちろん「原因は分かる。Claude（AI）にどう指示するか考える方が面倒」という場合は、自分で直しても良いです。
開く・閉じるのボタンなどもオーバレイの後ろに入ってしまっていてわかりにくいです。
ヘッダー部分全体をオーバーレイよりも前面に表示させ、展開したメニューと一体化して見えるようにしてください。
スクリーンショットを取って、見え方を確認しながら進めてください。
↓
Chrome拡張機能Claude単体との違い
以前ご紹介したChrome拡張機能Claudeのみの場合は「Chromeのサイドパネルでチャットして修正箇所発見、コードは自分でを直す」という流れでした。
今回行ったClaudeCodeからの起動（MCP 経由）では、原因の特定から修正の実行まで Claude Code が一貫して担ってくれます。「どこを直せばいいか教えてもらう」から、一段階パワーアップした使い方と言えます。
| Chrome拡張機能のみ | ClaudeCode経由 | |
|---|---|---|
| 問題の特定 | ◎ | ◎ |
| ファイルの修正 | △ 自分で手動修正が必要 | ◎ Claude Codeが自動で修正 |
| 操作する画面 | Chromeのサイドパネル | VSCodeのチャット |
補足：/mcpコマンドについて
冒頭で「現在接続されているMCPの一覧は/mcpコマンドで確認できる」とご紹介しました。
しかし、Chrome連携時に、VSCode拡張機能のチャット画面から /mcp を確認すると、接続されているMCPが表示されず「No MCP servers configured.」となります。
これはバグではなく、Chrome連携がCLI専用の仕組みを使っているためです。
今回のChrome連携は、CLIがChromeと直接やりとりする専用ルートを通っています。VSCode拡張機能のチャットはこのルートを参照できないので、「接続なし」と見えてしまいます。
| Chrome連携（Claude in Chrome） | 通常のMCPサーバー（Notion・Slackなど） | |
|---|---|---|
| CLIから使える | 〇 | 〇 |
| VSCode拡張機能のチャットから使える | × | 〇 |
| `/mcp`で表示される | × | × |
少しイレギュラーですが、今のところChrome連携はCLI（ターミナル）から使うものと割り切っておいてください（拡張機能の更新等により、変わる場合もあります）。
次回紹介する多機能アプリNotionを使って、MCPサーバーを登録して接続する方法をご紹介します。
こちらの場合はVSCode拡張機能のチャットからも確認・利用ができます。Slackなど主要アプリの大半もこちらの仕組みで設定しますので、ぜひMCPサーバー設定編もご確認ください。