PolarDB:PolarDB Supabase による AI ネイティブ IDE での VibeCoding の実現

ステップ 1：PolarDB Supabase アプリケーションの作成

1. PolarDB コンソールにログインします。PolarDB クラスターで Supabase アプリケーションを作成し、そのコンソールにログインします。詳細については、「PolarDB Supabase クイックスタート」をご参照ください。

2. ビジネス環境の IP アドレスをアプリケーションのホワイトリストに追加します。

3. アプリケーションが作成されたら、アプリケーション ID をクリックしてアプリケーション管理ページを開きます。次のキー情報を記録します：

   • パブリックエンドポイント: [トポロジー] タブで、パブリックエンドポイントを取得できます。初めてアプリケーションを作成する場合、まずエンドポイントをリクエストする必要があります。フォーマットは http://<Public IP>:8000 です。

   • キー情報：[設定] タブで、次のキーの値を記録します：secret.jwt.anonKey、secret.jwt.serviceKey、secret.dashboard.username、およびsecret.dashboard.password。

ステップ 2：AI ネイティブ IDE のダウンロードとインストール

この例では Qoder を使用します。ご利用のオペレーティングシステム用のクライアントをダウンロードしてインストールします。

ステップ 3：MCP サービスの取得とビルド

1. PolarDB Supabase MCP Server のコードをダウンロードします。ビジネス環境で次のコマンドを実行して、プロジェクトをクローンしてビルドします。

   説明

   ビジネス環境が PolarDB Supabase MCP Server コードの要件を満たしていることを確認してください。

   # 1. プロジェクトリポジトリをクローンします
   git clone https://github.com/ApsaraDB/PolarDB-Supabase-MCP-Server.git
   
   # 2. プロジェクトディレクトリに移動します
   cd PolarDB-Supabase-MCP-Server
   
   # 3. パッケージマネージャー。pnpm を推奨します。
   npm install -g pnpm
   
   # 4. 依存関係をインストールします
   pnpm install
   
   # 5. プロジェクトをビルドします
   pnpm build

2. stdio.js ファイルの絶対パスを記録します：

   # 実行後、stdio.js ファイルが表示されます。後の設定のために、その絶対パスを記録してください。
   ls packages/mcp-server-supabase/dist/transports/

ステップ 4：AI ネイティブ IDE での MCP サービスの設定

この例では、macOS 環境の Qoder を使用します。上部のナビゲーションバーで、Qoder > 環境設定 > Qoder 設定 > MCP サービスを選択します。追加ボタンをクリックして、新しい MCP サービス設定を作成します。以下の例のように設定フィールドを入力します。<...> プレースホルダーを実際の情報に置き換えてください。

{
    "mcpServers": {
        "polardb-supabase": {
          "command": "node",
          "args": [
            "<ステップ 3 でビルドした stdio.js ファイルの絶対パス>",
            "--api-url",
            "<ご利用の Supabase パブリックエンドポイント>",
            "--service-role-key",
            "<ご利用の Supabase secret.jwt.serviceKey>",
            "--anon-key",
            "<ご利用の Supabase secret.jwt.anonKey>",
            "--dashboard-username",
            "<ご利用の Supabase secret.dashboard.username>",
            "--dashboard-password",
            "<ご利用の Supabase secret.dashboard.password>",
            "--project-ref",
            "default"
          ]
        }
    }
}

例

{
    "mcpServers": {
        "polardb-supabase": {
          "command": "node",
          "args": [
            "/your/path/to/PolarDB-Supabase-MCP-Server/packages/mcp-server-supabase/dist/transports/stdio.js",
            "--api-url",
            "http://8.xxx.xxx.xxx:8080",
            "--service-role-key",
            "eyJ0eXAiOiJKV1QiLCJxxx",
            "--anon-key",
            "eyJ0eXAiOiJKV1QiLCJxxx",
            "--dashboard-username",
            "supabasexxx",
            "--dashboard-password",
            "rMa1rc9rxxx",
            "--project-ref",
            "default"
          ]
        }
    }
}

ステップ 5：フルスタック開発の開始

設定が完了したら、自然言語で AI ネイティブ IDE と対話してアプリケーションの開発を開始します。この例では Qoder を使用します。

1. Qoder で新しいチャットウィンドウを開きます。

2. 作成したいアプリケーションを説明する最初のプロンプトを入力します。AI は MCP サービスからのコンテキストを使用して、フロントエンドとバックエンドのロジックを含む完全なコードを生成し、テーブルスキーマを初期化します。

   例：React と Supabase に基づいて ToDo リストアプリケーションを構築するのを手伝ってください。ログインやアクセス制御は必要ありません。

3. 生成された結果に基づいて、すべての機能と要件が満たされるまで、追加のプロンプトで対話を続けます。

デモンストレーション

1. プロンプトを入力します：「React と Supabase に基づいて ToDo リストアプリケーションを構築するのを手伝ってください。ログインやアクセス制御は必要ありません。」

   

2. コードとテーブルスキーマが自動的に生成されるのを待ちます。完了したら、[プレビュー] をクリックして結果を確認します。

3. Supabase アプリケーションにログインして、PolarDB クラスター内のテーブルとデータを確認します。