アルアカ - Arcadia Academia

最近、何かと話題のMCP(Model Context Protocol)サーバですが、VSCodeに設定する情報があまりなかったので実際に設定し試してみました。ここではGithubのMPCサーバとの連携方法を解説しますが他のMCPサーバも同じ要領で設定可能です。注意点としてはMCPサーバは信頼できるサービスのみ設定するようにしましょう。

まず、大前提であるMCPサーバについて概要をざっくり解説します。
MCP(Model Context Protocol)とはAIが外部サービスの機能を使うためのプロトコルとなっており、MCPサーバは、前述したプロトコルで外部サービスと通信するためのサーバです。

例えば、GithubのMCPサーバを使うことで自然言語でGithubを操作することが可能となります。

VSCODEで歯車のアイコンをクリックし、Settingsを開きましょう。

次に表示された検索バーに「mcp」と打ち込んでください。

そうするとEdit in settings.jsonというリンクが表示されると思うので、そちらをクリックしましょう。

するとsettings.jsonが開いて以下のような項目が挿入されていると思うので、こちらを編集していきましょう。

  "mcp": {
    
    "inputs": [],
    "servers": {
      "mcp-server-time": {
        "command": "python",
        "args": [
          "-m",
          "mcp_server_time",
          "--local-timezone=America/Los_Angeles"
        ],
        "env": {}
      }
    }
  },

以下の公式ドキュメントの「Usage with Claude Desktop」に例が載っているので今回はNPXを参考に設定していきいます。

# NPX
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
      }
    }
  }
}

settings.jsonのserversを以下のように編集しましょう。<YOUR_TOKEN>はGithubでGenerate new tokenし設定してください。Githubのトークンは、秘匿情報になるので取り扱いには十分に注意してください。
またアクセストークンのパーミッション設定は、あとからでも変更可能なので、ContentsをRead and writeに設定し、あとは必要に応じて設定を追加しましょう。

  "mcp": {
    "inputs": [],
    "servers": {
      "github": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-github"
        ],
        "env": {
          "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
        }
      }
    }
  },

これでVSCODEのGitHub Copilot からGithubを操作できるようになります。

こんな風に自然言語で操作できます。

現在、大型Saasは、公式のMCPサーバをどんどん公開しておりMCPは、間違いなく流れがきていると感じる技術です。エンジニアのみなさんはこれから使う機会が増えていくと思われますので今のうちにしっかりキャッチアップしておきましょう！