極智編程：基於Qoder+PolarDB Supabase 實現全棧VibeCoding 詳情 - 數據庫,mysql,知識,觀點,資訊數據庫分享小北動態日志

前言

VibeCoding（氛圍編程）是一種由AI驅動的編程範式，開發者通過自然語言描述需求，由AI自主完成選的代碼開發、調試以及部署運行。由OpenAI聯合創始人Andrej Karpathy於2025年提出，強調"對話驅動"的開發模式。
VibeCoding 極大的的降低了編程門檻，非專業開發人員也可通過自然語言交互來完成網站、APP的開發。 AI 雖然可以生成完美的前端甚至後端代碼，但由於AI無法感知應用的真實後端環境（數據庫結構、鏈接方式等），往往會導致AI在前後端一體的全棧應用的表現上不盡如人意。
PolarDB Supabase作為一個通用的後端即服務（BaaS），通過提供 MCP Server 填平了前後端的斷層，將完整、實時的後端上下文賦予了AI。由此形成更高效的全棧加速範式，極大地提高了AI在前後端一體的全棧應用開發上的表現。

本文旨在説明如何基於Qoder+PolarDB Supabase 實現全棧VibeCoding，提高AI在前後端一體的全棧應用開發上的表現。

環境準備

第一步：準備PolarDB Supabase作為應用後端服務： https://help.aliyun.com/zh/polardb/polardb-for-postgresql/ai-...
第二步：下載Qoder： https://qoder.com/
第三步：下載PolarDB Supabase MCP Server代碼： https://github.com/ApsaraDB/PolarDB-Supabase-MCP-Server/blob/main/POLARDB_README.md
第四步：將PolarDB Supabase MCP Server配置到Qoder

配置路徑： Qoder -> 首選項 -> Qoder 設置 -> MCP 服務

點擊“添加”按鈕添加MCP Server， MCP 服務配置示例：

{
  "mcpServers": {
    "polardb-supabase": {
      "command": "node",
      "args": [
        "~/supabase-mcp/packages/mcp-server-supabase/dist/transports/stdio.js",
        "--api-url",
        "http://x.x.x.x:8000",
        "--service-role-key",
        "xxxxx",
        "--anon-key",
        "xxxxx",
        "--dashboard-username",
        "xxxxx",
        "--dashboard-password",
        "xxxxx",
        "--project-ref",
        "default"
      ]
    }
  }
}

其中

supabase-mcp/packages/mcp-server-supabase/dist/transports/stdio.js為MCP Server 代碼地址
api-url 為Supabase公網地址，可以在PolarDB Supabase實例拓撲圖頁面找到，如下圖所示
service-role-key、anon-key、dashboard-username、dashboard-password 可以在PolarDB Supabase實例配置頁找到：

全棧VibeCoding示例

環境配置好後，可以直接在Qoder 中輸入提示詞開始編寫應用。
提示詞示例： 幫我實現一個todo list應用，基於react + Supabase，不需要登錄和權限控制

輸入提示詞後，Qoder就開始編寫前後端代碼，同時調用MCP瞭解Supabase上下文，初始化表結構。根據實際情況進行多輪提示詞交互，全部完成後，直至功能和需求符合要求。最終效果示例：