极智编程：基于Qoder+PolarDB Supabase 实现全栈VibeCoding

前言

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-supabase-application/?spm=a2c4g.11186623.help-menu-2249963.d_6_13.1824248fiLdxuR&scm=20140722.H_2938181._.OR_help-T_cn~zh-V_1
  
• 第二步：下载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上下文，初始化表结构。 根据实际情况进行多轮提示词交互，全部完成后，直至功能和需求符合要求。最终效果示例：

完整的示例视频见：

https://mp.weixin.qq.com/s/Vzl-MPV50qYtDoqIuRWSXQ