📌

clineでsupabaseに接続してみる

2025/03/01に公開

Supabase

Model Context Protocol

Cursor

Cline

tech

 経緯bolt.newを使ったフロント開発をしていますが、supabaseの連携も楽にできるとのことでBaaSにこれを採用してアプリ開発ノウハウを学習中です。
MCPを使った開発というのもこのあたりのことをしていると情報として入ってくるので試そうかと思っていたのですがエージェントにclineを使っているとsupabaseの接続に関する情報が見つけられなかったので自分なりにやってみたという感じです。

 supabase MCPのインストール
 clineのMCP Serversから試そうとしたが・・・エディタはcursorを使っています。そこにまずclineの拡張機能をインストールしています。
そしてclineのMCP Serversからsupbaseを探してinstallするだけ、と思っていたのですがインストールボタンを押すとclineのエージェントが起動しインストール作業をしてくれるといった流れになってきます。
僕の場合、AIモデルにgoogle geminiのgemini-2.0-flash-001を使っていて、このモデルでインストール作業を進めていても途中で詰まってしまいました。
そのため、supabaseのインストールは手動で行うことにしました。

 supabase-mcp-serverの手動インストール
 必要要件のインストールまずgithubにアクセスします。
https://github.com/alexander-zuev/supabase-mcp-server
そしてまずは要件になっているこれらをインストールしていきます。
Python 3.12+
PostgresSQL 16+
これらのインストール方法についてもマークダウンに書いてありますが、僕の場合はpostgresはbrewで、pythonはpyenvでインストールしています。この辺りは入れられたらなんでもいいという感じだと思います。特にpostgresはインストール後に出てくるこのようなメッセージを参考にPATHの設定が必要です。
If you need to have postgresql@16 first in your PATH, run:
  echo 'export PATH="/opt/homebrew/opt/postgresql@16/bin:$PATH"' >> ~/.zshrc
brewのバージョンによって微妙に内容が違うようなので適宜ご自身の環境で読み替えてください。

 supabase-mcp-serverのインストール次にsupabase-mcp-serverのインストールをするのですが、OS別にコマンドが違うようなのと、僕はmacOSなのですがpipxとuvとが選択できるようです。recommendedとなっているpipxで僕はインストールしました。
# if pipx is installed (recommended)
pipx install supabase-mcp-server
このコマンドを成功させるために前述のposgresのPATH追加が必要なので忘れないようにします。

 起動確認supabase-mcp-serverのコマンドを実行して以下のようなログが出てくると成功です。
% supabase-mcp-server 
[02/28/25 23:01:23] INFO     Starting Supabase MCP server to connect main.py:266

 clineのsupabase-mcp-server設定agentでのインストールはしていないので、ここでも手動でsupabaseにアクセスする設定を追加していきます。
メニューからclineを選んでMCP Serversを選択。さらにinstalledタブを選択すると Configure MCP Servers というボタンがありますのでクリックします。
すると cline_mcp_settings.json が開きますのでこのような形で記述します。
{
  "mcpServers": {
    "supabase-mcp-server": {
      "command": "~/.local/bin/supabase-mcp-server",
      "disabled": false,
      "autoApprove": [
        "get_tables",
        "get_db_schemas",
        "get_auth_admin_methods_spec"
      ],
      "env": {
        "SUPABASE_PROJECT_REF": {dashboardのURLから取得},
        "SUPABASE_SERVICE_ROLE_KEY": {Data API > Project API Keys > service_role secretより取得},
        "SUPABASE_ACCESS_TOKEN": {Data API > Project API Keys > anon publicより取得},
        "SUPABASE_REGION": {プロジェクト選択画面のregion項目より取得},
        "SUPABASE_DB_PASSWORD": {Database > Database password項目より取得}"
      }
    }
  }
}
autoApproveに関してはclineがsupabaseの操作をするときにapproveを求めることが何回もあるので面倒ならautoでも構わないという意思を確認してきます。承認したらautoApproveに追記されるので最初はこの項目を未設定でも大丈夫です。
あとenvにある SUPABASE_SERVICE_ROLE_KEY ですが、僕の場合は認証済みのユーザーの確認をすときにこれがないとアクセスできなかったので追加していますが、必要がなれればこれも未設定で大丈夫です。もっというとこのキーは需要性の高い情報にアクセスできてしまうので、多人数開発の場合は設定しないほうがいいかもしれないです。
大体このような設定が終わって接続してみると画像にあるように緑の点が表示できていたら正常に接続されていることになります。赤い文字のログも出てきてエラーだったのか？と思ってましたがこれはこうゆう色らしいです・・・・

 終わりにMCPはさまざまなサービスに接続できるため開発効率が上がると言われていましたが、接続方法やインストールで多少詰まるポイントがあったので記事にしてみました。参考になれば幸いです。

GitHubで編集を提案

経緯

supabase MCPのインストール

clineのMCP Serversから試そうとしたが・・・

supabase-mcp-serverの手動インストール

必要要件のインストール

supabase-mcp-serverのインストール

起動確認

clineのsupabase-mcp-server設定

終わりに

Discussion