PolarDB Supabase enables VibeCoding in AI-native IDEs

Step 1: Create a PolarDB Supabase instance

1. Log on to the PolarDB console, create a Supabase application in your PolarDB cluster, and log on to its console. For detailed steps, see 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 go to the application management page and record the following key information:

   • Public endpoint: Obtain it on the Topology tab. For new applications, you must first apply for an address. The format is http://<public IP address>:8000.

   • Key information: Obtain it on the Configuration tab. You need to record the keys secret.jwt.anonKey, secret.jwt.serviceKey, secret.dashboard.username, and secret.dashboard.password.

Step 2: Download and install an AI-native IDE

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

Step 3: Obtain and build the MCP service

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

   Note

   Make sure that your business environment meets the requirements of the PolarDB Supabase MCP Server.

   # 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. We recommend using pnpm as the package manager
   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 running this command, 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 topic uses Qoder on macOS as an example. From the top navigation bar, choose Qoder > Preferences > Qoder Settings > MCP Servers. Click Add to add a new MCP service configuration. Configure the service as shown in the following example, replacing 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 preceding configuration, you can start developing your application by interacting with the AI-native IDE using natural language. This topic uses Qoder as an example.

1. Open a new chat window in Qoder.

2. Enter the first prompt to describe the application that you want to create. The AI generates the complete code, including the frontend and backend logic, and initializes the table structure based on the context provided by the MCP service.

   Example: Help me build a to-do list application using React and Supabase. No login or permission control is required.

3. Based on the generated result, you can continue to interact with multiple rounds of prompts until all features and requirements meet your expectations.

Example results

1. Enter the prompt: "Help me build a to-do list application using React and Supabase. No login or permission control is required."

   The following is the core code of the application generated by the AI (excerpt):

   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)
   
     // Fetch all to-do items
     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)
     }
   
     // Add a new to-do item
     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('')
       }
     }
   
     // Toggle to-do item completion status
     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. Wait for the code and table structure to be automatically generated. After generation is complete, click Preview to view the result.

   After the prompt is executed, the AI assistant automatically performs the following operations:

   1. Create a todos table with the id, task, completed, and created_at fields.

   2. Verify the query functionality.

   3. Update the application code.

   4. Restart the application.

   The application runs successfully in the embedded browser at http://localhost:5174. The page title is To-Do List, which includes a task input box (with the placeholder "Add a new task...") and an Add button. Below, the added to-do items (such as "Test task") are displayed, each with a checkbox and a Delete button.

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

   The automatically generated Supabase database contains a todos table with the following structure:

   • id (int4, primary key)

   • task (text, task content)

   • completed (bool, completion status)

   • created_at (timestamptz, creation time)

   In the Supabase Table Editor, you can see that the table already contains 3 test task entries, all with the completed status set to FALSE.