対象外部ツール連携を始めたい開発者

達成目標MCP接続を設定し外部サービスと連携できる

前提知識Getting Started完了

所要時間20分

MCP Integration

Model Context Protocol（MCP）を使って、Claude Codeの能力を外部ツールやデータソースに拡張する方法を解説します。ブラウザ操作、DB接続、ドキュメント管理など、実用的な連携パターンを網羅します。

MCPとは

Model Context Protocol（MCP）は、Claude Codeが外部ツールやデータソースにアクセスするための標準プロトコルです。MCPを使うことで、Claude Codeの能力をローカル環境やクラウドサービスに拡張できます。

Claudeの能力を外部サービスに拡張 — ブラウザ操作、データベース接続、ドキュメント管理など、標準では不可能な操作が可能になります。
ブラウザ操作、DB接続、ドキュメント管理が可能に — Playwright、PostgreSQL、Notionなど、多様なツールと連携できます。
標準化されたプロトコルで安定・安全 — Anthropicが策定した標準プロトコルに基づいており、セキュリティとエラー処理が統一されています。
コミュニティが多数のMCPサーバーを公開 — 公式・サードパーティ合わせて数百のMCPサーバーが利用可能です。

✅ Tip

MCPは「Claudeに新しい道具を渡す」仕組みです。ブラウザを操作したり、Notionのページを読み書きしたり、データベースにクエリを投げたりできるようになります。

設定方法

`.mcp.json` の書き方

プロジェクトのルートに .mcp.json ファイルを作成し、使用するMCPサーバーを定義します。

.mcp.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-playwright"]
    },
    "notion": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-notion"],
      "env": {
        "NOTION_API_KEY": "secret_xxx"
      }
    }
  }
}

`claude mcp add` コマンド

CLIからも直接MCPサーバーを追加できます。

Terminal

claude mcp add playwright -- npx @anthropic-ai/mcp-server-playwright

接続方式の比較

MCPサーバーとの接続方式は3種類あります。用途に応じて使い分けます。

方式	仕組み	用途	例
stdio	標準入出力	ローカルツール（npxで起動）	Playwright, ファイル操作
SSE	Server-Sent Events	リモートサーバー（非推奨・Deprecated）	SaaSツール連携
HTTP	HTTPリクエスト	Webサービス（推奨）	Notion, GitHub, Sentry等

📝 Note

2026年現在、HTTP方式が公式推奨です。多くの公式MCPサーバー（Notion、Sentry、GitHub等）がHTTPエンドポイントを提供しています。

HTTP方式の設定例

HTTP方式では、URLを指定するだけで接続できます。

.mcp.json（HTTP方式）

{
  "mcpServers": {
    "notion": {
      "type": "http",
      "url": "https://mcp.notion.com/mcp"
    }
  }
}

Terminal

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

設定スコープ

MCPの設定スコープ: local（デフォルト、個人・現プロジェクト）、project（.mcp.json、チーム共有）、user（全プロジェクト）

実用例TOP5

実際のプロジェクトで特に利用頻度が高いMCPサーバーを5つ紹介します。それぞれのセットアップ方法と主な活用シーンを解説します。

Playwright（ブラウザ操作・テスト）

Webブラウザを自動操作し、スクリーンショット取得やE2Eテストを実行できます。

claude mcp add playwright -- npx @anthropic-ai/mcp-server-playwright

Webページのスクリーンショット取得
フォーム入力・ボタンクリック
E2Eテストの実行
ページのアクセシビリティ検証

Notion（ドキュメント連携）

Notionのページやデータベースに直接アクセスし、読み書き操作が可能になります。

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

env: NOTION_API_KEY

ページの読み書き
データベースのクエリ
ミーティングノートの取得
タスク管理との連携

PostgreSQL / DB接続

データベースに直接接続し、スキーマ確認やクエリ実行ができます。

claude mcp add postgres -- npx @anthropic-ai/mcp-server-postgres

env: DATABASE_URL

スキーマの確認
クエリの実行
マイグレーション計画

Firecrawl（Webスクレイピング）

Webページのコンテンツを構造化データとして取得できます。

claude mcp add firecrawl -- npx firecrawl-mcp

env: FIRECRAWL_API_KEY

Webページのコンテンツ取得
ドキュメントサイトのクロール
競合分析データの収集

GitHub

GitHub APIを通じてIssue/PRの操作やリポジトリ情報の取得ができます。

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

env: GITHUB_TOKEN

Issue/PRの操作
コードレビュー
リポジトリ情報の取得

自作MCPサーバー

既存のMCPサーバーでカバーできない社内ツールやカスタムAPIがある場合、自作MCPサーバーを作成できます。以下はTypeScriptによる最小構成の例です。

my-mcp-server.ts

import { McpServer } from "@anthropic-ai/mcp-sdk";

const server = new McpServer({
  name: "my-tool",
  version: "1.0.0",
});

server.tool("hello", "Say hello to someone", {
  name: { type: "string", description: "Name to greet" }
}, async ({ name }) => {
  return { content: [{ type: "text", text: `Hello, ${name}!` }] };
});

server.start();

作成したMCPサーバーは .mcp.json に登録して使用します。

.mcp.json

{
  "mcpServers": {
    "my-tool": {
      "command": "npx",
      "args": ["tsx", "my-mcp-server.ts"]
    }
  }
}

✅ Tip

自作MCPサーバーは意外と簡単です。社内ツールやAPIラッパーを作成して、Claudeから直接操作できるようになります。

使い分け

MCPと他の手段（Bash tool、カスタムコマンド）を適切に使い分けることで、効率的な開発環境を構築できます。

	MCP	Bash tool	カスタムコマンド
用途	外部サービス連携	シェルコマンド実行	定型タスクのショートカット
認証	環境変数で管理	なし	なし
エラー処理	標準化済み	自前で実装	自前で実装
再利用性	高い（他プロジェクトでも使える）	低い	中程度
セキュリティ	サンドボックス化	フルアクセス	フルアクセス
具体例	DB接続、API連携	`npm test`, `git log`	`/review`, `/deploy`

判断基準

外部サービスに接続する → MCP を使う
ローカルのシェルコマンドを実行する → Bash tool を使う
毎回同じ指示を繰り返す → カスタムコマンド を使う

トラブルシューティング

接続できない

claude mcp list で登録状態を確認
npxでパッケージが正しくインストールされているか確認
Node.js 18+であることを確認

Terminal

claude mcp list
node --version

タイムアウト

MCPサーバーの起動に時間がかかる場合がある
--timeout オプションで待機時間を延長
ネットワーク接続を確認

認証エラー

環境変数が正しく設定されているか確認
APIキーの有効期限を確認
.mcp.json のenv設定を確認

⚠️ Warning

MCPサーバーが動かない場合、まず claude doctor を実行してください。設定の問題を自動診断してくれます。

Windowsでの注意点

Windowsでstdioサーバーを使う場合は cmd /c ラッパーが必要です。

Terminal（Windows）

claude mcp add --transport stdio my-server -- cmd /c npx -y @some/package

OAuth対応

2026年2月からOAuth認証が安定化
ブラウザベースの認証フローに対応
トークンの自動更新

← 前のページ

判断フレームワーク

プラグイン・スキル

MCP Integration

MCPとは

設定方法

.mcp.json の書き方

claude mcp add コマンド

接続方式の比較

HTTP方式の設定例

設定スコープ

実用例TOP5

Playwright（ブラウザ操作・テスト）

Notion（ドキュメント連携）

PostgreSQL / DB接続

Firecrawl（Webスクレイピング）

GitHub

自作MCPサーバー

使い分け

判断基準

トラブルシューティング

接続できない

タイムアウト

認証エラー

Windowsでの注意点

OAuth対応

`.mcp.json` の書き方

`claude mcp add` コマンド