株式会社BinaryTech | 日本品質 × ベトナム開発、最高のバランスを。

SupabaseでリアルタイムAIを構築する | 第1章：SupabaseとMCPの基礎

Posted at 2025-04-17

はじめに

Supabaseは、PostgreSQLをベースにしたオープンソースのリアルタイムデータベースで、REST APIやWebSocketを通じてデータに簡単にアクセスできます。一方、**Model Context Protocol（MCP）**は、AI（例：Claude）を外部データやツールと標準化された方法で接続するプロトコルです。このシリーズでは、SupabaseとMCPを統合し、リアルタイムデータを使ったエージェントAIを構築する方法を学びます。たとえば、プロジェクトデータをAIが分析したり、コミュニティチャットを自動化したりできます。

第1章では、SupabaseとMCPの基本を理解し、Supabaseからデータを取得するシンプルなMCPサーバーを構築します。Claude Desktopと接続して、リアルタイムデータの第一歩を踏み出しましょう。SupabaseとAIの可能性にワクワクしている方は、ぜひ一緒に始めましょう！

SupabaseとMCPの概要

Supabaseとは？

Supabaseは、「Firebaseのオープンソース代替」とも呼ばれるプラットフォームで、以下の特徴があります：

リアルタイム：WebSocketでデータ変更を即座に通知。
PostgreSQLベース：SQLクエリやREST APIでデータ操作。
簡単な認証：OAuthやメール認証をサポート。
開発者フレンドリー：直感的なAPIとダッシュボード。

MCPの役割

MCPは、AIにSupabaseのデータを提供する橋渡し役です。MCPサーバーを通じて、AIは以下を行えます：

データ取得：Supabaseのテーブルからプロジェクト情報やユーザー情報を取得。
アクション実行：新しいレコードを追加、データを更新。
リアルタイム連携：データ変更を監視し、AIが即座に対応。

なぜSupabaseとMCPを組み合わせる？

この組み合わせは、以下のようなシナリオで強力です：

プロジェクト管理：AIがSupabaseのタスクデータを分析し、進捗を提案。
コミュニティ：AIがSupabaseに保存されたチャットログを基に回答。
データ分析：AIがリアルタイムデータを処理し、インサイトを提供。

開発環境の準備

MCPサーバーとSupabaseを統合するには、以下の環境を準備します：

Python 3.8以降：サーバー開発用。
mcpライブラリ：JSON-RPC通信を処理（仮定のライブラリ、公式ドキュメントを参照）。
supabaseライブラリ：Supabase APIとの通信用。
Claude Desktop：MCP対応のAIクライアント。
テキストエディタ：VS Code推奨。

インストールコマンド：

pip install mcp jsonrpcserver supabase python-dotenv

Supabaseのセットアップ

プロジェクト作成：
- Supabaseダッシュボードにアクセス。
- 新しいプロジェクトを作成（例：mcp-supabase）。
- プロジェクトのURLとAPIキーを取得（匿名キー）。

テーブルの作成：

SQLエディタで以下を実行し、projectsテーブルを作成：

CREATE TABLE projects (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

テストデータを挿入：

INSERT INTO projects (name, description) VALUES
('プロジェクトA', 'MCP統合テスト'),
('プロジェクトB', 'リアルタイム分析');

環境変数の設定：
.envファイルに以下を追加：

SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key

コード例：Supabase用MCPサーバー

Supabaseのprojectsテーブルからデータを取得するMCPサーバーを構築します。

from mcp import MCPServer
from supabase import create_client
import os
from dotenv import load_dotenv

class SupabaseServer(MCPServer):
    def __init__(self, host, port, supabase_url, supabase_key):
        super().__init__(host, port)
        self.supabase = create_client(supabase_url, supabase_key)
        self.register_resource("get_projects", self.get_projects)

    def get_projects(self, params):
        try:
            response = self.supabase.table("projects").select("*").execute()
            projects = response.data
            return {"status": "success", "projects": projects}
        except Exception as e:
            return {"status": "error", "message": str(e)}

if __name__ == "__main__":
    load_dotenv()
    server = SupabaseServer(
        host="localhost",
        port=8094,
        supabase_url=os.getenv("SUPABASE_URL"),
        supabase_key=os.getenv("SUPABASE_KEY")
    )
    print("Supabase MCPサーバーを起動中: http://localhost:8094")
    server.start()

コードの説明

create_client：Supabaseクライアントを初期化し、URLとキーで認証。
get_projects：projectsテーブルから全データを取得。
register_resource：リソースを登録し、AIがアクセス可能に。
start()：サーバーを起動。

テスト方法

サーバーを起動：
```
python supabase_server.py
```

リクエストを送信：

import requests
import json

url = "http://localhost:8094"
payload = {
    "jsonrpc": "2.0",
    "method": "get_projects",
    "params": {},
    "id": 1
}
response = requests.post(url, json=payload)
print(json.dumps(response.json(), indent=2, ensure_ascii=False))

期待されるレスポンス：

{
  "jsonrpc": "2.0",
  "result": {
    "status": "success",
    "projects": [
      {
        "id": 1,
        "name": "プロジェクトA",
        "description": "MCP統合テスト",
        "created_at": "2025-04-15T00:00:00"
      },
      {
        "id": 2,
        "name": "プロジェクトB",
        "description": "リアルタイム分析",
        "created_at": "2025-04-15T00:00:00"
      }
    ]
  },
  "id": 1
}

Claude Desktopとの接続

サーバーをClaude Desktopに接続します：

設定ファイルの編集：
Claude Desktopの設定ファイル（例：claude_desktop_config.json）に以下を追加：

{
  "mcp_servers": [
    {
      "name": "SupabaseServer",
      "url": "http://localhost:8094",
      "auth": "none"
    }
  ]
}

Claudeでテスト：
Claude Desktopを起動し、プロンプトを入力：

プロジェクト一覧を教えてください。

レスポンス例：

Supabaseから取得したプロジェクト：
- プロジェクトA：MCP統合テスト
- プロジェクトB：リアルタイム分析

次のステップ

このMCPサーバーは、SupabaseとAIの連携の基礎です。次の第2章では、Supabaseのリアルタイム機能（WebSocketサブスクリプション）を活用し、データ変更を即座にAIに通知するサーバーを構築します。たとえば、プロジェクトが追加された瞬間にAIが分析を開始できます。リアルタイムAIに興味がある方は、ぜひお楽しみに！

まとめ

この第1章では、SupabaseとMCPの基本を学び、シンプルなMCPサーバーを構築してプロジェクトデータを取得しました。Supabaseの強力なデータベースとMCPの柔軟性を組み合わせることで、リアルタイムAIの可能性が広がります。次章以降では、リアルタイム更新、データ分析、コミュニティAIへと進化させます。

役に立ったと思ったら、「いいね」や「ストック」をしていただけると嬉しいです！次の章でまたお会いしましょう！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up