CursorとSupabaseのDBをMCP経由で繋いでみた（Windsurfも可）

きっかけ

Xで、この投稿を見て便利だと思い再現してみました。
ただこの投稿の動画通りにやってもおそらく上手くいかないのでぜひ記事をご覧ください。
https://x.com/dshukertjr/status/1890748395549061299

MCPとは？

深く解説はしませんが、Anthropic社の開発した
AIエージェントをリポジトリ、ビジネスツール、開発環境などのデータが存在するシステムに接続するための新しい標準規格です。

簡単にいうと、データの保管庫（DB、GoogleDrive, Notion, Slack）などにあなたのAIエージェントがアクセスできるようになります。

詳細はこちら：
https://www.anthropic.com/news/model-context-protocol

手順

①CursorのMCP設定ダイアログへ進む

設定アイコン→Features→+ Add New MCP Serverの順に進みます。

②必要情報を入力する

• Nameは何でも大丈夫です。Supabase Databaseにしました。
• Typeはcommandにして下さい。
• Commandの部分には以下を入力して下さい。

npx -y @modelcontextprotocol/server-postgres <connection string>

<connection string>の部分には、Connectボタンを押して表示されるあなたのpostgresのURIをコピーして下さい。

元のXの投稿ではDirect ConnectionのURIを使用していますが、Session Poolerを推奨します。

Direct ConnectionはデフォルトではIPv6のみをサポートしています。これに最初気づかず躓きました。

IPv4を使うには、Direct Connectionでは$4の課金が必要なので、無料でIPv4で接続できるSession Poolerを使いましょう。

最終的に僕の場合は以下のようになりました。（ダミーのプロジェクトです。）

npx -y @modelcontextprotocol/server-postgres postgresql://postgres.ewukfaurfwdzxqnklfis:[YOUR-PASSWORD]@aws-0-ap-northeast-1.pooler.supabase.com:5432/postgres

[YOUR-PASSWORD]とewukfaurfwdzxqnklfisの部分はプロジェクト独自なので必ず自分のSupabaseのプロジェクトのものをコピペして下さい。

この内容で保存するとMCPサーバが追加されます。
これでセットアップは完了です。完了するとMCPサーバが追加されます。

③テストしてみる

「supabase上のUserテーブルのカラムをMCPで取得して教えて。」
という質問に対してしっかり答えてくれました！

Xやってます。

XでAI駆動開発についての有益な情報を発信しています。よければフォローお願いします！
https://x.com/KeisukeShibata_