前言
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上下文，初始化表结构。 根据实际情况进行多轮提示词交互，全部完成后，直至功能和需求符合要求。最终效果示例：
完整的示例视频见：
