LoginSignup
38
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIエージェントの知見を共有しよう！
@youtoy(Yosuke Toyota)inKDDI株式会社

シンプルな自作MCPサーバーを VS Code に設定して GitHub Copilot の Agent mode で利用（Node.js で TypeScript を直接扱う）

Last updated at Posted at 2025-04-06

はじめに

過去に書いた記事で、「VS Code や　Claude for Desktop で MCPサーバーを軽く試してみる」ということをやってみていました。

●VS Code の設定から MCPサーバーを追加して GitHub Copilot agent mode で利用してみる（安定版でも利用可能に） - Qiita
　https://qiita.com/youtoy/items/adfeedeedf1309f194ce
●今になって Claude for Desktop で MCP に入門してみた（Claude は Free plan） - Qiita
　https://qiita.com/youtoy/items/3ef0af28b530f5c5709c

この時は、Filesystem MCP Server を使っていたのですが、今回はすごく簡易な自作MCPサーバーを作ってみて、それを VS Code から使ってみます。

補足

構成などの補足

構成については、VS Code の標準機能で 自作MCPサーバーを設定して、それを GitHub Copilot の Agent mode で利用する形とします。

また自作MCPサーバーは、公式の TypeScript SDK を使って「ツール」を実装します。その TypeScript のファイルは、nodeコマンドで直接処理する形にします（※ Node v23.6.0 以降の機能を利用）。

実装・手順は、MCPサーバーを使った処理が最低限動くのを確認できるくらいのものにします。

動作している様子

それと、まずは今回の内容を動作させた時の様子を、以下に動画で示します。
テスト用に実装した内容は、「2つの数字を加算した値に、さらに 10を加算する」というものです。

上記の動画で 3回のやりとりをしていますが、2回目で、以下の「このセッションで許可する」を選択しています。

2025-04-06_13-20-35.jpg

そのため、3回目の処理を実行した際は、処理を続行するかどうかのユーザーへの確認なしで、エージェントが処理を実行しています。

今回の内容を試そうと思ったきっかけ

今回の内容を試そうと思ったきかっけを書いてみます。

MCP・MCPサーバー関連の技術情報を追っている中で、MCPサーバーを自作するという話題をいくつも見かけます。
その中で、シンプルな MCPサーバーを実装して動かすという話も見かけていて、自分もそういう方向のものをやってみたくなりました。

実際に試してみる

実際に試していきます。

実装には「公式のページ（modelcontextprotocol/servers: Model Context Protocol Servers のページ）」に書かれている、「公式の Typescript SDK」を使います。

image.png

SDK のページの「Installation」「Quickstart」の内容を見つつ、準備・実装を進めていきます。

この内容の一部を削ったものを使うような形になります。

パッケージのインストール

まずは、パッケージ（@modelcontextprotocol/sdk）のインストールです。

npm install @modelcontextprotocol/sdk

コード

次に、TypeScript で実装するコードの話です。

サンプルコード

公式の Quickstart で示されているサンプルコードは、以下のとおりです。

import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

// Create an MCP server
const server = new McpServer({
  name: "Demo",
  version: "1.0.0"
});

// Add an addition tool
server.tool("add",
  { a: z.number(), b: z.number() },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b) }]
  })
);

// Add a dynamic greeting resource
server.resource(
  "greeting",
  new ResourceTemplate("greeting://{name}", { list: undefined }),
  async (uri, { name }) => ({
    contents: [{
      uri: uri.href,
      text: `Hello, ${name}!`
    }]
  })
);

// Start receiving messages on stdin and sending messages on stdout
const transport = new StdioServerTransport();
await server.connect(transport);

いろいろ試してみたところ、上記のコード内の処理をけっこう削ったものでも、「ツールを使って返答を返す」という最低限の動作をさせられそうでした。

変更したコード

上記のサンプルの内容を削って、以下のシンプルな内容にしたものを使いました。

app.ts
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
  name: "Demo",
  version: "1.0.0",
});

server.tool(
  "add_test",
  "与えられた数値の足し算をする（さらに10を足す）",
  { a: z.number(), b: z.number() },
  async ({ a, b }) => ({
    content: [{ type: "text", text: String(a + b + 10) }],
  })
);

const transport = new StdioServerTransport();
await server.connect(transport);

とりあえず動かすだけなら、これだけの内容でも大丈夫でした。

計算をする処理の部分について、上記の MCPサーバーでの処理を使った出力が得られているかどうかを回答から判別しやすくするため、入力された値にさらに 10 を加算した結果を返すようにしてみました。

それと、MCPサーバーの説明の文章を「server.tool()」の「"add_test"」の後に加えてみています。

VS Code での設定

VS Code で MCPサーバー関連の設定を進めていきます。

冒頭で掲載していた過去の記事と同じ手順で、MCPサーバーの設定を行い、その設定の画面内でサーバーを起動します。
（※ サーバーの起動について、他にコマンドパレットから行うこと方法もあります）

設定内容

今回設定した内容は、以下のとおりです。

{
  "mcp": {
    "servers": {
      "my-mcp-server": {
        "command": "node",
        "args": ["/【ファイルを置いたフォルダの絶対パス】/app.ts"]
      }
    }
  }
}

この設定では、nodeコマンドで TypeScript のファイルを直接実装する構成にしています。

以下の記事にも書いた、Node.js での TypeScript の直接実行ができるかもしれないと思い、上記のように「"command": "node"」の引数に「app.ts」を直接設定する形を試しました。

●Node v23.6.0 で TypeScript を直接実行（フラグなしのデフォルトでの処理） - Qiita
　https://qiita.com/youtoy/items/e7a1aeaea5918c48999b

なお今回、自分が利用した Node.js のバージョンは「v23.11.0」で、TypeScript の直接実行に対応したバージョンを使っています。

image.png

実行結果

GitHub Copilot の Agent mode で、上記で実装したツールを使ってみます。VS Code の安定版の最新版で Agent mode が選択できない場合は、設定から Agent mode の機能を有効化してください。

今回の内容を実行した結果は以下のとおりです。
ツールの実行時にはデフォルトだと確認を求められて、それを許可すると処理が実行されました。

2025-04-06_03-13-43.jpg

以下は、数字の部分を変えたプロンプトで、処理を実行した結果です。

2025-04-06_03-11-07.jpg

その他、試した内容は冒頭に掲載した動画の内容の通りです。

ツール実行の確認を省略する

あと、冒頭の動画掲載部分に書いていた内容ですが、都度ツール実行の確認を求めないようにする設定を以下から選択できます。

2025-04-06_13-20-35.jpg

おわりに

今回、シンプルな自作MCPサーバーを公式の TypeScript SDK を使って実装しました。また、それを VS Code の標準機能で設定して、VS Code の GitHub Copilot agent mode で使ってみました。

ツールを使うだけのシンプルな内容にしてみたので、コードや設定・手順などがかなり少なくてすんだかと思います。

今回の内容は問題なく進められたので、さらに MCPサーバーで実装する処理を変えたものも試したり、より複雑な内容のものをやっていければと思います。

【追記】 Claude for Desktop で使ってみる

その後、自作MCPサーバーを Claude for Desktop でも使ってみて、設定した内容などを記事にしました！

記事

●VS Code で使っていたシンプルな自作MCPサーバーを Claude for Desktop で使う（Node.js ＋ TypeScript SDK） - Qiita
https://qiita.com/youtoy/items/01f8918b378c51989173

試した時の様子

その他

今回のお試しをしている中で、VS Code の公式ページに MCPサーバーの話が書かれたページがあるのを見かけたので、メモの意味も兼ねて掲載してみます。

●Use MCP servers in VS Code (Preview)
　https://code.visualstudio.com/docs/copilot/chat/mcp-servers

image.png

38
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
38
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?