MCPでClaudeに「外の道具」をつなぐ実践ガイド:コネクタ追加・Claude Code・Chrome操作・computer useまで(2026年9月版)

はじめに:その「コピペの往復」、MCPでなくせます

Claudeに仕事を頼むとき、こんな作業をしていないでしょうか。Notionの議事録をコピーして貼り付ける。GitHubのIssueを開いて内容を写す。Claudeの回答を、また手で元のツールへ戻す。Claudeがどれだけ賢くても、材料を運ぶのが人間のままだと、そこで時間が溶けていきます。

この往復をなくす仕組みが MCP(Model Context Protocol) です。MCPは、AIアプリと外部のデータ・ツールをつなぐための共通規格で、公式サイトでは「AIアプリにとってのUSB-Cポートのようなもの」とたとえられています。USB-Cなら機器ごとに専用ケーブルを用意しなくて済むのと同じで、MCPに対応したサービスなら、同じ手順でClaudeにつなげられます。

次の図で、つなぐ前と後のちがいを見てください。左は人が運び役になっている状態、右はClaudeが必要なときに自分で取りに行く状態です。

図1:依頼は1回。あとはClaudeが「許可した範囲で」取りに行きます。(静止画)

この記事では、次のことを順番に扱います。

• MCPのしくみを、登場人物3つで理解する
• 外部のMCPをClaudeに入れる3つの入口(claude.aiのコネクタ/Claude Desktopの拡張/Claude Codeのコマンド)
• Claude Codeでの導入を、実際に手を動かして確認する(自作の最小MCPサーバー付き)
• ブラウザを操作する Claude in Chrome、PCの画面を操作する computer use など、組み込みの道具
• つまずいたときの切り分け方

想定読者は、ClaudeやClaude Codeを使い始めたばかりの方です。ターミナル(文字でPCを操作する画面)でコマンドを1行ずつ打てれば、最後まで進められます。

この記事の確認範囲

内容は2026年9月21日に、Anthropicの公式ドキュメント(code.claude.com/docs、claude.com/docs、support.claude.com)とMCP公式サイト(modelcontextprotocol.io)を読み直して書いています。手順は、macOS上の Claude Code v2.1.272(Claude Maxプラン)で実際に動かしました。

記事内の画像は3種類あります。混同しないよう、キャプションに種類を書いています。

種類	内容
実画面	筆者のMacで撮ったスクリーンショット
端末の再描画	実際にターミナルへ出力された文字と色を、そのまま画像に描き直したもの(OSのスクリーンショットではありません)。個人のコネクタ名など一部の行は省いています
概念図	しくみを説明するための図。実測値ではありません

MCPのしくみ:登場人物は3つだけ

細かい仕様の前に、全体像を押さえます。登場人物は ホスト・MCPサーバー・外部サービス の3つです。

図2:Claudeは道具の「一覧」を受け取り、依頼に合うものを選んで呼び出します。(概念図/静止画)

• ホスト:Claude Code、Claude Desktop、claude.aiなど、Claudeが動いているアプリです。サーバー1つにつき「MCPクライアント」という接続係を1つ持ちます。
• MCPサーバー:外部サービスの「窓口」になるプログラムです。Claudeに対して「こんな道具(ツール)があります」と名前・説明・入力の型を伝え、呼ばれたら実際の操作を代行します。
• 外部サービス:ファイル、データベース、Notion、GitHub、ブラウザなど、Claudeに触らせたい相手です。

サーバーがClaudeに提供できるものは、実行できる機能の ツール、読み込めるデータの リソース、定型の依頼文である プロンプト の3種類です。この記事では、いちばんよく使うツールを中心に説明します。

通信のしかた(トランスポート)は、現在2つが標準です。

方式	どこで動くサーバー向けか	特徴
stdio(標準入出力)	自分のPCの中	Claudeがプログラムを起動して直接やり取りする。ネットワーク不要
Streamable HTTP(以下HTTP)	クラウド上	URLで接続する。ログイン(OAuth)と組み合わせやすい

以前よく使われていた SSE という方式は、MCPの仕様でもClaude Codeのドキュメントでも「非推奨」になっています。古い記事のコマンドに --transport sse とあっても、まずはHTTPで試してください。Claude Code v2.1.265以降は、--transport http で追加した先がSSEにしか対応していなければ、自動でSSEに切り替えてくれます。

なお、MCPは2025年12月にAnthropicからLinux Foundation傘下の「Agentic AI Foundation」へ寄贈され、特定の1社の持ち物ではなくなりました。仕様も更新が続いていて、最新版は2026年7月28日付です。

外部MCPをClaudeに入れる「3つの入口」

ここが本題です。「MCPサーバーを入れる」と言っても、どのClaudeで使いたいかによって入口が変わります。そして入口によって、どこから接続するかも変わります。ここを取り違えると「手元では動くのに、claude.aiではつながらない」という事態になります。

図3:迷ったら、使いたい場所で選びます。(公式ヘルプ・ドキュメントに基づく整理/静止画)

	A. コネクタ	B. デスクトップ拡張	C. claude mcp add
使える場所	claude.ai、Claude Desktop、モバイル、Claude Code	Claude Desktop	Claude Code
つなぐ相手	クラウド上のサーバー(HTTP)	自分のPCで動くサーバー(stdio)	どちらも可
接続元	Anthropicのクラウド	自分のPC	自分のPC
入れ方	画面でURLを入力	画面で「Install」	コマンド1行
向いている用途	スマホやブラウザでも使いたい	PC内のファイルやアプリを触らせたい	開発作業で使いたい

入口A:claude.ai/Claude Desktopに「カスタムコネクタ」を追加する

claude.aiでは、MCPサーバーとの接続を コネクタ と呼びます。GmailやNotionのように一覧から選べるもののほかに、URLを自分で入力して追加する カスタムコネクタ があり、これが「外部のMCPを入れる」入口です。公式ヘルプによると、Free・Pro・Max・Team・Enterpriseのすべてのプランで使えます(Freeは1個まで)。

手順は次のとおりです。

1. claude.aiの左サイドバーで 「カスタマイズ」 を開き、「コネクタ」 タブを選びます(URLは https://claude.ai/customize/connectors)。
2. 右上の追加ボタンから 「カスタムコネクタを追加」 を開きます。
3. 名前 と MCPサーバーURL(https:// で始まるもの)を入力し、「続ける」を押します。
4. 次の画面で認証のしかたを選び、追加します(公式ドキュメントの英語表記では Sign in now / Sign in when needed / No sign-in の3択)。
5. 一覧に出たコネクタで「接続」を押し、サービス側の画面でログインと許可を行います。

下は、手順3の実際の画面です。例として、認証なしで使えるClaude Codeの公式ドキュメント検索サーバーのURLを入れています(撮影用に入力しただけで、追加はしていません)。

実画面:claude.aiのカスタムコネクタ追加ダイアログ(2026年9月21日、日本語表示)。新しい2ステップ版は順次展開中とされており、1画面に「Advanced settings」が出る旧版が表示される場合もあります。

ここがいちばんの注意点です。 コネクタの通信は、あなたのPCからではなく Anthropicのクラウドから 出ていきます。Claude Desktopやスマホアプリから使う場合も同じです。そのため、次のサーバーはコネクタとしては追加できません。

• localhost など、自分のPCの中だけで動いているサーバー
• 社内ネットワークやVPNの内側にあるサーバー

公式のトラブルシューティングにも「Claude Codeやcurlでは動くのにclaude.aiでは動かない」原因として、この点が挙げられています。手元のサーバーを試したいときは、Cloudflare Tunnelやngrokのようなトンネルで一時的に公開する方法が案内されています(試し終わったら必ず閉じます)。

追加したあとの使い方も押さえておきましょう。

• 会話ごとのオン/オフ:チャット入力欄の左下にある「+」(または / を入力)→「コネクタ」で切り替えます。
• 道具ごとの権限:カスタマイズ > コネクタで対象を選ぶと、ツールごとに「常に許可(Always allow)/承認が必要(Needs approval)/ブロック(Blocked)」を決められます。書き込みや削除ができる道具は、「承認が必要」のままにしておくのが安全です。
• 一覧から選ぶ場合:コネクタの一覧(ディレクトリ)には、Anthropicが動作を確認した「Verified」、掲載前の確認にとどまる「Community」、自分で追加した「Custom」の3つのラベルがあります。公式ドキュメントは、Verifiedであっても「セキュリティ監査ではない」と明記しています。

入口B:Claude Desktopに「デスクトップ拡張(.mcpb)」を入れる

PCの中のファイルやアプリをClaudeに触らせたいときは、自分のPCの中で動くサーバー が必要です。Claude Desktopでは、これをワンクリックで入れられる デスクトップ拡張 が用意されています。ファイルの拡張子は .mcpb(MCP Bundle)で、2025年9月に旧称の .dxt から名前が変わりました。

入れ方は公式ヘルプで次のように案内されています。

1. Claude Desktopで Settings > Extensions を開きます。
2. Browse extensions から使いたいものを選び、Install を押します。
3. APIキーなどの設定が必要なものは、案内に従って入力します。

配布された .mcpb ファイルをダブルクリックする、あるいはClaude Desktopのウィンドウへドラッグしても導入できます。Claude DesktopにはNode.jsが同梱されているため、利用者が別途インストールする必要はありません。なお、デスクトップ拡張はWeb版やモバイルでは使えません。

設定ファイルを直接書く従来の方法(Developerタブの Edit Config から claude_desktop_config.json を編集)も、MCP公式サイトには引き続き載っています。ただ、これから始める方は拡張のほうが手軽です。

入口C:Claude Codeに claude mcp add で入れる

開発作業で使うなら、Claude Codeのコマンドがいちばん自由度が高い入口です。リモート(HTTP)もローカル(stdio)も同じコマンドで登録でき、接続元は自分のPCなので、localhost や社内のサーバーにも届きます。

さらに、Claude Codeにclaude.aiのアカウントでログインしていれば、入口Aで追加したコネクタがClaude Codeにも自動で出てきます。この記事の検証環境でも、あとで見る /mcp の画面に claude.ai Gmail などが並びました。APIキーでログインしている場合は読み込まれないので、その点だけ注意してください。

次の章で、この入口Cを実際に動かします。

実践:Claude CodeにMCPサーバーを3種類入れてみる

ここからはハンズオンです。性格のちがう3つのサーバーを入れて、表示される 3つの状態 を見比べます。

図4:止まったら、右側の「状態の読み方」に戻ります。(静止画)

入れるもの	種類	学べること
claude-docs	リモート・認証なし	いちばん簡単な追加
notion	リモート・ログインあり	認証(OAuth)の流れ
hello-mcp	ローカル・自作	チーム共有(.mcp.json)と承認

準備:作業用フォルダを作る

まずClaude Codeのバージョンを確認し、練習用のフォルダを作って移動します。Node.js(v18以上)も使うので、入っていない方は先にインストールしてください。

# バージョンを確認する(この記事は 2.1.272 で検証)
claude --version
node --version

# 練習用フォルダを作って移動する
mkdir -p ~/mcp-lab && cd ~/mcp-lab

以降のコマンドは、すべてこの ~/mcp-lab の中で実行します。あとで説明しますが、MCPの設定は どのフォルダで実行したか に結びつくので、場所を固定しておくのが大事です。

1つ目:認証なしのリモートサーバーを1行で追加する

最初は、Claude Codeの公式ドキュメントを検索できるサーバーです。公式のクイックスタートでも例に使われていて、ログインもインストールも要りません。

# 形式: claude mcp add --transport http <好きな名前> <URL>
claude mcp add --transport http claude-docs https://code.claude.com/docs/mcp

Added HTTP MCP server ... と表示されれば登録完了です。ただし公式ドキュメントにもあるとおり、この表示は「設定を書き込んだ」という意味で、つながったことの確認ではありません。接続の確認は、あとで claude mcp list で行います。

2つ目:ログインが必要なサーバーを追加する

続いて、ログインが必要なサーバーの例としてNotionを追加します。コマンドの形は同じです。

claude mcp add --transport http notion https://mcp.notion.com/mcp

こちらは、追加しただけでは使えません。サービス側で「このClaudeに操作を許可する」という手続き(OAuth)が必要だからです。流れは次の図のとおりです。

図5:パスワードを入力するのはサービス側の画面です。Claudeには渡りません。(静止画)

認証は、Claude Codeを起動して /mcp と入力し、対象のサーバーを選んで Authenticate を実行します。ターミナルだけで済ませたいときは claude mcp login notion でも同じことができます(v2.1.186以降)。

端末の再描画:/mcp でnotionを選んだところ。この記事では認証は実行していません(ここから先はブラウザでの操作になります)。

3つ目:自作の最小MCPサーバーを、チーム共有の設定で追加する

最後は、しくみを理解するために 自分でMCPサーバーを作ります。といっても40行ほどです。題材は「文字数を正確に数える道具」にしました。AIは文字数を数えるのが苦手なので、「AIだけでは不確かなことを道具で補う」というMCPの役割が分かりやすい例です。

~/mcp-lab/hello-mcp/server.mjs というファイルを作り、次の内容を保存してください。追加のパッケージは不要です。

#!/usr/bin/env node
// hello-mcp: 依存パッケージなしで動く、学習用の最小MCPサーバー(stdio)。
// 1行 = 1つのJSON-RPCメッセージ。ログは必ず stderr へ(stdout はプロトコル専用)。
import { createInterface } from "node:readline";

const TOOLS = [{
  name: "count_chars",
  description: "文章の文字数を正確に数える(空白・改行を除いた数も返す)",
  inputSchema: {
    type: "object",
    properties: { text: { type: "string", description: "数えたい文章" } },
    required: ["text"],
  },
}];

const send = (msg) => process.stdout.write(JSON.stringify(msg) + "\n");
const reply = (id, result) => send({ jsonrpc: "2.0", id, result });

function handle({ id, method, params }) {
  if (method === "initialize") {
    return reply(id, {
      protocolVersion: params.protocolVersion,
      capabilities: { tools: {} },
      serverInfo: { name: "hello-mcp", version: "0.1.0" },
    });
  }
  if (method === "ping") return reply(id, {});
  if (method === "tools/list") return reply(id, { tools: TOOLS });
  if (method === "tools/call" && params.name === "count_chars") {
    const chars = [...params.arguments.text];
    const noSpace = chars.filter((c) => !/\s/.test(c));
    const text = `文字数: ${chars.length} / 空白・改行を除く: ${noSpace.length}`;
    return reply(id, { content: [{ type: "text", text }] });
  }
  if (id !== undefined) {
    send({ jsonrpc: "2.0", id, error: { code: -32601, message: `Unknown method: ${method}` } });
  }
}

createInterface({ input: process.stdin }).on("line", (line) => {
  if (line.trim()) handle(JSON.parse(line));
});
console.error("hello-mcp: ready");

やっていることは図2のとおりです。tools/list で「こういう道具があります」と答え、tools/call で実際に数えて返します。Claude Codeにつなぐ前に、単体で動くか確かめておきましょう。

# 道具の一覧を聞き、count_chars を1回呼んでみる
printf '%s\n' \
  '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-06-18","capabilities":{},"clientInfo":{"name":"probe","version":"0.0.1"}}}' \
  '{"jsonrpc":"2.0","id":2,"method":"tools/list"}' \
  '{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"count_chars","arguments":{"text":"MCPは AIの USB-C ポート"}}}' \
  | node hello-mcp/server.mjs

筆者の環境では、最後の行に 文字数: 18 / 空白・改行を除く: 15 が返りました。

補足:このサンプルは、接続の最初に initialize というあいさつを交わす方式で書いています。Claude Code v2.1.272ではこのまま動作しましたが、MCPの最新仕様(2026-07-28版)ではこの部分の設計が見直されています。実用のサーバーを作るときは、仕様の変化を吸収してくれる公式SDKを使ってください。Claude Codeには、サーバー作成を手伝う公式プラグイン(/plugin install mcp-server-dev@claude-plugins-official)もあります。

では登録します。今度は --scope project を付けて、チームで共有する設定 として追加します。ローカルのサーバーは、-- のあとに起動コマンドを書きます。

# 「--」より前が Claude Code への指定、後ろがサーバーの起動コマンド
claude mcp add --scope project hello-mcp -- node hello-mcp/server.mjs

すると、フォルダの直下に .mcp.json というファイルができます。このファイルをGitで共有すれば、チーム全員が同じサーバーを使えるようになります。

端末の再描画:3つのサーバーを登録したところ。保存先が ~/.claude.json と .mcp.json に分かれている点に注目してください。

状態を確認する:3つの表示を見分ける

ここで一覧を見ます。

claude mcp list

端末の再描画:3つの状態が同時に出ました。上の claude.ai ... の行は、claude.ai側で接続済みのコネクタです(一部の行は省略)。

狙いどおり、3つの状態がそろいました。

表示	意味	次にやること
✔ Connected	使える	そのまま使う
! Needs authentication	ログインが必要	/mcp → Authenticate
⏸ Pending approval	.mcp.json のサーバーが未承認	claude を起動して承認

おもしろいのは、claude.ai Notion は接続済みなのに、いま追加した notion は要認証になっている点です。同じNotionでも、claude.ai経由のコネクタと自分で追加したサーバーは 別の接続 として扱われ、ログインも別々に管理されます。すでにclaude.aiでNotionをつないでいる方は、わざわざ追加し直す必要はありません。

承認する:.mcp.json のサーバーは、必ず人が確認する

hello-mcp が「承認待ち」になったのには理由があります。.mcp.json はGitで配られるファイルです。もし承認なしで動くなら、リポジトリをクローンしただけで、知らないプログラムが自分のPCで起動することになってしまいます。そこでClaude Codeは、プロジェクト共有のサーバーを使う前に必ず確認を挟みます。

claude を起動すると、初めてのフォルダではまず「このフォルダを信頼しますか」という確認が出て、続いて次の画面が出ます。

端末の再描画:.mcp.json のサーバーを見つけたときの確認。初期位置はいちばん下の「使わずに続ける」で、安全側に倒してあります。

Use this MCP server を選べば承認完了です。真ん中の「今後追加されるものも全部使う」は、内容を見ずに承認することになるので、チーム開発では選ばないほうが無難です。承認をやり直したいときは claude mcp reset-project-choices を実行します。

なお、claude -p のような対話なしの実行では、この確認は出ずにサーバーが読み込まれると公式ドキュメントに書かれています。自動実行の環境に他人のリポジトリを置くときは、この点を覚えておいてください。

/mcp で全体を見渡す

Claude Codeの入力欄で /mcp と打つと、つながっているサーバーを一覧できます。

端末の再描画:サーバーが「どこで定義されたか」ごとに分かれて並びます(claude.aiのコネクタは一部省略)。

区分は上から、プロジェクト共有(.mcp.json)、自分だけの設定、claude.aiのコネクタ、そして最初から入っている Built-in MCPs です。最後の2つ、claude-in-chrome と computer-use は、後半で取り上げます。

実際に使う:ふだんの言葉で頼むだけ

準備ができたので、使ってみます。特別な書き方は要りません。

hello-mcp の count_chars を使って、「MCPはAIと外部ツールをつなぐ共通規格です」の文字数を数えてください

初めて使う道具では、実行前に確認が入ります。どのサーバーの、どの道具に、どんな値を渡すのかが表示されます。

端末の再描画:渡す値(text)まで見えるので、意図しない情報を送ろうとしていないか確認できます。

Yes を選ぶと実行され、結果が返ります。

端末の再描画:自作サーバーの道具をClaudeが呼び出し、結果を文章にまとめました。

自分で数えても22文字。Claudeが推測で答えたのではなく、道具が数えた結果を使って答えた、というのがポイントです。外部サービスのサーバーでも、やっていることはこれと同じです。

設定の置き場所:3つのスコープと優先順位

さきほど --scope project を使いました。この スコープ は「その設定を誰と、どこまで共有するか」を決めるものです。

図6:同じサーバーが重なったら、より手前の設定が丸ごと使われます。(静止画)

スコープ	有効な範囲	保存先	向いている用途
local(既定)	このプロジェクト・自分だけ	~/.claude.json の中の、このプロジェクトの欄	個人用、APIキーを含む設定
project	このプロジェクト・全員	プロジェクト直下の .mcp.json	チーム共通の道具
user	自分の全プロジェクト	~/.claude.json の最上位の mcpServers	どこでも使う自分用の道具

初心者がつまずきやすい点が2つあります。

1つ目は、local の保存先はプロジェクトの中ではない ことです。名前から .claude/settings.local.json に入りそうに見えますが、実際はホームディレクトリの ~/.claude.json に、フォルダのパスごとに記録されます。だから、別のフォルダで claude を起動すると、local で追加したサーバーは出てきません。

2つ目は、スコープはあとから変更できない ことです。変えたいときは claude mcp remove <名前> で消してから、スコープを指定して追加し直します。

チームで .mcp.json を共有するときは、APIキーをファイルに直接書かないでください。${変数名} と書いておけば、各自のPCの環境変数から読み込まれます。

{
  "mcpServers": {
    "team-api": {
      "type": "http",
      "url": "${TEAM_API_URL:-https://api.example.com}/mcp",
      "headers": { "Authorization": "Bearer ${TEAM_API_KEY}" }
    }
  }
}

${変数名:-既定値} と書くと、変数が無いときの値も決められます。なお、ANTHROPIC_API_KEY のような特定の認証用変数は、リモートサーバーの url や headers の中では 空として扱われる 安全装置が入っています。クローンしたリポジトリの .mcp.json に、鍵を外へ送られないようにするためです。上の例のように、自分で名前を付けた変数を使ってください。

道具が増えても重くならない理由:ツール検索

「サーバーをたくさんつなぐと、Claudeの動きが悪くなるのでは」と心配になるかもしれません。道具の説明書き(定義)も、Claudeが一度に読める情報量、つまり コンテキスト を使うからです。

これを解決するのが ツール検索(Tool Search) で、Claude Codeでは最初から有効です。

図7:最初は名前だけ。必要になった道具の説明書きだけを、その場で読み込みます。(概念図。棒の割合はイメージ/静止画)

起動時に読み込むのは道具の名前とサーバーの説明だけで、詳しい定義は必要になったときに取りに行きます。さきほどのキャプチャで claude.ai Gmail · 30 tools のように多くの道具が並んでいても実用になるのは、このしくみのおかげです。

調整したい場面は次の2つくらいです。

• 毎回必ず使う少数のサーバー:設定に "alwaysLoad": true を足すと、最初から定義まで読み込まれ、探す手間が省けます。
• すべてを最初に読み込みたい:ENABLE_TOOL_SEARCH=false claude で起動します。

何がどれくらいコンテキストを使っているかは、Claude Codeの /context コマンドで確認できます。

組み込みの道具:Claude in Chromeとcomputer use

/mcp の画面のいちばん下に、Built-in MCPs という区分がありました。自分で追加しなくても、Claude Codeに最初から入っている道具です。ここでは、ブラウザを操作する Claude in Chrome と、PCの画面を操作する computer use を紹介します。どちらも、Anthropicと直接契約したプランが必要で、Amazon Bedrockなど他社クラウド経由では使えません。

先に、Claudeがこれらをどういう順番で使うかを見ておきます。

図8:専用の道具があればそれを使い、画面操作は最後の手段です。(公式ドキュメントに基づく/静止画)

公式ドキュメントによると、Claudeは MCPサーバー → Bash → Claude in Chrome → computer use の順に「使えるか」を確かめます。たとえばNotionを操作するなら、画面をクリックして回るより、NotionのMCPサーバーを使うほうが速くて正確だからです。つまり、この記事の前半で入れたサーバーが充実しているほど、Claudeは遠回りをしなくて済みます。

Claude in Chrome:ログイン済みのブラウザをそのまま使う

Claude in Chromeは、Claude CodeからChromeやEdgeを操作する機能です。いちばんの利点は、ふだん使っているブラウザのログイン状態をそのまま使える ことです。自分で作ったWebアプリの表示崩れを確認する、コンソールのエラーを読む、フォームの入力チェックを試す、といった作業を、コードを書いているのと同じ画面から頼めます。操作の様子をGIFに記録することもできます。

使うための条件は次のとおりです。

• Chrome拡張機能「Claude」のバージョン1.0.36以上
• Pro・Max・Team・Enterpriseのいずれかで、/login からログインしていること(APIキーでのログインでは、--chrome を付けても有効になりません)
• ChromeまたはEdge(Brave・Arc・Vivaldi・Operaも検出されます)。WSLは非対応

拡張機能を入れたら、claude --chrome で起動するか、起動済みのClaude Codeで /chrome と入力します。

端末の再描画:Status: Enabled と Extension: Installed が出ていれば接続できています。

つながったら、ふだんの言葉で頼むだけです。今回は次のように依頼しました。

Chromeで https://code.claude.com/docs/en/mcp を新しいタブで開き、ページの一番大きい見出しを教えてください

すると、Claude Codeは操作の前にターミナルで許可を求めてきます。最初に「ブラウザのウィンドウを作り、タブを読む」ことへの確認が出て、続いて次の画面が出ました。

端末の再描画:どのサイトで何をしようとしているかが表示されます。2番目を選ぶと、そのサイトでの操作をこのセッションの間だけまとめて許可できます。

Allow を選ぶと、Claudeが新しいタブでページを開き、内容を読んで答えを返しました。

端末の再描画:ブラウザの道具を3回呼び出して、見出しを読み取りました。開いたタブはそのまま残ります。

覚えておきたい点を3つ挙げます。

• どのサイトを触ってよいかは、拡張機能側の権限設定を引き継ぎます。 そのうえで、上の画面のように操作の前に許可を求められます。
• ログイン画面やCAPTCHA(画像認証)に出会うと、Claudeは止まって人に任せます。 パスワードの入力まで任せる設計ではありません。
• 毎回 --chrome を付けたくなければ、/chrome で「Enabled by default」を選べます。 ただしブラウザ用の道具が常に読み込まれる分、コンテキストの消費は増えます。

VS Codeの拡張機能からは、入力欄に @browser と打つと使えます。

computer use:ほかに手段がない画面操作のために

computer useは、ブラウザでもコマンドでも届かない領域、たとえばMacのネイティブアプリやiOSシミュレーター、GUIしかない設定画面を、Claudeが画面を見ながらクリックして操作する機能です。作ったアプリをビルドして起動し、画面を回ってスクリーンショットを撮る、といった確認を一続きで頼めます。

便利な反面、権限が広いので条件は厳しめです。

項目	Claude Code(ターミナル)	Claude Desktopアプリ
位置づけ	リサーチプレビュー	リサーチプレビュー
対応OS	macOSのみ	macOSとWindows
プラン	Pro・Maxのみ(Team・Enterpriseは不可)	Pro・Maxのみ
有効化	/mcp → computer-use → Enable	Settings > General > Computer use
制限	claude -p(対話なし実行)では使えない	アプリが起動している必要がある

Claude Codeでは、/mcp の一覧で computer-use を選び、Enable を実行します。設定はプロジェクト単位で保存されます。

端末の再描画:最初は disabled(無効)です。この記事では有効化の手前までを確認しました。

有効にして最初に使うとき、macOSでは アクセシビリティ(クリックやキー入力のため)と 画面収録(画面を見るため)の2つの許可を求められます。画面収録を許可した直後は、Claude Codeの再起動が必要になる場合があります。

さらに、操作するアプリごとに、セッション単位の承認が入ります。図8の右側のとおり、アプリの種類によってできることに段階があります。ブラウザは「見るだけ」、ターミナルやIDEは「クリックのみ」、それ以外が「フル操作」です。ターミナルやFinder、システム設定のように影響の大きいアプリには、承認画面に追加の警告も出ます。

安全のためのしくみも用意されています。作業中はほかのアプリが隠され、スクリーンショットからターミナルは除外されます。止めたいときは Esc で中断できます。とはいえ、PCの操作権限を渡すことに変わりはありません。任せる作業と、開いておくアプリを絞るのが基本です。

コードの理解を助けるLSPプラグイン

もう1つ、MCPの親戚にあたる話を短く紹介します。LSP(Language Server Protocol) は、エディタと「言語ごとの解析プログラム」をつなぐ規格で、MCPの設計もこれを参考にしています。

Claude CodeにLSPプラグインを入れると、ファイルを編集した直後に型エラーなどの診断を受け取って同じターンで直せるようになり、定義へのジャンプや参照の検索も使えます。公式マーケットプレイスには、TypeScript(typescript-lsp)、Python(pyright-lsp)、Rust(rust-analyzer-lsp)、Goなど11言語分が用意されています。

注意点は1つ。プラグインは接続の設定をするだけで、解析プログラム本体は入れてくれません。 先に本体を入れてから、プラグインを入れます。

# 1. 言語サーバー本体を入れる(TypeScriptの例)
npm install -g typescript-language-server typescript

# 2. Claude Codeの中でプラグインを入れる
/plugin install typescript-lsp@claude-plugins-official

Executable not found in $PATH というエラーが出たら、1の本体が入っていないか、パスが通っていません。大きなプロジェクトではメモリを多く使うことがあるので、重いと感じたら /plugin disable で止めて構いません。

安全に使うための5つの習慣

MCPは、Claudeに「手足」を与える仕組みです。便利さの裏返しとして、つなぐ相手を間違えると被害も手足の分だけ広がります。公式ドキュメントも「接続する前に、そのサーバーを信頼できるか確かめること」と冒頭で注意しています。

1. 提供元を確かめる。 公式が出しているサーバーか、ソースコードが公開されているか、最近も更新されているかを見ます。Anthropicは個々のMCPサーバーのセキュリティ監査をしていません。
2. 外部の文章を読む道具は、プロンプトインジェクションの入口になると知っておく。 Webページやメールに「この指示に従え」と仕込まれている可能性があります。
3. 許可ダイアログを読む。 「常に許可」は、信頼できるサーバーの、読み取り専用の道具に限るのが無難です。
4. 鍵をファイルに書かない。 .mcp.json では ${変数名} を使い、データベースは読み取り専用のユーザーでつなぎます。
5. 使わないものは切る。 /mcp で無効化、不要になったら claude mcp remove で削除します(保存された認証情報も一緒に消えます)。

うまくいかないときの切り分け

つながらないときは、やみくもに再インストールする前に、まず claude mcp list の表示を見てください。表示されている文字で、次の一手が決まります。

図9:状態の文字から、原因の当たりを付けます。(静止画)

症状	よくある原因	対処
⏸ Pending approval のまま	.mcp.json のサーバーを承認していない	claude を起動して承認。見送った場合は /mcp から
! Needs authentication	ログインが済んでいない。サーバーが401や403を返した場合もこの表示になる	/mcp → Authenticate、または claude mcp login <名前>。社内プロキシが403を返していないかも確認
✘ Failed to connect	URLやコマンドの間違い、起動が遅い	claude mcp get <名前> で詳細を見る。npx のサーバーは初回ダウンロード中のことがあるので再実行。遅いなら MCP_TIMEOUT=60000 claude
追加したはずが一覧に出ない	別のフォルダで追加した。.mcp.json の場所やキー名がちがう	追加したフォルダで起動する。.mcp.json はプロジェクト直下、キーは mcpServers
登録した内容が打ったコマンドとちがう	-- を付け忘れ、サーバー用の引数がClaude Code側に解釈された	claude mcp remove して、-- を入れて追加し直す
つながるが道具が0個	APIキーなどの環境変数が足りない	--env KEY=value を付けて追加し直す
claude.aiのコネクタだけ失敗する	サーバーが公開インターネットから見えない	localhost・社内ネットワークは不可。トンネルで一時公開して試す

どうしても原因が分からないときは、claude --debug=mcp で起動すると、接続の詳しい記録が ~/.claude/debug/ に残ります。

後片付け

練習で追加したものは、次のコマンドで消せます。~/mcp-lab の中で実行してください。

claude mcp remove claude-docs
claude mcp remove notion
claude mcp remove hello-mcp --scope project

まとめ:まずは1つ、つないでみる

最後に要点を振り返ります。

• MCPは、Claudeと外部の道具をつなぐ共通規格。 ホスト・MCPサーバー・外部サービスの3つで考えると整理できます。
• 入口は3つ。 どこでも使いたいならコネクタ、PCの中を触らせたいならデスクトップ拡張、開発作業なら claude mcp add。コネクタの接続元はAnthropicのクラウドなので、localhost はつなげません。
• Claude Codeでは、状態の文字を読む。 Connected・Needs authentication・Pending approval の3つが分かれば、ほとんどの場面で次の一手が決まります。
• スコープは「誰と共有するか」。 チームで配るなら .mcp.json、鍵は ${変数名} で外に出します。
• Claude in Chromeとcomputer useは、届かない場所への最後の手段。 専用のMCPサーバーがあるなら、そちらが速くて安全です。

次の一歩としておすすめなのは、この記事の「1つ目」、認証なしのドキュメント検索サーバーを追加して、claude mcp list で ✔ Connected を見ることです。1行で終わります。それが確認できたら、ふだん使っているサービスのコネクタを1つ選んで、コピペの往復を1つ減らしてみてください。

参考リソース

• Connect Claude Code to tools via MCP(Claude Code公式ドキュメント)
• MCP quickstart(同上)
• Use Claude Code with Chrome(同上)
• Computer use(同上)
• Discover and install plugins:LSPプラグインの一覧(同上)
• Get started with custom connectors using remote MCP(Claudeヘルプセンター)
• Use connectors to extend Claude’s capabilities(同上)
• Getting Started with Local MCP Servers on Claude Desktop(同上)
• Connectors overview(Claude Docs)
• Model Context Protocol 公式サイト
• Donating the Model Context Protocol and establishing the Agentic AI Foundation(Anthropic)