VS Code の GitHub Copilot で Supabase MCP Server を動かしてみる

はじめに

https://supabase.com/blog/mcp-server?utm_source=newsletter&utm_medium=email&utm_campaign=updates_march_2025
Supabase の新しい MCP（Model Context Protocol）Server で、AI ツールから Supabase を直接操作できるようになりました。
以前からテーブルスキーマの型定義を取得するのが手間だと感じていたため、MCP を使って GitHub Copilot と連携できるか試してみました。

※先日 Insiders 版のみであった GitHub Copilot Agent Mode も、安定版向けに公開されました。また、MCP が Public Preview で利用可能になっています。
Vibe coding with GitHub Copilot: Agent mode and MCP support rolling out to all VS Code users

※MCP そのものについてはこちらを参照ください。
Introduction - Model Context Protocol
"MCP は AI アプリケーションの USB-C ポートのようなもの" という表現がなんともおもしろいですね 🫠

環境

Windows 11
Visual Studio Code（1.99.2）
GitHub Copilot Pro（Claude Sonnet 3.7）

手順

基本はこの手順に沿っていきます。
VS Code で MCP サーバーを使用する (プレビュー)
Supabase の設定内容はこちらを参考にしています。
Model context protocol (MCP) | Supabase Docs

Supabase で Personal access token の発行

Supabaseの設定にアクセスし、トークンを作成し控えておきます。
※一度しか表示されないようなのでご注意ください。

NPM パッケージをインストール

以下のパッケージをインストールします。
npm install @supabase/mcp-server-supabase --save-dev

MCPサーバーを追加

プロジェクト直下に.vscode/mcp.jsonを作成します。

mcp.json

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

上記設定により、機密情報をコードに直接書かずに入力変数として扱えます。
（キャプチャを撮り忘れましたが、初回実行時にトークンの入力を求められるようになります。）
また、構成された MCP サーバーはコマンドパレット（Ctrl + Shift + P）から MCP: List Servers で確認できます。

Windows の場合の注意点
Supabase の記事では、Windows ユーザーはcmd /cをつける必要があるとされています。

Some clients expect a slightly modified JSON format, and Windows users will have to prefix this command with cmd /c. For detailed step-by-step instructions for each client and OS, see our MCP documentation.

しかし、手元の Windows 環境では npx で始まる設定でも問題なく動作しました。
今回は念のため、指示通り cmd /c のままとしています。

macOS/Linux の方は公式にあるとおり、npx から始まる以下の形式でよいと思います。

{
  "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}"
      }
    }
  }
}

mcp.json を構成しただけで GitHub Copilot Chat がうまく機能しない場合は、
Agent Mode のチャット欄左上で「New tool available」と出ているところをクリックすると、Supabase の MCP サーバーが使えるようになりました。

エディタ上の「Add Server...」やコマンドパレットから MCP: Add Server を利用した場合はこの手順は不要かもしれません。

MCPサーバーの起動

サーバー追加後も、起動していないと正しく動作してくれません。

方法1. エディターから直接起動
VS Code エディタ上で「Start」

方法2. コマンドパレットから起動

• コマンドパレットから MCP: List Servers を選択
• 該当のサーバー（supabase）を選択
  

動作確認

GitHub Copilot Chat で実際に利用してみます。

プロジェクト情報の取得

手始めに、プロジェクト情報を取得してみます。
Q.

supabaseのプロジェクト情報を教えてください。

A.
該当のツールがリクエストされ、

「Continue」をクリックすると
プロジェクト名、プロジェクトIDやデータベース情報などが表示されました。（一部意図的な伏せ字あり）

GitHub Copilot
Used 1 reference
Ran list_projects
Supabaseプロジェクトの情報を取得しました。xxxで使用しているプロジェクトの詳細は以下の通りです：

プロジェクト基本情報

• プロジェクト名: xxx
• プロジェクトID: xxx
• 組織ID: xxx
• リージョン: xxx
• ステータス: ACTIVE_HEALTHY（正常稼働中）

データベース情報

• データベースホスト: xxx
• PostgreSQLバージョン: xxx
• データベースエンジン: PostgreSQL 15
• リリースチャネル: ga（一般公開版）

その他の情報

• 作成日時: xxx

チャット欄の「Select Tools...」から確認してみると、list_projects 以外にもいろいろなコマンドが用意されているようでした。

TypeScript 型生成

本命の型生成です。
前提として、既存のプロジェクトで、新しく「unknown」というテーブルを新規作成しました。
（フィールドは id、created_at の初期値のみです。）
Supabase のスキーマの型は src/lib/supabase.types.ts にあります。

あえてテーブル名を伏せて抽象的に依頼してみました。
Q：

新しく追加したテーブルのスキーマを更新してください。

A：
テーブル名も正しく特定され、想定通りの型定義が提案されました ✨（一部意図的な伏せ字あり）

GitHub Copilot
Used 1 reference

Supabaseのデータベーススキーマ情報を取得して、テーブルスキーマを更新するために、まずはプロジェクト情報を取得し、その後にデータベース構造を調査します。

Ran list_tables

Supabaseのデータベーススキーマ情報を取得しました。新しく追加されたテーブル「unknown」を確認できました。それでは、supabase.types.tsファイルを更新し、この新しいテーブルのスキーマ定義を追加しましょう。

supabase.types.ts+15-0

supabase.types.ts ファイルに新しく追加された unknown テーブルの型定義を追加しました。このテーブルには以下の構造を持つシンプルなスキーマがあります：

• id - 自動採番の主キー（bigint型）
• created_at - レコード作成日時（timestamp with time zone型）

型定義の追加により、アプリケーション内でこのテーブルに対して型安全な操作が可能になりました。例えば、Supabaseクライアントを使って以下のようにデータを取得できます：

// unknown テーブルからデータを取得する例
const { data, error } = await supabase
  .from('unknown')
  .select('*')
// 型安全なアクセス
const firstRecord = data?.[0]
if (firstRecord) {
  const id: number = firstRecord.id
  const createdAt: string = firstRecord.created_at
  // ...
}

追加したテーブルはシンプルな構造ですが、必要に応じて将来的にフィールドを追加することができます。テーブルに新しいフィールドを追加する場合は、supabase.types.ts ファイルの対応する型定義も更新する必要があります。

supabase.types.ts の提案部分です。

まとめ

今回は型生成を主に行いましたが、テーブルの作成も含めて行ってしまえばもっとフローが改善しそうです。
また、GitHub Copilot の Agent Modeを主に利用しましたが、Ask Mode（通常のチャットでの質問）でも同様に利用できました。

Supabase に限らず、MCP 関連の仕組みが続々と整ってきているので、これから色々と楽しみが膨らみそうです。
一方で、MCP は業務利用ではセキュリティ観点で気をつけることがまだまだありそうな気がしています。

参照情報

Supabase MCP Server
Model context protocol (MCP) | Supabase Docs
supabase-community/supabase-mcp: Connect Supabase to your AI assistants
Use MCP servers in VS Code (Preview)