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实现，不需要登录和权限控制”。

   AI 生成的应用核心代码（节选）如下：

   import { useState, useEffect } from 'react'
   import { supabase } from './supabaseClient'
   import './App.css'
   
   function App() {
     const [todos, setTodos] = useState([])
     const [newTask, setNewTask] = useState('')
     const [loading, setLoading] = useState(true)
   
     // 获取所有待办事项
     const fetchTodos = async () => {
       setLoading(true)
       const { data, error } = await supabase
         .from('todos')
         .select('*')
         .order('created_at', { ascending: true })
   
       if (error) {
         console.error('Error fetching todos:', error)
         setTodos([])
       } else {
         setTodos(data || [])
       }
       setLoading(false)
     }
   
     // 添加新待办事项
     const addTodo = async () => {
       if (newTask.trim() === '') return
   
       const { data, error } = await supabase
         .from('todos')
         .insert([{ task: newTask, completed: false }])
         .select()
   
       if (error) {
         console.error('Error adding todo:', error)
       } else {
         setTodos([...todos, data[0]])
         setNewTask('')
       }
     }
   
     // 切换待办事项完成状态
     const toggleTodo = async (id, completed) => {
       const { data, error } = await supabase
         .from('todos')
         .update({ completed: !completed })
         .eq('id', id)
         .select()
   
       if (error) {
         console.error('Error updating todo:', error)
       } else {

2. 等待自动生成代码与表结构。完成后，单击预览查看效果。

   执行该提示词后，AI 助手自动完成以下操作：

   1. 创建 todos 表，包含 id、task、completed 和 created_at 字段。

   2. 验证查询功能。

   3. 更新应用代码。

   4. 重启应用。

   应用在内嵌浏览器中成功运行，访问地址为 http://localhost:5174。页面标题为待办列表，包含任务输入框（占位符为“添加新任务...”）和添加按钮，下方展示已添加的待办事项（如“测试任务”），每条事项带有复选框和删除按钮。

3. 登录Supabase应用验证PolarDB集群内的表与数据。

   自动生成的 Supabase 数据库中包含 todos 表，表结构如下：

   • id（int4，主键）

   • task（text，任务内容）

   • completed（bool，完成状态）

   • created_at（timestamptz，创建时间）

   在 Supabase Table Editor 中可看到表内已有 3 条测试任务数据，completed 状态均为 FALSE。