VSCodeでMCP Serverを設定する方法

2026年9月30日2026年10月1日

VSCodeでは、MCP Serverを設定することで、AIエージェントから外部サービスやローカルツールを利用できるようになります。

MCPは「Model Context Protocol」の略で、AIモデルと外部ツール、データソース、APIなどを接続するための共通プロトコルです。

たとえばMCP Serverを利用すると、VSCodeのAIエージェントからGitHub、データベース、ブラウザ、自社API、ローカルCLIなどへアクセスできるようになります。

2026年9月時点のVSCodeでは、MCP Serverをワークスペース単位またはユーザー単位で設定できます。

MCP Serverとは

MCP Serverは、AIエージェントへ外部機能を提供するためのサーバーです。

MCP Serverが提供できる代表的な機能には、次のものがあります。

Tools
Resources
Prompts
MCP Apps

Toolsは、ファイル操作やAPI実行、ブラウザ操作などの処理をAIから呼び出すための機能です。

Resourcesは、ドキュメントやデータなどをAIへ提供するために使用します。

Promptsは、あらかじめ定義したプロンプトをAIから利用する仕組みです。

MCP Appsは、フォームや可視化などのインタラクティブなUIをChat内へ表示できる機能です。

ただし、MCP Appsなど一部の機能はExperimental扱いとなっている場合があります。

VSCodeでMCP Serverを設定する前の準備

VSCodeを新しいバージョンへ更新する

MCP関連機能は継続的にアップデートされています。

そのため、MCP Serverを利用するときは、できるだけ最新の安定版VSCodeを利用するのがおすすめです。

古いバージョンでは、MCP関連コマンドや設定項目が利用できない場合があります。

AI機能が有効になっていることを確認する

VSCodeでMCP ServerをAIエージェントから利用するには、AI関連機能が有効になっている必要があります。

たとえば、VSCodeの設定で次の項目を有効にしている場合、AI機能が無効になります。

{
  "chat.disableAIFeatures": true
}

MCPをChatやAgentから使用する場合は、AI機能を利用できる状態にしておきます。

GitHub Copilotを使用している場合は、Copilotへサインインして利用できる状態にしておくとよいでしょう。

ただし、MCPそのものを利用するためにGitHub Copilotへのサインインが絶対条件というわけではありません。

コマンドパレットからMCP Serverを追加する方法

VSCodeでは、JSONファイルを直接編集しなくても、コマンドパレットからMCP Serverを追加できます。

コマンドパレットを開く

WindowsとLinuxでは次のショートカットを使用します。

Ctrl + Shift + P

macOSでは次のショートカットです。

Command + Shift + P

MCP Server追加コマンドを実行する

コマンドパレットへ次のように入力します。

MCP: Add Server

表示された項目を選択し、追加するMCP Serverの接続方式や起動方法を設定します。

保存先としてWorkspaceまたはUser Configurationなどを選択できます。

Workspaceに保存した場合は、そのプロジェクト専用の設定になります。

User Configurationへ保存した場合は、複数のワークスペースから利用できます。

`.vscode/mcp.json`でMCP Serverを設定する方法

プロジェクトごとにMCP Serverを設定する場合は、ワークスペース内に.vscode/mcp.jsonを作成します。

ディレクトリ構成は次のようになります。

project
├─ .vscode
│  └─ mcp.json
├─ src
└─ package.json

基本的な設定構造は次のとおりです。

{
  "servers": {
  }
}

serversの中へ、利用したいMCP Serverを登録します。

参考サイト

VS CodeでMCP Server（プレビュー版）：設定ファイルの書き方で生じる微妙な違い – サーバーワークスエンジニアブログ

ローカルMCP Serverを設定する方法

ローカルPC上でNode.jsやPythonなどのMCP Serverを起動する場合は、一般的にstdio方式を利用します。

Node.js系MCP Serverの設定例

たとえば、Node.js系MCP Serverをnpxで起動する場合は次のように設定できます。

{
  "servers": {
    "my-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "example-mcp-server"
      ]
    }
  }
}

この設定は、概念的には次のコマンドを実行することになります。

npx -y example-mcp-server

`type`の意味

次の設定は、標準入力と標準出力を使ってVSCodeとMCP Serverが通信することを意味します。

"type": "stdio"

ローカルMCP Serverでは、よく使用される接続方式です。

なお、VSCode公式ドキュメントの一部の設定例では、type: "stdio"が省略されています。

commandを指定しているローカルServerでは、typeを省略できるケースがあります。

ただし、設定内容を分かりやすくするためにtype: "stdio"を明示しても問題ありません。

`command`の意味

commandには、MCP Serverを起動するための実行コマンドを指定します。

たとえば次のようなコマンドを利用できます。

npx
node
python
python3
docker

`args`の意味

argsには、commandへ渡す引数を指定します。

たとえば次の設定の場合、

{
  "command": "npx",
  "args": [
    "-y",
    "example-mcp-server"
  ]
}

実際には次のようなコマンドが実行されます。

npx -y example-mcp-server

Playwright MCP Serverを設定する例

ブラウザ操作を行いたい場合は、Playwright MCP Serverを利用できます。

設定例は次のとおりです。

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@microsoft/mcp-server-playwright"
      ]
    }
  }
}

MCP Serverが正常に起動すると、Playwrightが提供するツールをVSCodeのAIエージェントから利用できるようになります。

なお、MCP Serverのパッケージ名や起動方法は将来的に変更される可能性があります。

導入するときは、利用するMCP Serverの最新ドキュメントも確認することをおすすめします。

HTTP接続のMCP Serverを設定する方法

インターネットやLAN上にあるリモートMCP Serverへ接続する場合は、httpを利用できます。

基本的な設定例は次のとおりです。

{
  "servers": {
    "my-api": {
      "type": "http",
      "url": "https://example.com/mcp"
    }
  }
}

HTTP系MCP Serverでは、VSCodeがHTTP Stream方式での接続を試みます。

必要に応じてSSEへフォールバックする仕組みも用意されています。

SSEを明示的に指定する

レガシーなSSE方式を利用する場合は、次のように設定できます。

{
  "servers": {
    "my-api": {
      "type": "sse",
      "url": "https://example.com/sse"
    }
  }
}

現在は基本的にhttpを利用し、必要な場合にsseを使うと考えると分かりやすいでしょう。

GitHub MCP Serverを設定する例

GitHub向けMCP Serverを利用する場合は、次のような設定例があります。

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp"
    }
  }
}

複数のMCP Serverを同時に登録することも可能です。

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp"
    },
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@microsoft/mcp-server-playwright"
      ]
    }
  }
}

用途ごとに複数のMCP Serverを組み合わせることで、AIエージェントにさまざまな操作能力を追加できます。

環境変数をMCP Serverへ渡す方法

MCP Serverによっては、APIキーや接続先URLなどを環境変数として渡す必要があります。

その場合はenvを使用できます。

{
  "servers": {
    "my-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "example-mcp-server"
      ],
      "env": {
        "API_URL": "https://api.example.com"
      }
    }
  }
}

ただし、APIキーやアクセストークンを直接mcp.jsonへ記述するのは避けた方が安全です。

特に.vscode/mcp.jsonをGit管理している場合、秘密情報をGitHubなどへ誤って公開する危険があります。

`envFile`から環境変数を読み込む方法

ローカルMCP Serverでは、環境変数ファイルを指定することもできます。

たとえば次のように設定します。

{
  "servers": {
    "my-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "example-mcp-server"
      ],
      "envFile": "${workspaceFolder}/.env"
    }
  }
}

.envにはAPIキーなどを記述できます。

ただし、秘密情報を含む.envはGitへコミットしないように注意してください。

たとえば.gitignoreへ次のように追加します。

.env

APIキーを安全に入力する方法

VSCodeでは、inputsを利用してAPIキーなどをユーザーへ入力させることができます。

設定例は次のとおりです。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-key",
      "description": "API Key",
      "password": true
    }
  ],
  "servers": {
    "my-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "example-mcp-server"
      ],
      "env": {
        "API_KEY": "${input:api-key}"
      }
    }
  }
}

password: trueを設定すると、入力値を画面上で隠せます。

APIキーを設定ファイルへ直接書き込まずに済むため、チームでmcp.jsonを共有する場合にも便利です。

HTTP MCP Serverへ認証情報を渡す方法

HTTP接続のMCP Serverでは、headersを使って認証情報を渡せます。

たとえばBearer Token方式なら、次のように設定できます。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "api-token",
      "description": "API Token",
      "password": true
    }
  ],
  "servers": {
    "my-api": {
      "type": "http",
      "url": "https://api.example.com/mcp",
      "headers": {
        "Authorization": "Bearer ${input:api-token}"
      }
    }
  }
}

APIトークンを直接JSONへ記述するより、安全に管理できます。

OAuth認証を利用する方法

HTTPタイプのMCP Serverでは、OAuth認証に対応している場合もあります。

設定例は次のとおりです。

{
  "servers": {
    "my-api": {
      "type": "http",
      "url": "https://example.com/mcp",
      "oauth": {
        "clientId": "example-client-id"
      }
    }
  }
}

OAuth認証に対応したServerでは、初回接続時にブラウザが開き、認証処理が行われる場合があります。

利用できるOAuth設定はMCP Server側の仕様にも依存するため、各Serverのドキュメントも確認してください。

ユーザー全体でMCP Serverを利用する方法

特定のプロジェクトだけではなく、複数のワークスペースから同じMCP Serverを利用したい場合は、ユーザー設定として登録できます。

コマンドパレットから次のコマンドを利用します。

MCP: Open User Configuration

ユーザー設定へ追加したMCP Serverは、そのVSCodeユーザープロファイルから利用できます。

たとえば次のような汎用MCP Serverに向いています。

GitHub
ブラウザ操作
社内API
ドキュメント検索
共通データベース
汎用CLIツール

`.vscode/mcp.json`と`.mcp.json`の違い

MCP設定では、ファイルの違いを理解しておくことが重要です。

`.vscode/mcp.json`

通常のVSCodeワークスペースでMCP Serverを設定するときに使用します。

.vscode/mcp.json

特定のプロジェクト専用のMCP設定に向いています。

`.mcp.json`

Agent Hostや他のCopilot系ツールとの互換性を重視する場合は、ワークスペース直下の.mcp.jsonを利用できる場合があります。

.mcp.json

ただし、.vscode/mcp.jsonと.mcp.jsonでは、利用するホストや環境によって扱われ方が異なるため注意が必要です。

ユーザー単位のポータブル設定

ユーザー単位では次のような設定ファイルが利用される場合があります。

~/.copilot/mcp-config.json

Agent Hostを利用する場合は、これらの設定ファイルの違いを確認しておくとよいでしょう。

Agent Host利用時の注意点

Agent Hostは.vscode/mcp.jsonをそのまま直接読み込むわけではありません。

通常はVSCode側からMCP設定がAgent Hostへ転送されます。

ただし、${input:...}のように対話的な入力を必要とする一部のServerは、転送できない場合があります。

そのため、Agent Hostとの互換性を重視する場合は、.mcp.jsonやユーザー単位のMCP設定を利用する方法も検討します。

MCP Serverを起動する方法

設定したMCP Serverは、VSCodeのコマンドパレットから管理できます。

次のコマンドを実行します。

MCP: List Servers

登録済みのMCP Serverが表示されます。

Serverによっては、次のような操作を行えます。

Start
Stop
Restart
Show Output

MCP Serverが正常に動作しない場合は、まずShow Outputなどからログを確認すると原因を特定しやすくなります。

MCP Serverを自動起動する方法

VSCodeには、MCP Serverの自動起動に関する設定があります。

chat.mcp.autostart

設定内容に応じて、新しく追加されたServerや更新されたServerを自動的に起動できます。

ただし、この設定はExperimental扱いとなる場合があります。

将来的に名称や動作が変更される可能性があるため、VSCodeの最新版ドキュメントを確認してください。

MCPツールをAIエージェントから利用する方法

MCP Serverを設定しただけでは、すべてのToolが自動的に使われるとは限りません。

VSCodeのChat画面からToolsを確認し、必要なMCP Toolを有効にします。

Tools画面では、たとえば次のように分類されます。

Built-in Tools
MCP Server
Extension Tools

必要なMCP Toolを有効化した状態で、Agentへ処理を依頼します。

たとえばブラウザ操作系MCP Serverを設定している場合、次のような指示ができます。

このWebページを開いて、フォームが正常に送信できるか確認してください。

利用可能なMCP Toolが適切であれば、AIエージェントがToolを選択して処理を実行します。

MCP Serverが表示されない場合の対処方法

`mcp.json`の保存場所を確認する

ワークスペース単位で設定している場合は、次の場所に保存されているか確認してください。

.vscode/mcp.json

.vscodeフォルダーの中にmcp.jsonが存在する必要があります。

JSONの文法エラーを確認する

JSONに文法エラーがあると、MCP Serverを正しく読み込めません。

たとえば次のJSONは,が抜けています。

{
  "servers": {
    "my-server": {
      "command": "npx"
      "args": []
    }
  }
}

正しくは次のようになります。

{
  "servers": {
    "my-server": {
      "command": "npx",
      "args": []
    }
  }
}

VSCodeではmcp.jsonに対して補完やエラー表示が行われるため、設定ミスの確認にも利用できます。

`npx`が見つからない場合の対処方法

Node.js系MCP Serverを利用していると、次のようなエラーが発生する場合があります。

spawn npx ENOENT

この場合は、ターミナルで次のコマンドを確認します。

node --version

npm --version

npx --version

コマンドが認識されない場合は、Node.jsがインストールされていないか、PATHが正しく設定されていない可能性があります。

Python系MCP Serverが起動しない場合

Pythonで作成されたMCP Serverでは、環境によって実行コマンドが異なる場合があります。

たとえば次の設定があります。

{
  "servers": {
    "python-mcp": {
      "type": "stdio",
      "command": "python",
      "args": [
        "server.py"
      ]
    }
  }
}

OSやPythonのインストール方法によっては、pythonではなく次のコマンドが必要です。

python3

または、Windowsでは次のコマンドを使用する場合もあります。

py

Python仮想環境を使用している場合は、仮想環境内のPython実行ファイルを指定する必要があるケースもあります。

MCP Serverのログを確認する方法

MCP Serverが正常に起動しない場合は、ログを確認します。

コマンドパレットから次を開きます。

MCP: List Servers

対象Serverを選択し、出力やログを確認します。

よくある原因には次のものがあります。

実行コマンドが見つからない
npmパッケージが存在しない
Node.jsのバージョンが対応していない
Pythonの実行環境が異なる
APIキーが間違っている
URLが間違っている
認証に失敗している
Serverが起動直後に終了している

MCP Serverが起動しない場合は、設定ファイルだけでなく、Server側のエラーログも確認することが重要です。

MCP ServerのTrustに注意する

MCP Serverは、ローカルファイルやネットワーク、外部サービスへアクセスできる場合があります。

そのため、信頼できるMCP Serverだけを利用してください。

VSCodeでは、MCP Serverを追加・起動するときにTrust確認が表示される場合があります。

ただし、設定方法や起動方法によってはTrust確認が必ず表示されるとは限りません。

特にmcp.jsonの実行内容は、自分でも確認することが重要です。

たとえば次のような権限を持つServerには注意が必要です。

ローカルファイルの読み書き
シェルコマンドの実行
ネットワーク通信
GitHubなどの外部サービス操作
データベース操作

知らない提供元のMCP Serverを安易に実行しないようにしてください。

MCP ServerをSandboxで実行する方法

macOSやLinuxでは、対応するローカルMCP ServerをSandbox内で実行できます。

設定例は次のとおりです。

{
  "servers": {
    "my-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@example/mcp-server"
      ],
      "sandboxEnabled": true
    }
  },
  "sandbox": {
    "filesystem": {
      "allowWrite": [
        "${workspaceFolder}"
      ]
    },
    "network": {
      "allowedDomains": [
        "api.example.com"
      ]
    }
  }
}

Sandboxを利用すると、MCP Serverがアクセスできるファイルやネットワーク通信先を制限できます。

ただし、2026年9月時点では、MCP SandboxはWindowsでは利用できません。

また、Sandbox化されたMCP Serverでは、Tool Callの承認方法が通常のServerと異なる場合があります。

Remote環境でMCP Serverを利用する場合の注意点

VSCodeでは、SSH、WSL、Dev Containers、CodespacesなどのRemote環境でもMCP Serverを利用できます。

ただし、MCP Serverをどこへ設定したかによって、実行場所が変わる点に注意してください。

たとえばUser Profileに設定したServerは、基本的にローカル環境で実行されます。

一方、Remote環境側でMCP Serverを実行したい場合は、Workspace設定やRemote User Configurationへ設定する必要があります。

ローカルPCとRemote環境のどちらでServerを動かしたいのかを決めてから設定すると、トラブルを避けやすくなります。

MCP Serverをチームで共有する方法

プロジェクトメンバー全員で同じMCP Serverを利用したい場合は、.vscode/mcp.jsonをGit管理できます。

たとえば次のファイルをリポジトリへ含めます。

.vscode/mcp.json

ただし、次のような秘密情報を直接書き込まないようにしてください。

APIキー
アクセストークン
パスワード
秘密鍵

秘密情報はinputsやenvFileなどを利用して管理する方が安全です。

MCP GalleryからServerを探す方法

VSCodeでは、ExtensionsビューからMCP Serverを探すこともできます。

Extensionsを開き、次のように検索します。

@mcp

利用可能なMCP Serverを確認し、インストールできます。

ワークスペース単位で利用する場合は、Workspace向けインストールを選択できる場合があります。

手動でmcp.jsonを書くのが難しい場合は、Galleryから導入する方法も便利です。

VSCodeでMCP Serverを設定するときの基本手順

初めてMCP Serverを設定する場合は、次の流れで進めると分かりやすいでしょう。

VSCodeを新しいバージョンへ更新する。
AI機能を利用できる状態にする。
Ctrl + Shift + Pでコマンドパレットを開く。
MCP: Add Serverを実行する。
WorkspaceまたはUser Configurationを選択する。
.vscode/mcp.jsonなどへServer設定を追加する。
MCP: List ServersでServerを確認する。
MCP Serverを起動する。
必要に応じてTrustや認証を確認する。
ChatのToolsからMCP Toolを有効にする。
AgentへMCP Toolを利用する指示を出す。

特定のプロジェクトだけで利用するなら.vscode/mcp.jsonが分かりやすい方法です。

複数のプロジェクトで共通利用する場合は、ユーザー単位の設定を利用します。

Agent Hostとの互換性まで考慮する場合は、.mcp.jsonなども選択肢になります。

MCP Serverを設定するときの注意点

MCP Serverは非常に便利ですが、AIへ実際の操作権限を与える仕組みでもあります。

単にAIへ追加情報を渡すだけではありません。

MCP Serverによっては、ファイル削除、GitHub操作、シェルコマンド実行、データベース更新などが可能になる場合があります。

そのため、次の点を意識してください。

信頼できるMCP Serverだけを利用する
APIキーをJSONへ直接書かない
Gitへ秘密情報をコミットしない
必要以上の権限を与えない
ログを確認して挙動を把握する
可能であればSandboxを利用する
Remote環境ではServerの実行場所を確認する

セキュリティを意識しながら利用することが重要です。

まとめ

VSCodeでMCP Serverを設定する場合、最も基本的な方法は.vscode/mcp.jsonを利用する方法です。

ローカルMCP Serverであれば、次のような構成が基本になります。

{
  "servers": {
    "my-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "example-mcp-server"
      ]
    }
  }
}

リモートMCP Serverであれば、次のような設定が基本です。

{
  "servers": {
    "my-server": {
      "type": "http",
      "url": "https://example.com/mcp"
    }
  }
}

特に重要なのは、stdioとhttpの違い、.vscode/mcp.jsonと.mcp.jsonの違い、APIキーなどの秘密情報を直接書かないこと、信頼できるMCP Serverだけを利用することです。

MCPを活用すると、VSCodeのAIエージェントを単なるコード生成ツールではなく、外部サービスやローカル環境を操作できる開発エージェントとして活用しやすくなります。

以上、VSCodeでMCP Serverを設定する方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

VSCodeでMCP Serverを設定する方法

採用はこちら

MCP Serverとは

VSCodeでMCP Serverを設定する前の準備

VSCodeを新しいバージョンへ更新する

AI機能が有効になっていることを確認する

コマンドパレットからMCP Serverを追加する方法

コマンドパレットを開く

MCP Server追加コマンドを実行する

.vscode/mcp.jsonでMCP Serverを設定する方法

ローカルMCP Serverを設定する方法

Node.js系MCP Serverの設定例

typeの意味

commandの意味

argsの意味

Playwright MCP Serverを設定する例

HTTP接続のMCP Serverを設定する方法

SSEを明示的に指定する

GitHub MCP Serverを設定する例

環境変数をMCP Serverへ渡す方法

envFileから環境変数を読み込む方法

APIキーを安全に入力する方法

HTTP MCP Serverへ認証情報を渡す方法

OAuth認証を利用する方法

ユーザー全体でMCP Serverを利用する方法

.vscode/mcp.jsonと.mcp.jsonの違い

.vscode/mcp.json

.mcp.json

ユーザー単位のポータブル設定

Agent Host利用時の注意点

MCP Serverを起動する方法

MCP Serverを自動起動する方法

MCPツールをAIエージェントから利用する方法

MCP Serverが表示されない場合の対処方法

mcp.jsonの保存場所を確認する

JSONの文法エラーを確認する

npxが見つからない場合の対処方法

Python系MCP Serverが起動しない場合

MCP Serverのログを確認する方法

MCP ServerのTrustに注意する

MCP ServerをSandboxで実行する方法

Remote環境でMCP Serverを利用する場合の注意点

MCP Serverをチームで共有する方法

MCP GalleryからServerを探す方法

VSCodeでMCP Serverを設定するときの基本手順

MCP Serverを設定するときの注意点

まとめ

関連記事

`.vscode/mcp.json`でMCP Serverを設定する方法

`type`の意味

`command`の意味

`args`の意味

`envFile`から環境変数を読み込む方法

`.vscode/mcp.json`と`.mcp.json`の違い

`.vscode/mcp.json`

`.mcp.json`

`mcp.json`の保存場所を確認する

`npx`が見つからない場合の対処方法