MCPサーバーを開発環境に導入してみる

初めに

こちらの記事を見て、筆者は思いました。
これ、VscodeのSettingで設定しているということは、Devcontainerに突っ込めるんじゃね？
→意外と簡単に行けたので、せっかくなので記事にしてみました。

MCPサーバーとは

筆者の理解では、AIからAPIをたたくためのプロトコルです(間違ってたらすみません)
→MCPを使うことでいろいろなAPIを実行することができます(あら便利)

VScodeでMCPサーバーを動かす方法

setting.jsonに記載すればよいそうです。詳細は以下の記事をご確認ください。

setting.jsonにこんな感じで追記すればよいです。

devcontainerで動かす

setting.jsonにかけるのであれば、devcontainer.jsonのsettingに追記してしまえばよいのです。

devcontainer.json

{
  "name": "mcp",
  "build": {
    "dockerfile": "Dockerfile" // 相対パス表記
  },
  // VScodeの設定
  "customizations": {
    "vscode": {
      // 拡張機能のインストール
      "extensions": [],
      // setting.jsonの設定
      "settings": {
        "mcp": {
          "inputs": [],
          "servers": {
            "file_server": {
              "command": "npx",
              "args": [
                "-y",
                "@modelcontextprotocol/server-filesystem",
                "/workdir",
                "/workspaces/mcp_test"
              ],
              "env": {}
            }
          }
        }
      }
    }
  }
}

とはいっても、これだけだと動かないので、dockerfileにnpmと必要なmcpサーバーをインストールします。aptで入れていますが、もう少しいい方法ないかなぁ。
今回はとりあえず、server-filesystemを入れています

Dockerfile

FROM python
USER root

######################
# MCPサーバーのインストール
WORKDIR /workdir
RUN apt -y update && apt -y upgrade && apt -y install npm
# ファイル操作用のモジュールをインストール
RUN npm install @modelcontextprotocol/server-filesystem
######################

利用するとき

Copilotでエージェントモードをで利用してください(もしかすると何かしら契約いるかも)。

利用するのサーバーの機能は、右下の工具マークから選択できます。

使ってみると、こんな感じ。うまくいった。

終わりに

今回は、server-filesystemを使っていますが、ほかにもいろんなMCPサーバーがあるのでいろいろ試してみると面白いかもです。

今回作ったものは、gitにも上げているので興味があれば試してみてください。