Windsurfは便利

どうも、AIエディターの便利さに感動しながらアプリ開発をしているweb開発者です。

最近は自分のアイデアを実現させるために、WindsurfというAIエディターを使っています。

WindsurfはCursorのようにVS Codeを基盤に開発されたAIコードエディターです。
Codeiumという会社で使っているもので、VS CodeやJetBrainのエディターで拡張機能を使ってことある方なら聞いたことがあるかもしれないですね。

私もWindsurfを使う前はWebStorm(JetBrainのjs, ts版)でCodeiumの拡張機能を使っていて、開発生産性を上げていました。

なんでWindsurf?

「Windsurfの方が全体の脈略を理解してくれている気がする」と書かれたブログやYouTubeの動画をよく見かけたのが主な原因です。

具体的な数字ではなく、感覚によるコメントではあるもののどれもCursorを使っていたユーザーの比較だったので惹かれました。

どっちにしろCursorとあまり変わらなさそうだったので深い理由があったわけではありません。

課題

私はRailsとVueの開発者ですが、最近はアイデアの実現のためWindsurfを使ってFlutterの開発をしています。そのため、Flutterのべウトプラクティスや書き方があまりわかっていない状態です。

そこでCursorやWindsurf, Clineを使ったことがある方はわかると思いますが、

こういうツールを使ってフロントエンドの開発をすると、AIによって勝手にデータベースの構造が推論されて、実際のデータベースと違ったモデル定義を書いてくれたり、間違ったコードを書いてくれたりします。

そうすると、AIにいくら質問を投げてもどんどん間違った道へと転んでいき、必要のないコードがアプリの中にどんどん増えていきます。

いつの間にかAIと共に開発をしているというより、上手くいかないからAIを叱っている？自分が目の前にいました。

SupabaseのMCPサーバー

前置きが長くなりましたが、このような問題をSupabaseのMCPサーバーを使うことで解決しましたので共有します。

MCPはPostgreSQLをサポートしているため、Supabaseも当然サポート対象になります。
そこで、DBの中のテーブル構成などをAIに読み込ませることで上記の問題は全て解決できます。

方法

実はほぼドキュメントに沿っていけばできます。CursorやClaude DesktopなどMCPをサポートしているサービスならSupabaseをMCPサーバーとして使うことができます。

1. 手元の環境にNodeを入れる

今回はnpxを実行する必要があるため、Nodeがインストールされていない方はインストールをお願いします。

2. Windsurfのcascade assistent(右側に出るAIの画面)を開く

Command + Lで開けます！

3. Configure MCPをクリック

他のサービスでも大体MCPの設定はハンマーのアイコンがついているイメージがあります。

4. 設定ファイルに定義

そうすると、このようなjsonファイルが開きます。
私の画面では設定値が入っている状態ですが、基本何もない状態です。

以下のような値を入れます。ここの<connection-string>にSupabaseから取れる値を入れます。

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
    }
  }
}

connection-stringの取得方法

1.Supabaseのコンソールに入って、ヘッダーにある「Connect」ボタンを押します。

このようなダイアログが開きます

3.下にスクロールしたら出てくるSession Poolerの値がconnection-stringになります。
ここの[YOUR-PASSWORD]はこのSupabaseプロジェクトを作るときに入れたDBのパスワードです。
もし忘れた場合は簡単にコンソールからリセットできるので試してみてください。

5. available MCP serverの数が増えているか確認

6. できない時はRefresh serversをクリック

もし使えなくなったら、グリーンの丸が見えているか確認してください！
大体のエラーはここのRefresh serversをクリックすることで直ります。

7. Chatで使う

AIと会話する時に、SupabaseのMCPサーバーと通信して考えて欲しいと伝えたらMCPサーバーを参照するようになります。たまに無視しますがもう一度いうとやってくれます！

おわりに

とにかく、mcpサーバーは素晴らしいです。AIがさらに賢くなるのでぜひ使ってみてください！