MCP サーバー
Model Context Protocol (MCP) は、AI モデルが統一されたインターフェースを介して外部ツールやサービスと対話できるようにするオープンスタンダードです。Visual Studio Code は MCP クライアントとして機能し、ユーザーがエージェントモードで MCP ツールにアクセスできるようにします。この記事では、VS Code 拡張機能に MCP サーバーを登録する方法について説明します。
VS Code は、ワークスペースフォルダー内の .vscode/mcp.json ファイル、およびワークスペース、リモート、ユーザー設定の mcp セクションから MCP サーバー構成を取得します。また、Claude Desktop を含む他のツールの構成から自動的に検出することもできます。
VS Code 拡張機能は、ユーザーが手動で設定する必要がないように、MCP サーバー構成をプログラムで登録することもできます。これは、すでに MCP サーバーがあり、それを拡張機能のアクティベーションの一部として登録したい場合や、拡張機能が MCP サーバーに依存している場合に役立ちます。
MCP サーバーを使用してチャット機能を拡張する代わりに、拡張機能内で直接言語モデルツールを貢献することもできます。このアプローチは、拡張機能 API を使用して VS Code と深く統合したい場合や、ユーザーが別のプロセスで MCP サーバーをインストールして実行する必要がないようにしたい場合に役立ちます。
VS Code の MCP サポートは現在プレビュー中です。
MCP サーバーの登録
拡張機能に MCP サーバーを登録するには、vscode.lm.registerMcpServerDefinitionProvider API を使用して、サーバーのMCP 構成を提供します。この API は、providerId 文字列と McpServerDefinitionProvider オブジェクトを受け取ります。
このメソッドを呼び出す前に、拡張機能は package.json の contributes.mcpServerDefinitionProviders 拡張ポイントをプロバイダーの id とともに貢献する必要があります。
McpServerDefinitionProvider オブジェクトには 3 つのプロパティがあります
- onDidChangeMcpServerDefinitions: MCP サーバー構成が変更されたときにトリガーされるイベント。
- provideMcpServerDefinitions: MCP サーバー構成の配列 (vscode.McpServerDefinition[]) を返す関数。
- resolveMcpServerDefinition: MCP サーバーを開始する必要があるときにエディターが呼び出す関数。この関数を使用して、認証など、ユーザーとの対話が必要となる可能性のある追加のアクションを実行します。
McpServerDefinition オブジェクトは、以下のいずれかのタイプになります
- vscode.McpStdioServerDefinition: ローカルプロセスを実行し、その標準入力および標準出力ストリームで操作することで利用可能な MCP サーバーを表します。
- vscode.McpHttpServerDefinition: ストリーマブル HTTP トランスポートを使用して利用可能な MCP サーバーを表します。
次の例は、拡張機能に MCP サーバーを登録し、サーバーの起動時にユーザーに API キーを求める方法を示しています。
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
const didChangeEmitter = new vscode.EventEmitter<void>();
context.subscriptions.push(vscode.lm.registerMcpServerDefinitionProvider('exampleProvider', {
onDidChangeMcpServerDefinitions: didChangeEmitter.event,
provideMcpServerDefinitions: async () => {
let servers: vscode.McpServerDefinition[] = [];
// Example of a simple stdio server definition
servers.push(new vscode.McpStdioServerDefinition(
{
label: 'myServer',
command: 'node',
args: ['server.js'],
cwd: vscode.Uri.file('/path/to/server'),
env: {
API_KEY: ''
},
version: '1.0.0'
});
// Example of an HTTP server definition
servers.push(new vscode.McpHttpServerDefinition(
{
label: 'myRemoteServer',
uri: 'http://localhost:3000',
headers: {
'API_VERSION': '1.0.0'
},
version: '1.0.0'
}));
return servers;
},
resolveMcpServerDefinition: async (server: vscode.McpServerDefinition) => {
if (server.label === 'myServer') {
// Get the API key from the user, e.g. using vscode.window.showInputBox
// Update the server definition with the API key
}
// Return undefined to indicate that the server should not be started or throw an error
// If there is a pending tool call, the editor will cancel it and return an error message
// to the language model.
return server;
}
}));
}
package.json ファイルには、対応する contributes/mcpServerDefinitionProviders セクションを含める必要があります。
{
...
"contributes": {
"mcpServerDefinitionProviders": [
{
"id": "exampleProvider",
"label": "Example MCP Server Provider"
}
]
}
...
}
使用を開始する
VS Code 拡張機能で MCP サーバーを登録する完全な例で始めましょう。