用 VS Code + MCP 打造你的第一个数据库应用，从 0 到 1 认识 Supabase：

当下的前端开发者，正在逐渐从「写页面」走向「搭系统」。
而 Supabase，正是让个人开发者能轻松拥有后端能力的“云原生数据库平台”。
本文通过一个小型 TodoList 案例，带你从 VS Code 内部用 MCP（Model Context Protocol） 调用 Supabase，完成一个数据库应用的全流程。

一、Supabase 是什么？为什么值得关注？

Supabase 是一个开源的后端即服务平台（BaaS），为前端开发者提供：

• 🌐 PostgreSQL 数据库（稳定、强大）
• 🔑 用户认证系统（Auth）
• ⚙️ 自动生成的 REST 与 Realtime API
• 📦 对象存储（Storage）
• 🧩 边缘函数（Edge Functions）

使用 Supabase，前端开发者无需自建后端环境、无需部署服务器，只需几行配置就能：

• 建立结构化数据库；
• 拥有完整的 API；
• 管理用户权限；
• 甚至在浏览器中直接调试 SQL。

二、为什么要和 VS Code MCP 结合使用？

Supabase 提供了丰富的 REST / JS SDK 接口，但在实践中：

• 你需要切换网页、控制台；

• 操作数据库的 SQL 和前端逻辑割裂；

• 管理策略与权限也分散。

而 VS Code 的 MCP（Model Context Protocol） 则打通了这条链路：

它让 AI（如 Copilot Chat）能直接调用 Supabase 工具集，在编辑器中执行数据库操作。

这意味着：

• 不再需要手动复制 SQL；
• AI 可以帮你自动创建表、插入数据；
• 一切都在本地 VS Code 完成。

三、从注册到准备：Supabase 初始化流程

1️⃣ 注册账号并创建项目

进入 https://supabase.com/dashboard (opens in a new tab) → 登录后点击 New Project 填写：

• 项目名：mcp-todo-demo
• 数据库密码：任意安全密码
• 区域：默认即可

2️⃣ 获取连接信息

打开左侧 Project Settings → API 复制：

• Project URL
• anon public key
• Project ID 这两项稍后会在前端使用。

四、配置 VS Code：接通 Supabase MCP

1️打开 VS Code

这里演示我们使用 GitHub Copilot Chat。

访问：https://supabase.com/docs/guides/getting-started/mcp (opens in a new tab)

点击 Add to VS Code 安装扩展。 安装下载

3️启动连接

打开命令面板：

MCP: Add Server → 选择 “Supabase” → 登录授权 完成后，你的 VS Code 就能“直接访问数据库”。

五、使用AI+MCP开发

现在，AI 就能在 VS Code 里直接操作 Supabase 数据库。

1️⃣ 在项目中新建文件 intro.md，输入提示词：

“请你按照目录下的 intro.md 文档的内容进行开发。”

2️⃣ 打开 VS Code Chat，将之前复制的 Project URL 和 anon key 替换到该文档内容中。
3️⃣ 启动 AI 助手，让它自动生成前端 + 数据库代码。

等待片刻后，你会看到：

• Supabase 数据库中自动创建了 todos 表；

• AI 生成了 HTML + JS 页面；

• CRUD（增删改查）接口已经自动连通。

打开页面后，你可以直接操作数据库：新增任务、修改状态、删除记录，一切实时生效。

结语：AI 驱动的数据库开发新范式

通过 VS Code + MCP + Supabase 的组合，
前端开发者可以在本地 IDE 内完成：

• 数据表设计与管理；
• 权限策略与安全验证；
• 前端逻辑 + 数据联动；
• 无缝的 AI 辅助开发体验。

这标志着一个趋势：

“AI 不只是写代码，它能成为开发流程中的智能操作层。” Supabase MCP 让数据库成为 AI 可调用的“能力模块”，
而 VS Code 则是你的本地化“控制台”。