ジャコ Lab

プログラミング関連のメモ帳的ブログです

VS Code から MCP サーバーを利用してみる

MCP

VS Code から MCP サーバーを利用してみる
VS Code から MCP サーバーを利用してみる

VSCode に MCP サーバー対応が入ったので使ってみました

VSCode の MCP サーバー対応アップデート概要

v1.99.0 により、Visual Studio Code（VSCode）の安定版でも「エージェントモード」と「MCPサーバー」の機能が利用できるようになりました。
これまではInsider版のみの機能でしたが、今回からすべてのVSCodeユーザーが標準で利用可能となっています。

私が触ろうとしたときにはもう v1.99.3 になっていました

エージェントモードは、AIが単なるチャットやインライン補完だけでなく、複数のファイル編集やターミナルコマンドの実行、エラー修正などを自律的にで行うことのできるモードです。ここにMCPサーバー対応が加わることで、AIが外部ツールやデータソースと連携し、より高度でインタラクティブなコーディング支援が実現します。

MCP（Model Context Protocol）とは？

何番煎じかわからないくらいですが、簡単に。

MCP（Model Context Protocol） は、生成AI（大規模言語モデル）が外部のツールやデータソースと簡単につながるための標準化されたプロトコルです。

MCPのイメージ

Anthropic 社が「AI界のUSB-C」と表現するように、MCP は AI とさまざまな外部サービスやツールを共通の規格でつなぐ役割を果たします。
従来は、AIと外部システムを連携させるには個別に API 連携を開発する必要がありましたが、MCP を使えば一度 MCP クライアントを実装するだけで、MCP 対応のサービスすべてと簡単に連携できるようになります。

技術的な特徴:

  • 通信方式：MCP は JSON-RPC 2.0 をベースにした通信プロトコルで、クライアント（AI）とサーバー（外部ツールやデータソース）が標準入出力や HTTP SSE でやり取りします。
  • 標準化のメリット：MCP により、AI はさまざまなツール・データソースと統一的に連携でき、開発者は個別の API 実装から解放されます。
  • 実際の使い方：例えば、「今日の天気を教えて」とAIに尋ねると、AI は MCP 経由で天気情報サービスにアクセスし、最新情報を取得して回答できます。

VS Code から使ってみよう

前提

・GitHub Copilot が使える状態になっていること

エージェントモードにする

チャットの分類？を「質問」から「エージェント」に変えておく必要があります。

エージェントモードに切り替える
エージェントモードに切り替える

私は、MCP サーバーの設定を記述したのに「エージェント」にしていなかったので、うまく利用できずになんでやねん！ってなってました

もし「エージェント」がない場合は、VSCode のバージョン 及び 設定 を確認したほうが良さそうです。

バージョンを確認

VSCode 1.99.x
VSCode 1.99.x

v1.99.x であることを確認します

エージェントモードが有効になっていることを確認

Chat > Agent: Enabled
Chat > Agent: Enabled

MCP サーバーを追加

設定に MCP サーバーを追加

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

MCP サーバーが追加可能になると、なんか更新できるようになります！

MCP サーバーを追加する
MCP サーバーを追加する

MCP サーバーが利用可能になった場合

ツールが利用可能になった状態
ツールが利用可能になった状態

ツールが利用可能になった状態
ツールが利用可能になった状態

ツールが利用開始出来なかった場合

(折りたたみ)

ツールが利用開始出来なかった場合
ツールが利用開始出来なかった場合

私は、これになって、またまたうまく利用できませんでした

エラーを確認する:

出力の表示をする
出力の表示をする

出力を表示 すると以下のエラーになっていることがわかりました

2025-04-27 23:09:51.552 [info] サーバー playwright を起動しています
2025-04-27 23:09:51.553 [info] 接続状態: 開始しています
2025-04-27 23:09:51.556 [info] Starting server from LocalProcess extension host
2025-04-27 23:09:52.492 [info] 接続状態: 開始しています
2025-04-27 23:09:52.495 [info] 接続状態: エラー spawn npx ENOENT
ああ、そういえば Node インストールしていなかったっけ

MCP を使ってみる

実行デモ
実行デモ

まとめ

なんとなく理解が深まった