What is Supabase Simple Http Mcp Server

supabase-simple-http-mcp-server is a Cloudflare Workers implementation of a Model Context Protocol (MCP) server that integrates with Supabase, supporting both Server-Sent Events (SSE) and Streamable HTTP connections.

Use cases

Use cases include building real-time chat systems, interactive data visualization tools, and applications that require seamless integration between AI models and a database.

How to use

To use supabase-simple-http-mcp-server, clone the repository, install dependencies, configure your Cloudflare account, and run the development server. You can then deploy it to Cloudflare Workers.

Key features

Key features include SSE support for real-time communication, Streamable HTTP endpoints for MCP protocol, stateful connection handling with Durable Objects, TypeScript for type safety, and direct integration with Supabase for database operations.

Where to use

supabase-simple-http-mcp-server can be used in applications requiring real-time data updates, such as chat applications, live dashboards, and interactive web applications that utilize AI models.

Supabase Simple HTTP MCP サーバー

Supabase統合を備えたMCP（Model Context Protocol）サーバーのCloudflare Workers実装で、SSE（Server-Sent Events）とStreamable HTTP接続の両方をサポートします。

概要

このプロジェクトは、Cloudflare Workers上で動作するMCPサーバーを提供し、ステートフルな接続にDurable Objectsを活用します。Model Context Protocolを実装して、AIモデルが標準化されたインターフェースを通じてSupabaseデータベースと対話できるようにします。

こちらの記事でも紹介しています。

https://zenn.dev/nikechan/articles/10ba0e4fe21d49

機能

• SSEサポート: リアルタイム通信のためのServer-Sent Eventsエンドポイント
• Streamable HTTP: MCPプロトコル用の標準HTTPエンドポイント
• Durable Objects: CloudflareのDurable Objectsを使用したステートフルな接続処理
• TypeScript: TypeScriptによる完全な型安全性
• Supabase統合: データベース操作のためのSupabaseとの直接統合
• 🔒 セキュリティ機能: SQL実行の制限とホワイトリスト機能
  • SELECT文のみ許可（DELETE、DROP等の危険な操作を防止）
  • テーブル・カラムのアクセス制限
  • 禁止キーワードの検出
  • 最大取得行数の制限

前提条件

• Node.js（v18以上）
• Cloudflareアカウント
• Wrangler CLIがグローバルまたはnpx経由でインストール済み
• Supabaseプロジェクト（統合用）

インストール

1. リポジトリをクローンします：

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

2. 依存関係をインストールします：

npm install

3. Cloudflareアカウントを設定します：

npx wrangler login

開発

開発サーバーを起動します：

npm run dev

サーバーは以下で利用可能になります：

• SSE: http://localhost:8787/sse
• Stremable HTTP: http://localhost:8787/mcp

MCPクライアントの設定

以下はSSEの場合の設定例ですが、Stremable HTTPでも同じように設定できます。

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,
          });
        },
      },
    },
  },
});

デプロイ

Cloudflare Workersにデプロイします：

npm run deploy

設定

セキュリティ設定

重要: 本番環境では必ずセキュリティ設定を適切に構成してください。

設定ファイルの場所

• src/config/security.ts - デフォルトセキュリティ設定と型定義
• src/config/custom-security.ts - カスタムセキュリティ設定（ユーザー編集用）

カスタム設定

🔧 設定の変更方法

セキュリティ設定をカスタマイズするには、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
}

Wrangler設定

wrangler.jsoncファイルにはCloudflare Workersの設定が含まれています：

• Durable Objectバインディング: SupabaseMCPクラスをMCP_OBJECTとして定義
• 互換性設定: compatibility_dateで実行環境の日付を指定
• Node.js互換性フラグ: nodejs_compatでNode.js APIの使用を有効化
• マイグレーション設定: Durable Objectsのバージョン管理
• 監視機能: observabilityでパフォーマンス監視を有効化

プロジェクト構造

   src/
      index.ts              # メインワーカーエントリーポイント
      supabaseMcp.ts        # Durable Object MCP実装（セキュリティ機能付き）
      config/
         security.ts        # デフォルトセキュリティ設定と型定義
         custom-security.ts # カスタムセキュリティ設定（ユーザー編集用）
      utils/
         sqlValidator.ts    # SQLバリデーション機能
   package.json
   tsconfig.json
   wrangler.jsonc           # Cloudflare Workers設定
   README.md