PolarDB:PolarDB Supabase enables VibeCoding in AI-native IDEs

Step 1: Create a PolarDB Supabase application

1. Log on to the PolarDB console. In a PolarDB cluster, create a Supabase application and log on to its console. For more information, see Quickly get started with PolarDB Supabase.

2. Add the IP address of your business environment to the application whitelist.

3. After the application is created, click the application ID to open the application management page. Record the following key information:

   • Public endpoint: On the Topology tab, you can obtain the public endpoint. If you are creating an application for the first time, you must first request an endpoint. The format is http://<Public IP>:8000.

   • Key information: On the Configuration tab, record the values of the following keys: secret.jwt.anonKey, secret.jwt.serviceKey, secret.dashboard.username, and secret.dashboard.password.

Step 2: Download and install an AI-native IDE

This example uses Qoder. Download and install the client for your operating system.

Step 3: Obtain and build the MCP service

1. Download the PolarDB Supabase MCP Server code. Run the following commands in your business environment to clone and build the project.

   Note

   Make sure your business environment meets the requirements for the PolarDB Supabase MCP Server code.

   # 1. Clone the project repository
   git clone https://github.com/ApsaraDB/PolarDB-Supabase-MCP-Server.git
   
   # 2. Go to the project directory
   cd PolarDB-Supabase-MCP-Server
   
   # 3. Package manager. We recommend pnpm.
   npm install -g pnpm
   
   # 4. Install dependencies
   pnpm install
   
   # 5. Build the project
   pnpm build

2. Record the absolute path of the stdio.js file:

   # After execution, the stdio.js file should be displayed. Record its absolute path for later configuration.
   ls packages/mcp-server-supabase/dist/transports/

Step 4: Configure the MCP service in the AI-native IDE

This example uses Qoder in a macOS environment. In the top navigation bar, choose Qoder > Preferences > Qoder Settings > MCP Service. Click the Add button to create a new MCP service configuration. Complete the configuration fields as shown in the example below. Replace the <...> placeholders with your actual information.

{
    "mcpServers": {
        "polardb-supabase": {
          "command": "node",
          "args": [
            "<Absolute path to the stdio.js file built in Step 3>",
            "--api-url",
            "<Your Supabase public endpoint>",
            "--service-role-key",
            "<Your Supabase secret.jwt.serviceKey>",
            "--anon-key",
            "<Your Supabase secret.jwt.anonKey>",
            "--dashboard-username",
            "<Your Supabase secret.dashboard.username>",
            "--dashboard-password",
            "<Your Supabase secret.dashboard.password>",
            "--project-ref",
            "default"
          ]
        }
    }
}

Example

{
    "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"
          ]
        }
    }
}

Step 5: Start full-stack development

After you complete the configuration, start developing your application by interacting with the AI-native IDE in natural language. This example uses Qoder.

1. Open a new chat window in Qoder.

2. Enter your first prompt to describe the application you want to create. The AI uses the context from the MCP service to generate the complete code, including frontend and backend logic, and initializes the table schema.

   Example: Help me build a to-do list application based on React and Supabase. No logon or access control is needed.

3. Based on the generated result, continue the interaction with additional prompts until all features and requirements are met.

Demonstration

1. Enter the prompt: "Help me build a to-do list application based on React and Supabase. No logon or access control is needed."

   

2. Wait for the code and table schema to be automatically generated. When complete, click Preview to see the result.

3. Log on to the Supabase application to verify the tables and data in the PolarDB cluster.