🤖

様々なMCPサーバーをGitHub Copilotで使う

に公開

今回はGitHub CopilotでMCPサーバーを使う際の設定をまとめます。

MCPサーバーとは

https://docs.anthropic.com/ja/docs/agents-and-tools/mcp
https://modelcontextprotocol.io/introduction

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内に追記すると自動で「起動」の文字が出るので押下

setting.json
 "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の取得なども可能です。
https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCPサーバー利用ガイド

1.FigmaでMCPサーバーを有効に

  • Figmaデスクトップアプリを開き、アクションから「mcp」で検索
  • 「Dev Mode MCPサーバーを有効にする」にチェック

2.VSCodeのmcpに設定追加 → 起動

setting.json
"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サーバーです。
https://github.com/github/github-mcp-server

https://docs.github.com/ja/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server

1.VSCodeのmcpに設定追加 → 起動

setting.json
  "mcpServers": {
    "github": {
        "url": "https://api.githubcopilot.com/mcp/",
    }
}

2.権限付与

起動させると、Webサイト上で権限の付与を求められる → そのまま進むと設定完了

※権限を制限したい場合

tokenを利用し、権限の範囲を制限したい場合はtokenを発行後下記のように設定
※例えばread権限のみ付与したい場合などに利用

setting.json
{
  "mcpServers": {
    "github": {
        "url": "https://api.githubcopilot.com/mcp/",
        "headers": {
            "Authorization": "Bearer {token}"
        }
    }
}

Playwright

Playwrightの公式MCPサーバーです。
E2Eテストを書いてくれる他、ブラウザ操作して情報を取得する(スクレイピング)などにも利用出来ます。
https://github.com/microsoft/playwright-mcp

1.必要なライブラリのinstall

npm install -g @playwright/mcp

2.VSCodeのmcpに設定追加 → 起動

setting.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Jira, Confluence

2025年6月現在、公式MCPはClaudeのみ対応のためCopilot対応を待機。
https://www.atlassian.com/ja/blog/remote-mcp-server

まとめ

MCPサーバーを活用し、AIでのコーディングライフを充実させましょう💪

こちらも随時チェック
https://code.visualstudio.com/mcp

Discussion