【Vibe Coding】GitHub Copilot Agent ModeとMCPをステップバイステップで試す

こんにちは、エンジニアの田代です。
前回の記事(https://blog.tech-monex.com/entry/2023/07/07/124657)を投稿してから2年弱が経過してしまいました。

blog.tech-monex.com

この2年間で我々エンジニアを取り巻く環境は大きく変化し、生成AIはもはや開発において必要不可欠となったように思います。
今回の記事では、2025年2月に発表された、生成AIを利用した自律型コーディング支援ツールのGitHub Copilot Agent Modeを試してみます。

Vibe Codingとは

バイブコーディングはAIに依存したプログラミング手法で、人は解きたい問題を、コーディングに特化した大規模言語モデル(LLM)へのプロンプトとして自然言語で記述する。

バイブコーディング - Wikipedia

Vibe Codingとは上述の通り、人間は主に自然言語でAIに指示を出すのみで、AI任せでコーディングを行う開発手法を指します。
このVibe Codingを行うためのVS Code拡張機能がGitHub Copilot(のAgent Mode)です。
また、MCP(Model Context Protocol)とは、GitHub CopilotのようなAIシステムと外部のシステムを接続するための規格であり、開発元のAnthropicは「AIアプリケーション向けのUSB-Cポートのようなもの」と表現しています。

Copilot Agent ModeでREST APIを実装してみる

まずは、GitHub Copilot Agent Modeを利用して、AIへの指示のみでSpring BootのREST APIを実装してみます。

Agent Modeを起動

VS Codeで「GitHub Copilot」、「GitHub Copilot Chat」のExtensionをインストールしたら、Chat画面で「Agent」を選択します。

プロンプトで指示を出す

今回使うプロンプトは下記の3つだけです。

  1. Spring BootのREST APIシステムを開発します。プロジェクトを初期化してください。
  2. `GET /api/sample`で、下記のJSON(SampleDto)を返すエンドポイントを実装してください。
    {"result": "OK"}
  3. アプリケーションを起動してcurlコマンドで動作確認してください。

これらのプロンプトを順番に実行して、単純なREST APIを実装します。

1. Spring BootのREST APIシステムを開発します。プロジェクトを初期化してください。

2. `GET /api/sample`で、下記のJSON(SampleDto)を返すエンドポイントを実装してください。{"result": "OK"}

3. アプリケーションを起動してcurlコマンドで動作確認してください。

無事にSpring Bootアプリケーションが起動して、意図した通りのレスポンスが返ってきました。
この通り、3行のプロンプトを入力するだけで、開発者が直接手を下すことなくアプリケーションの初期化から動作確認まで完了してしまいました。

Filesystem MCP Serverを利用して、ローカルのSwaggerファイルからモックを作成する

次に、Filesystem MCP Serverを試します。
~/Documents/mcp-test/openapi.yamlに保存したサンプルのSwaggerファイルをFilesystem MCP Serverを介して読み込ませ、これを元にモックAPIを実装させます。

openapi: 3.0.3
info:
  title: Customer API
  description: 顧客情報の取得・登録・更新・削除を行う API
  version: 1.0.0
servers:
  - url: http://localhost:8080
paths:
  /api/customer:
    get:
      summary: 顧客一覧を取得
      responses:
        '200':
          description: 顧客一覧の取得成功
          content:
            application/json:
              schema:
              type: array
                items:
                $ref: '#/components/schemas/Customer'
以下省略...
Filesystem MCP Serverの設定

VS Codeのsettings.jsonに下記を追記します。

"chat.mcp.discovery.enabled": true,
"mcp": {
    "inputs": [],
    "servers": {
        "filesystem": {
            "command": "npx",
            "args": [
                "-y",
                "@modelcontextprotocol/server-filesystem",
                "~/Documents/mcp-test"
            ],
        }
    }
}

 

settings.jsonを保存したらChat画面で「Select tools」(工具のアイコン)をクリックして、MCP Server: filesystemが有効になっていることを確認します。

プロンプトで指示を出してモックAPIを実装する

Chat画面で「Add Context...」をクリックして、「read_file」を選択します。これで、Filesystem MCP Server経由でSwaggerファイルを読み込めるようになりました。

それでは、Copilot Agentに下記のプロンプトを与えてみます。

~/Documents/mcp-test/openapi.yamlの内容に基づいて、モックAPIを実装してください。
Workspace外のファイルにアクセスする際はFilesystem MCP Serverでアクセス許可されたファイルのみ利用してください。

 

意図した通り、ソースコードにSwaggerの仕様通りのモックAPIが実装されました。
また、Copilotの出力に「Ran read_file」と表示されていることから、指示通りFilesystem MCP Serverを利用してSwaggerファイルにアクセスしたことが分かります。

まとめ

今回は、GitHub Copilot Agent ModeとMCPを利用したVibe Codingを試してみました。
私が何らコードを書くことなくアプリケーションが実装されていく様を見て、今後の業務の効率化を予感させられた一方で、
各種設定やプロンプトの書き方などについては一定の慣れが必要であるようにも感じました。
これから他のMCPも試してみて、どう実務に落とし込んで行くか探っていきたいと思います。

田代 侑大システム開発部 マネックス・ラボ