PolarDB：PolarDB Supabase助力AI原生IDE完成VibeCoding

步驟一：建立PolarDB Supabase

1. 登入PolarDB控制台，在PolarDB叢集中建立一個Supabase應用並登入其控制台。詳細步驟，請參考快速體驗PolarDB Supabase。

2. 將您的業務環境IP地址添加至應用白名單中。

3. 應用建立成功後，單擊應用ID進入應用管理頁面，記錄以下關鍵資訊：

   • 公網地址：在拓撲圖頁簽內擷取，首次建立的應用需要先進行申請，格式為http://<公網IP>:8000。

   • 密鑰資訊：在配置頁簽內擷取。需要記錄密鑰secret.jwt.anonKey、secret.jwt.serviceKey、secret.dashboard.username和secret.dashboard.password。

步驟二：下載並安裝AI原生IDE

此處以Qoder為例，根據作業系統下載並安裝對應的用戶端。

步驟三：擷取並構建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/

步驟四：在AI原生IDE中配置MCP服務

此處以macOS環境下的Qoder為例，在頂部導覽列中選擇Qoder > 喜好設定 > Qoder 設定 > MCP 服務，單擊添加按鈕，添加一個新的MCP服務配置。參考以下樣本填寫配置，將<...>預留位置替換為實際資訊。

{
    "mcpServers": {
        "polardb-supabase": {
          "command": "node",
          "args": [
            "<步驟三中構建出的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"
          ]
        }
    }
}

步驟五：開始全棧開發

完成上述配置後，開始通過自然語言與AI原生IDE互動開發應用，此處以Qoder為例。

1. 在Qoder中新開一個交談視窗。

2. 輸入第一個提示詞（Prompt），描述要建立的應用。AI會基於MCP服務提供的上下文，產生包含前後端邏輯的完整代碼並初始化表結構。

   樣本：幫我實現一個待辦列表應用，基於react+Supabase實現，不需要登入和許可權控制。

3. 根據產生的結果，可進行多輪提示詞互動，直至所有功能和需求均符合要求。

樣本效果展示

1. 輸入提示詞：“幫我實現一個待辦列表應用，基於react+Supabase實現，不需要登入和許可權控制”。

   

2. 等待自動產生代碼與表結構。完成後，單擊預覽查看效果。

3. 登入Supabase應用驗證PolarDB叢集內的表與資料。