様々なMCPサーバーをGitHub Copilotで使う
今回はGitHub CopilotでMCPサーバーを使う際の設定をまとめます。
MCPサーバーとは
MCPは、アプリケーションがLLMにコンテキストを提供する方法を標準化するオープンプロトコルです。
ざっくりいうと「各MCPサーバーを経由することで、AIは追加情報を得た上で回答や修正を行うことが出来るようになる」といったイメージです。
例えば
- FigmaのMCPサーバーを利用し、Figma上で作成したコンポーネントの情報を取得してCopilotにコードを書いてもらう
- GitHubのMCPサーバーを利用し、Issueの内容を読み込んだ上でCopilotにコードを書いてもらう
などが可能になり、グッとAIの利用幅を広げることが出来ます。
VSCodeのMCPサーバー設定方法
1.設定を開く
VSCode左下の歯車アイコンから、設定を開く
2.setting.jsonを開く
「mcp」で検索すると、「setting.jsonで編集」という項目が出てくるので開く
3.必要な情報をmcp内に追記 → 起動
各MCPの設定をmcp > servers内に追記すると自動で「起動」の文字が出るので押下
"mcp": {
"servers": {
// 各MCPの設定を追加する
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse"
}
}
},
4.Copilotをエージェントモードにして会話する
Copilotをエージェントモードに切り替え、会話するとMCPサーバーを経由して情報を取得した上で回答や修正を行ってくれる
Figma
Figmaの公式MCPサーバーです。
コンポーネントの情報を取得したり、local-variableの取得なども可能です。
1.FigmaでMCPサーバーを有効に
- Figmaデスクトップアプリを開き、アクションから「mcp」で検索
- 「Dev Mode MCPサーバーを有効にする」にチェック
2.VSCodeのmcpに設定追加 → 起動
"chat.mcp.discovery.enabled": true,
"mcp": {
"servers": {
"Figma Dev Mode MCP": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse"
}
}
},
"chat.agent.enabled": true
3.Copilotと会話する
Figma上でコンポーネントをダブルクリックして選択状態にし、Copilotに指示を出すとコンポーネントの情報を読み取った上で作業を行ってくれる
GitHub
GitHubの公式MCPサーバーです。
1.VSCodeのmcpに設定追加 → 起動
"mcpServers": {
"github": {
"url": "https://api.githubcopilot.com/mcp/",
}
}
2.権限付与
起動させると、Webサイト上で権限の付与を求められる → そのまま進むと設定完了
※権限を制限したい場合
tokenを利用し、権限の範囲を制限したい場合はtokenを発行後下記のように設定
※例えばread権限のみ付与したい場合などに利用
{
"mcpServers": {
"github": {
"url": "https://api.githubcopilot.com/mcp/",
"headers": {
"Authorization": "Bearer {token}"
}
}
}
Playwright
Playwrightの公式MCPサーバーです。
E2Eテストを書いてくれる他、ブラウザ操作して情報を取得する(スクレイピング)などにも利用出来ます。
1.必要なライブラリのinstall
npm install -g @playwright/mcp
2.VSCodeのmcpに設定追加 → 起動
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
Jira, Confluence
2025年6月現在、公式MCPはClaudeのみ対応のためCopilot対応を待機。
まとめ
MCPサーバーを活用し、AIでのコーディングライフを充実させましょう💪
こちらも随時チェック
Discussion