Supabase MCPをCopilotで接続して試してみる

はじめに

先日、社内の勉強会でお題としてMCPとか〜という文脈があり、話のきっかけになればと思い書いてみました。
Supabaseのアップデート情報にて Supabase MCP Serverの記事が公開されていたため、Supabase愛用者の私として触っておかねばと思い、設定方法などをまとめておきます。

設定方法

普段はVS CodeでCopilotを利用しているので、VS Code Copilotでのセットアップ方法で試してみます。

適当にディレクトリを作成して、.vscodeディレクトリ内へmcp.jsonを設定します。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "supabase-access-token",
      "description": "Supabase personal access token",
      "password": true
    }
  ],
  "servers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest"],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "${input:supabase-access-token}"
      }
    }
  }
}

ディレクトリ構成

.vscode
 └─ mcp.json

設定が済んだら「起動」をクリックします。

アクセストークンの入力が求められるので入力します。こちらのページより確認・生成が可能です。

試してみる

自作した家計簿アプリのデータベースにデータをinsertしてもらいましょう。
Copilotをエージェントに切り替えて、下記の依頼します。

supabaseにて、本日の日付でカテゴリー：食費、サブカテゴリー：朝ごはんを支出321円として追加して。
detailにはセブンイレブンを記入。

UI・DBどちらでも、データが追加されていることが確認できました。

本日の支出合計を出力してみてもらいます。

supabaseにて、本日の日付の支出合計値を教えて。

4/13の合計値が正しく出力されていることが確認できました。

まとめ

今回はSupabase MCPをCopilot経由で利用し簡単な操作を行ってみました。
次回は複数のMCPサーバーを利用する際の設定方法と実践的な利用方法についてまとめます。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。