概要

AIの話題の中でも、最近はMCPに関する話題が注目を浴びるようになりつつあります。
この記事では実際にClaude DesktopでMCPサーバを動かしてみて、どのように使えるのかを試してみた結果をまとめてみました。

MCPサーバの概要

MCPサーバの設定に入る前に、MCPサーバとは何かというのを整理したいと思います。
MCPサーバー（Model Context Protocol サーバー）は、AIの機能を大幅に拡張するための標準化されたプロトコルです。「AIのUSBポート」とも例えられ、AIが外部データやツールと安全かつ効率的に連携できるようにする仕組みです。

そもそもMCPとは何か

MCPはModel Context Protocol（モデル・コンテキスト・プロトコル）の略で、2024年11月にAnthropicによって導入されたオープンソースのプロトコルです。その目的は、AIモデルと外部データソースやツールのギャップを埋めることにあります。

なぜMCPが必要なのか

従来のAIモデルには大きな制約がありました。

インターネット検索はできても、自分のPC内のファイルは読めない
画像生成はできても、手元の写真を編集できない
テキスト生成が得意でも、リアルタイムデータやツールから孤立している

MCPはこれらの制約を取り除き、AIが外部世界と効率的に相互作用できる「橋渡し」の役割を果たします。

MCPのアーキテクチャと構成要素

MCPはクライアント／サーバー型アーキテクチャを採用しており、以下の3つの主要な構成要素から成り立っています。

1. ホスト（Host）

ホストとは、チャットボットやIDEアシスタントなど、LLMを組み込んだアプリケーションのことです。Claude Desktop、GitHub Copilot、Clineなどが該当します。ホストは、外部リソースへの問い合わせやツールの実行を決定する役割を持ちます。

2. クライアント（Client）

クライアントはホストとMCPサーバーの間に立ち、データフローやツール実行を管理する仲介役です。関連する文書やAPIの結果などのコンテキストを選択し、LLMのコンテキストウィンドウに注入します。

3. サーバー（Server）

サーバーは、リソース、ツール、プロンプトへのアクセスを提供します。例えば、ファイルシステムへのアクセス、APIの呼び出し、データベースクエリなどの機能を公開します。

MCPサーバーの3つの基本機能

MCPサーバーは主に以下の3つのプリミティブ（基本要素）を提供します。

1. リソース（Resources）

リソースはAIがコンテキストに読み込むことができるデータソースです。

ファイルの内容
データベースのクエリ結果
APIからの応答
ログや文書データ

2. ツール（Tools）

ツールはAIが実行できるアクションを定義します。

APIの呼び出し
コマンドの実行
データベースの更新
ファイルの作成・編集

3. プロンプト（Prompts）

プロンプトは、AIの相互作用のための再利用可能なテンプレートです。特定のタスクにおいて一貫性を保つための枠組みを提供し、AIの応答の方向性を調整できます。

MCPサーバの通信方式

MCPサーバーはAIシステムと外部ツール間の通信に複数の方式をサポートしており、用途に応じて最適なプロトコルを選択できます。

1. 標準入出力（stdio）

ローカルプロセス間通信に最適
シンプルなJSON-RPCメッセージをstdin/stdoutで交換
低レイテンシ（平均応答時間0.3ms以下）

2. Server-Sent Events（SSE）

HTTP/1.1準拠のストリーミング通信
単方向（サーバー→クライアント）だが、POSTリクエストで双方向を実現
クラウド環境との統合に適す

3. WebSocket

全二重双方向通信
低レイテンシかつ高スループット
複雑な相互作用が必要なケース向け

MCPサーバの設定

MCPサーバを設定する上で一番引っかかったポイントですが、他の方の記事では環境構築がWSL上で設定しているのか、Windowsネイティブ環境で設定しているのかが端折られているケースが散見され、設定したもののうまく動かないというパターンが多かったように思います。

一般的には前項の標準入出力（stdio）を使用した設定が多く見受けられますが、WSL環境の場合はMCPサーバとして設定し環境変数なども定義していたとしても、実行時に .bashrc などが読み込まれずにうまく動作しないケースがあったり、WindowsネイティブなNodeJSの設定をしたが実はMPCサーバ自体が対応していないなどのハマりポイントがありました。

個人的な感想ですが、基本的な考え方としてWindowsネイティブ環境で設定する方が設定はしやすいのでWindowsネイティブ環境で対応しているものについてはWSLは使用せず、Linuxしか対応していないものはWSLを使用する方がいいように思いました。

今回の設定環境

Windows11
Claude Desktop

playwrightの設定

playwright MCPサーバの詳細についてはこちらをご確認ください。

1. NodeJSのインストール

公式サイトからバイナリーを取得してインストールしましょう。
https://nodejs.org/ja/download

2. npxのインストール

下記コマンドで、npxが使用できるようにします。

npm install -g npx

3. playwright MCPサーバの動作テスト

この項目は実際の設定に影響しないため飛ばしていただいても問題ありませんが、MCPサーバが意図した通り動作しているかどうか確認する際の切り分けとしての位置づけです。

コマンドプロンプトを立ち上げて、以下のコマンドを実行します。コマンド実行後にエラーなく5秒～10秒程度何も反応がなくプロンプトが次に進まなければ（待機状態）おそらく動作は問題ないでしょう。

npx @playwright/mcp@latest

4. Claude Desktopの設定

Claude Desktopを立ち上げ、左上の三本の横線からファイル＞設定を開きます。
開発者メニューから構成を編集を選択し、設定ファイルを開きます。

※もし、開発者のメニューがない場合は、三本の横線からヘルプを開き開発者モードを有効にしてください。
※直接ファイルを編集する場合は、C:\Users\<ユーザー名>\AppData\Roaming\Claude\claude_desktop_config.json を開いて編集します。
下記の設定を追加します。
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}
```
ブラウザを指定して操作する場合は下記のように設定します。GitHubのドキュメントにも記載がある通り、デフォルト設定ではChromeが起動しますがオプションで chrome以外に firefox, webkit, msedge などを選択することもできます。
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser",
        "msedge"
      ]
    }
  }
}
```

MCPサーバの動作確認

下記のプロンプトをClaude Desktopに投げてみましょう。

playwriteのmpcを使用して、Qiitaのトップページにアクセスしてください。

ここで常に許可する、または一度だけ許可するのどちらかのボタンをクリックします。

下記のようにブラウザ画面で対象のページが開けば動作テストは完了です。

まとめ

いかがでしたでしょうか。MCPの仕組みからClaude DesktopでMCPサーバのplaywrightを動かしてみてたところまでをひと通り解説してみました。この記事がどなたかのお役に立てれば幸いです。