MCP: その概要と使い方

前の章では、よく使う操作をワンクリックで実行できる「スキル」について学びました。でも、こんな疑問を持ったことはありませんか？

AIが直接ブラウザを操作できたら？ノートを読み書きできたら？データベースに問い合わせできたら？

答えは「はい、でもAIに『プラグイン』を装備する必要があります」です。

この「プラグインシステム」こそが MCP です。

トレンドをざっくりと

MCPの機能の多くは、Claude CodeやCodex CLIにネイティブで取り込まれつつあります。

例えば、初期の頃はAIにウェブ検索させるためにWeb Search MCPをインストールする必要がありましたが、今ではClaude CodeもCodexもウェブ検索機能を内蔵しています。ファイルの読み書きやGit操作など、他の多くの機能もビルトインされています。前章で紹介したスキルもMCPの一部のシナリオを代替します。以前はMCPが必要だった標準化されたタスクの多くが、今ではスキルで実行できるようになりました。

しかし、MCPが無用になったわけではありません。むしろ、MCPには今でも代替不可能な価値があります。

プロプライエタリなシステムとの連携: 社内データベースやプライベートAPIなど、ビルトインでは絶対にカバーできない部分は、MCPでしかアクセスできません。
サードパーティソフトウェアの操作: ブラウザの制御、Obsidianの管理、Notionのノート処理など、外部ソフトウェアとの深い連携が必要なシナリオでは、MCPが唯一の選択肢です。
コミュニティエコシステム: MCPマーケットプレイスには、コミュニティが提供する何千ものサーバーがあり、想像もしなかったようなシナリオをカバーしています。
カスタマイズ性: 自分でMCPサーバーを書けば、AIに任意のシステムへアクセスさせることができます。

簡単に言えば、ビルトイン機能で一般的なニーズの80％をカバーし、MCPが残りの20％の個別ニーズを担当します。そして、その20％こそが本当の差を生むのです。

MCPとは？

一言で言うと

MCP = Model Context Protocol = AIのプラグインシステム

MCPは、Anthropic（Claudeの開発元）が導入したオープンプロトコルで、AIツールを外部システムに接続できるようにします。

なぜMCPが必要なのか？

次のシナリオを考えてみてください。

MCPがない場合:

You: Open Baidu and search for "today's weather"
AI: Sorry, I can't access the browser. I can only process text…

MCPがある場合:

You: Open Baidu and search for "today's weather"
AI: Sure, I've opened the browser, searched for "today's weather", and here are the results…

何が違うのでしょうか？ AIが「話すだけ」から「行動できる」に変わります。

たとえ話

AIそのもの = 優秀な頭脳

何でも知っているが、手足がない。
やり方を教えることはできるが、代わりに実行することはできない。

MCP = その頭脳に手足をつなぐもの

「ブラウザの手」をつなぐ：AIが自動でウェブページを操作できる。
「ファイルシステムの手」をつなぐ：AIがファイルを読み書きできる。
「データベースの手」をつなぐ：AIがデータを照会・変更できる。
「Obsidianの手」をつなぐ：AIが直接ノートを管理できる。

もう一つのたとえ:

AI = 超優秀なシェフ
MCP = シェフにフル装備のキッチン（鍋、フライパン、オーブン、ミキサー…）を与える
MCPがない場合：シェフはレシピを暗唱するだけ。
MCPがある場合：シェフが実際に料理を作ってくれる。

前章との比較

前章では、プロンプト、スキル、MCPを比較しました。

Prompts → The most basic interaction method (verbal instructions)
    ↓
Skills → Encapsulate prompts + simple logic (shortcuts)
    ↓
MCP → Skills + the ability to connect to external systems (connecting the world)

MCPは3つの中で最も強力です。なぜなら、AIの「壁」を打ち破り、外界にアクセスできるようにするからです。

MCPの仕組み

技術的な詳細に立ち入る必要はありません。次の図を理解すれば十分です。

You ←→ Claude Code/Codex ←→ MCP Server ←→ External System
         (AI Tool)           (Bridge)      (Browser/Database/Notes, etc.)

3つの役割:

役割	説明	例
AIツール (クライアント)	あなたが使うコーディングアシスタント	Claude Code, Codex CLI
MCPサーバー	AIと外部システムの橋渡し	Playwright MCP, GitHub MCP
外部システム	AIが操作する対象	ブラウザ, GitHub, Obsidian

あなたがやるべきことは、AIツールにMCPサーバーをインストールするだけ。するとAIが対応する外部システムを操作できるようになります。

スマホにアプリをインストールするのと同じくらい簡単です。

MCPサーバーを探すには

MCPサーバーはたくさんあります。必要なものを見つけるにはどうすればいいでしょうか？主な「MCPマーケットプレイス」を紹介します。

1. mcp.so (推奨)

URL: https://mcp.so

現在、最も包括的なMCPサーバーのディレクトリです。いわば「MCPのアプリストア」です。

特徴:

数千のMCPサーバーが掲載
詳細な説明とインストールガイド
検索とカテゴリブラウジング
日本語にも対応

使い方:

ウェブサイトを開く。
必要な機能を検索する（例：「playwright」や「browser」）。
該当するMCPサーバーを見つける。
ページのインストール手順に従う。

2. Smithery

URL: https://smithery.ai

特徴:

一部のMCPサーバーをオンラインで直接試せる。
ワンクリックインストールコマンド。
APIキーのホスティング。

3. GitHub awesome-mcp-servers

URL: https://github.com/punkpeye/awesome-mcp-servers

特徴:

コミュニティ管理のMCPサーバーリスト。
オープンソースで無料。
頻繁に更新される。

4. 公式MCPサーバー

AnthropicやMicrosoftなどの大手企業も公式MCPサーバーをリリースしています。

MCPサーバー	機能	メンテナー
Playwright MCP	ブラウザ自動化	Microsoft
GitHub MCP	GitHub操作	GitHub
Context7 MCP	最新ドキュメントの取得	コミュニティ
Notion MCP	ノート管理	Notion

おすすめ: 初心者はまずmcp.soから始め、必要な機能を検索し、インストールガイドに従ってください。

MCPのインストール方法

インストール方法はClaude CodeとCodex CLIで少し異なります。それぞれの手順を説明します。

Claude CodeにMCPをインストールする

方法1: コマンドライン (推奨)

Claude Codeには専用のMCP管理コマンドがあり、一行で完了します。

claude mcp add playwright npx '@playwright/mcp@latest'

このコマンドの意味:

claude mcp add : MCPサーバーを追加する。
playwright : このMCPに付ける名前（任意の名前を付けられます）。
npx '@playwright/mcp@latest' : MCPサーバーを起動するコマンド。

インストールの確認:

Claude Codeで /mcp と入力すると、インストール済みのMCPサーバーのリストが表示されます。

方法2: 設定ファイルを編集する

Claude Codeの設定ファイルを直接編集してMCPを追加することもできます。

設定ファイルのパス: ~/.claude.json

mcpServers セクションを追加します。

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

保存してClaude Codeを再起動します。

Codex CLIにMCPをインストールする

Codex CLIのMCP設定は ~/.codex/config.toml ファイルにあります。

config.tomlを編集する

ファイルの末尾に以下を追加します。

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
startup_timeout_sec = 60.0

パラメータの説明:

パラメータ	説明
`command`	MCPサーバーを起動するコマンド
`args`	コマンドの引数
`startup_timeout_sec`	起動タイムアウト（秒）。MCPサーバーによっては起動に時間がかかるため、60を推奨

環境変数を使うMCP

一部のMCPサーバーではAPIキーなどの設定が必要です。env セクションを使って渡せます。

[mcp_servers.context7]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.context7.com/mcp", "--header", "Authorization:${CTX7_AUTH_HEADER}"]
startup_timeout_sec = 60.0

[mcp_servers.context7.env]
CTX7_AUTH_HEADER = "Bearer your_token"

保存してCodexを再起動します。

実践: Playwright MCPをインストールしてブラウザを操作する

実際に試してみましょう！ Playwright MCP を例に、AIにブラウザを自動制御させます。

Playwright MCPとは？

Playwright = Microsoftのブラウザ自動化ツール
Playwright MCP = MCPプロトコルを通じてAIがPlaywrightを制御できるようにするもの

インストール後、AIは以下のことができるようになります。

ウェブページを開く
ボタンをクリックする
フォームに入力する
スクリーンショットを撮る
ページの内容を読む
ウェブサイトに自動ログインする

ステップ1: Playwright MCPをインストールする

Claude Codeの場合

ターミナルを開いて実行:

claude mcp add playwright npx '@playwright/mcp@latest'

ブラウザを指定したい場合（例: Edge）、パラメータを追加:

claude mcp add playwright npx '@playwright/mcp@latest' -- --browser msedge

Codex CLIの場合

~/.codex/config.toml を編集して追加:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
startup_timeout_sec = 60.0

Edgeを使い、ログインセッションを維持したい場合は、次のように設定します。

[mcp_servers.playwright]
command = "mcp-server-playwright"
args = ["--browser", "msedge", "--executable-path", "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge", "--user-data-dir", "/Users/your_username/Library/Application Support/Microsoft Edge", "--isolated"]
startup_timeout_sec = 60.0

ヒント: --user-data-dir を使うとブラウザのログイン状態が保持されるため、AIがページを開くたびに再ログインする必要がありません。

ステップ2: インストールを確認する

Claude Codeを起動:

claude

/mcp と入力すると、リストに playwright が表示され、ステータスが “connected” になっているはずです。

ステップ3: AIにブラウザを操作させる

さあ、試してみましょう！ Claude Codeで次のように入力します。

Open Baidu, search for "What is MCP", and save a screenshot of the search results.

AIが自動的に:

ブラウザを起動
Googleのトップページを開く
検索ボックスに「MCPとは」と入力
検索ボタンをクリック
検索結果ページのスクリーンショットを撮る
スクリーンショットをプロジェクトフォルダに保存

あなたは何もする必要はありません。AIがすべての手順を自動で完了します！

さらに多くのユースケース

Playwright MCPをインストールすれば、AIにさまざまなことを依頼できます。

例1: フォームの自動入力

Open https://example.com/register and fill in the registration form with the following info:
Username: testuser
Email: [email protected]
Then click submit.

例2: Webコンテンツの抽出

Open https://news.ycombinator.com and extract the titles and links of the top 10 stories on the front page. Organize them into a Markdown table.

例3: 自動テスト

Open the translation page I just made (translate.html) and test the following:
1. Enter "Hello World", click translate, and check if a result appears.
2. Click the clear button and check if the input box is cleared.
3. Toggle dark mode and check if the interface looks correct.
Compile the test results into a report.

MCPサーバー	機能	インストールコマンド (Claude Code)
Playwright	ブラウザ自動化	`claude mcp add playwright npx '@playwright/mcp@latest'`
Chrome DevTools	Chromeデバッグ	`claude mcp add chrome-devtools npx 'chrome-devtools-mcp@latest'`

MCPサーバー	機能	インストールコマンド (Claude Code)
GitHub	GitHub操作	`claude mcp add github npx '@anthropic-ai/github-mcp'`
Context7	最新の技術ドキュメントを取得	トークン設定が必要（設定参照）

MCPサーバー	機能	備考
Notion	Notionノートの読み書き	Notion API Keyが必要
Obsidian	Obsidianノートの読み書き	コミュニティ開発

MCPサーバー	機能	備考
Supabase	Supabaseデータベース操作	Access Tokenが必要
PostgreSQL	PostgreSQL操作	コミュニティ開発

重要な注意点

安全に関する注意

MCPはAIに外部システムを操作する能力を与えるため、いくつかのリスクも伴います。

権限は慎重に付与する: AIにシステム全体へのアクセス権をむやみに与えないでください。
アクションを確認する: 重要な操作の前には、AIに何をしようとしているのか説明させてください。
データをバックアップする: AIに重要なデータを扱わせる前に、バックアップを取ってください。
APIキーの安全性: APIキーを他人と共有しないでください。

よくある質問

Q: MCPサーバーが起動しません。

A: 以下を確認してください。

Node.jsのバージョンは18以上ですか？ (node -v)
ネットワークは接続されていますか？
startup_timeout_sec は十分に高いですか？（60秒を推奨）

Q: ブラウザMCPをインストールしてもブラウザウィンドウが見えません。

A: Playwrightはデフォルトでヘッドレスモード（ウィンドウ非表示）で動作します。ブラウザの動作を確認したい場合は、パラメータ --headless false を追加してください。

claude mcp add playwright npx '@playwright/mcp@latest' -- --headless false

Q: MCPサーバーはClaude CodeとCodex CLIで共有できますか？

A: MCPサーバー自体は汎用的です（例: Playwright MCPは両方のツールで使用可能）が、設定方法が異なります。

Claude Code: ~/.claude.json または claude mcp add コマンド
Codex CLI: ~/.codex/config.toml

まとめ

今日学んだこと:

MCPとは: AIのプラグインシステム。AIを外部ツールやサービスに接続する。
MCPマーケットプレイス: mcp.so、Smithery、awesome-mcp-servers – アプリストアのようにプラグインを探せる。
MCPのインストール方法: Claude Codeでは claude mcp add コマンド、Codex CLIでは config.toml を編集。
実践: Playwright MCPをインストールし、AIにブラウザを自動制御させた。
おすすめのMCPサーバー: ブラウザ、GitHub、ノート、データベースなど。

重要なポイント:

MCPはAIを「話すだけ」から「行動できる」に変える。
MCPのインストールはスマホにアプリを入れるのと同じくらい簡単。
初心者はまずPlaywright MCPから始めるのが最も直感的でおすすめ。

トレンドをざっくりと

MCPとは？

一言で言うと

なぜMCPが必要なのか？

たとえ話

前章との比較

MCPの仕組み

MCPサーバーを探すには

1. mcp.so (推奨)

2. Smithery

3. GitHub awesome-mcp-servers

4. 公式MCPサーバー

MCPのインストール方法

Claude CodeにMCPをインストールする

方法1: コマンドライン (推奨)

方法2: 設定ファイルを編集する

Codex CLIにMCPをインストールする

config.tomlを編集する

環境変数を使うMCP

実践: Playwright MCPをインストールしてブラウザを操作する

Playwright MCPとは？

ステップ1: Playwright MCPをインストールする

Claude Codeの場合

Codex CLIの場合

ステップ2: インストールを確認する

ステップ3: AIにブラウザを操作させる

さらに多くのユースケース

おすすめのMCPサーバー

ブラウザとWeb

開発ツール

ノートとドキュメント

データベース

重要な注意点

安全に関する注意

よくある質問

まとめ