🦁

超シンプルなSupabaseのリモートMCPサーバーを作ってデプロイする

2025/06/12に公開

Cloudflare

Supabase

Model Context Protocol

tech

公式のSupabaseMCPサーバーは機能が盛り盛りすぎる & 細かい設定ができない
SSE・Stremable HTTP形式のMCPサーバーを作ってみたかった

これらの理由から自前のMCPサーバーを作ってみることにしました。

なお、本実装に関してはazukizausaさんの記事をかなり参考にさせていただきました。

機能

SSEおよびStremable HTTP形式のSupabase MCPサーバーを作成
指定したプロジェクトに対してSQLを実行
任意の操作（INSERTのみなど）を指定可能

使い方

事前準備

Supabaseから以下の情報を取得しておいてください。

アクセストークン → https://supabase.com/dashboard/account/tokens
プロジェクトID ↓

また、デプロイしたい場合は Cloudflare のアカウントが必要です。

サーバー準備

まずはローカルにクローンします。
改修前提ならフォークでも良いと思います。

git clone https://github.com/tegnike/supabase-simple-http-mcp-server.git
cd supabase-simple-http-mcp-server

ライブラリをインストールしてサーバーを起動します。

npm install
npm run dev

これでMCPサーバーが起動しました。

クライアント側の設定

以下はSSEの場合の設定例ですが、Stremable HTTPでも同じように設定できます。
SUPABASE_AUTH_TOKEN や SUPABASE_PROJECT_REFには、先程取得したアクセストークンとプロジェクトIDを指定してください。

Claude Desktop

{
  "mcpServers": {
    "filesystem": {
      "command": "/Users/user/.volta/bin/npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse",
        "--header",
        "Authorization: Bearer ${SUPABASE_AUTH_TOKEN}",
        "--header",
        "X-Project-Ref: ${SUPABASE_PROJECT_REF}"
      ],
      "env": {
        "SUPABASE_AUTH_TOKEN": "supabase_access_token",
        "SUPABASE_PROJECT_REF": "supabase_project_ref"
      }
    }
  }
}

Cursor

{
  "mcpServers": {
    "supabase": {
      "url": "http://localhost:8787/sse",
      "headers": {
        "Authorization": "supabase_access_token",
        "X-Project-Ref": "supabase_project_ref"
      }
    }
  }
}

Mastra

※ MastraはMCP SDKのバグによりrequestInitとeventSourceInitの両方を設定する必要があるそうです。

参考: リファレンス: MCPClient | ツール管理 | Mastra ドキュメント

const mcp = new MCPClient({
  servers: {
    supabase: {
      url: new URL(process.env.SUPABASE_MCP_URL || ""),
      requestInit: {
        headers: {
          "Authorization": `Bearer ${process.env.SUPABASE_ACCESS_TOKEN}`,
          "X-Project-Ref": process.env.SUPABASE_PROJECT_REF || ""
        }
      },
      eventSourceInit: {
        fetch(input: Request | URL | string, init?: RequestInit) {
          const headers = new Headers(init?.headers || {});
          headers.set("Authorization", `Bearer ${process.env.SUPABASE_ACCESS_TOKEN}`);
          headers.set("X-Project-Ref", process.env.SUPABASE_PROJECT_REF || "");
          return fetch(input, {
            ...init,
            headers,
          });
        },
      },
    },
  },
});

カスタム設定

セキュリティ設定をカスタマイズするには、src/config/custom-security.tsファイルを編集してください。このファイルは可変設定専用で、デフォルト設定を上書きできます：

// src/config/custom-security.ts
export const CUSTOM_SECURITY_CONFIG: Partial<SecurityConfig> = {
  // 特定の操作のみ許可
  allowedSqlOperations: ['SELECT', 'INSERT', 'UPDATE'],
  
  // 特定のテーブルのみアクセス許可（空配列で全カラム許可）
  allowedColumns: { 
    'users': ['id', 'name', 'email', 'created_at'],
    'posts': ['id', 'title', 'content', 'author_id', 'created_at'],
    'categories': ['id', 'name', 'description'],
    'comments': ['id', 'content', 'post_id', 'author_id', 'created_at']
  },
  
  // allowedColumns無視で全テーブルアクセス許可（非推奨）
  // allowAllTables: true,
  
  // 最大行数を制限
  maxResultRows: 100
}

デプロイ

デプロイは現在の設定ではCloudflareにされるようになっています。
まずはログインします。

npx wrangler login

デプロイします。

-> % npm run deploy

> supabase-simple-http-mcp-server@0.0.0 deploy
> wrangler deploy


 ⛅️ wrangler 4.19.1
───────────────────
Total Upload: 785.99 KiB / gzip: 137.27 KiB
Worker Startup Time: 24 ms
Your Worker has access to the following bindings:
Binding                           Resource            
env.MCP_OBJECT (SupabaseMCP)      Durable Object      

Uploaded supabase-simple-http-mcp-server (5.97 sec)
Deployed supabase-simple-http-mcp-server triggers (2.57 sec)
  https://xxxxxxxxxxxxxxxx
Current Version ID: xxxxxxxxxxxxxxxx

https://xxxxxxxxxxxxxxxx の部分がMCPサーバーのURLになるので、ローカルの http://localhost:8787 をそのまま置換すれば利用できます。

Claude Codeで改造する

本リポジトリはかなりシンプルな構成になっているので、これを利用してSupabaseツールの追加、または完全に別のMCPサーバーへと作り変えることも可能です。

⚠ すでに CLAUDE.md は作成済みです。
⚠ Claude Codeとしていますが、CursorなどのAIコーディングエージェントでも同じ事が可能なはずです。

例1: ファイルのアップロードツールを追加する

-> % claude

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > @src/supabaseMcp.ts このファイルに、ファイルをアップロードするためのツールを追加してください。必要に応  │
│   じて次のURLの内容を確認すること https://github.com/modelcontextprotocol/typescript-sdk                  │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────╯

例2: Slack MCPサーバーに作り変える

-> % claude

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > @src/supabaseMcp.ts このファイルを参考に、Slackへメッセージを投稿するためのMcpAgentを作成してください   │
│   。必要に応じて次のURLの内容を確認すること https://github.com/modelcontextprotocol/typescript-sdk        │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────╯