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集群内的表与数据。