View of Integrating Supabase MCP with Cursor
本教程将详细讲解如何在 Cursor AI 编辑器中集成 Supabase MCP 服务,让你通过自然语言命令直接在编辑器中管理 Supabase 项目、执行数据库操作,大幅提升开发效率。
通过这种集成,你无需在多个工具间频繁切换,可以直接在 Cursor 中完成数据库查询、表结构修改、项目信息获取等操作。
Why Choose This Integration?
- 无缝工作流:无需离开编辑器,即可管理 Supabase 项目。
- 自然语言交互:用日常语言发出指令,AI 助手帮你执行复杂的后端操作。
- 快速代码生成:AI 能根据数据库结构,自动生成匹配的 TypeScript 类型、API 调用代码。
- 简化开发流程:从创建表到查询数据,全都在一个界面完成。
Understanding the Core Concepts
What is Supabase?
Supabase 是一个开源的 Firebase 替代方案,为你提供构建现代应用所需的全套后端服务。与 Firebase 不同,Supabase 基于 PostgreSQL 数据库,这意味着你既能享受关系型数据库的完整功能与灵活性,又能获得类似 Firebase 的简便开发体验。
即使是 Supabase 的免费计划,也足够满足个人研究和学习,或者支持一些小型的 App 后端数据开发。
Core Features
- Postgres 数据库:每个 Supabase 项目都是一个完整的 PostgreSQL 数据库,支持关系型数据和复杂 SQL 查询。
- 身份验证系统:支持邮件/密码、OAuth、手机号等多种登录方式,并通过行级安全性(RLS)策略保护数据。
- 自动生成的 API:根据你的数据库结构,自动创建 RESTful 和 GraphQL API,无需额外编写代码。
- 实时订阅:通过 WebSocket 提供实时数据同步,让应用能即时响应数据变化。
- 文件存储:内置存储服务,用于上传、下载和管理各种文件。
- 边缘函数:允许在全球边缘节点上运行自定义代码,无需部署或扩展服务器。
- 向量数据库:支持 AI 应用开发,可以存储、索引和搜索向量嵌入,与 OpenAI 等模型集成。
Development Workflow
使用 Supabase 进行应用开发的基本流程是:
- 创建 Supabase 项目
- 设计和创建数据库表结构
- 配置身份验证和安全策略
- 使用自动生成的 API 在前端应用中访问数据
- 根据需要添加自定义功能和业务逻辑
Supabase 支持本地开发和云端部署,提供完善的文档和客户端库,涵盖 Ja vaScript/TypeScript、React、Vue、Flutter、Swift 等多种语言和框架。
What is Supabase MCP?
MCP(Model Context Protocol) 是 Anthropic 推出的一个协议标准,定义了大型语言模型(LLM)与外部服务交互的统一方式。通过 MCP,AI 助手能够直接与外部服务交互,执行各种操作。
Supabase MCP 是基于此协议开发的服务器,它允许 AI 助手(如 Cursor、Claude、Windsurf 等)直接连接到你的 Supabase 项目,并执行诸如:
- 管理 Supabase 项目和组织
- 查询和修改数据库
- 运行 SQL 和应用迁移
- 获取项目配置信息
- 管理分支(实验性功能)
- 生成 TypeScript 类型定义
简单来说,Supabase MCP 是 AI 助手和 Supabase 之间的桥梁,让 AI 能理解你的自然语言需求,并直接操作你的数据库。
Step-by-Step Configuration Guide
将 Supabase MCP 集成到 Cursor 中只需几个简单步骤,下面是详细的操作指南。
Step 1: Create a Supabase Personal Access Token
首先,你需要创建一个 Supabase 个人访问令牌,用于身份验证。
- 登录 Supabase 控制台(
https://app.supabase.com) - 点击右上角的个人资料图标,选择“Account preferences”
- 在左侧菜单中选择“Access Tokens”
- 点击“Generate New Token”
- 给令牌起一个描述性的名称,例如“Cursor MCP Server”
- 点击“Generate”并立即复制并安全保存生成的令牌(注意:令牌只会显示一次)
小提示:建议创建一个专用令牌,并为其设置一个清晰的名字,方便将来管理。
Step 2: Configure MCP in Cursor
- 打开 Cursor 编辑器
- 在项目的根目录创建
.cursor文件夹(如果尚不存在) - 在
.cursor文件夹中创建mcp.json文件 - 在
mcp.json文件中添加以下配置:
{
"mcpServers":{
"supabase":{
"command":"npx",
"args":[
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
""
]
}
}
}
5. 将 替换为你在步骤 1 中创建的实际令牌。
6. 保存 json 文件。
Windows 用户注意事项
如果你使用的是 Windows 系统,你需要修改配置,添加额外的命令前缀:
{
"mcpServers":{
"supabase":{
"command":"cmd",
"args":[
"/c",
"npx",
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
""
]
}
}
}
如果你使用的是 WSL(Windows Subsystem for Linux),则配置应该是:
{
"mcpServers":{
"supabase":{
"command":"wsl",
"args":[
"npx",
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
""
]
}
}
}
小提示:确保 Node.js 已安装并正确配置在你的系统 PATH 环境变量中。
Step 3: Verify the Connection
- 在 Cursor 中,打开设置(可以通过按
Cmd+P或Ctrl+P并输入 “Cursor Settings”) - 导航至 MCP 设置,确认 Supabase MCP 服务器已被识别并启用
- 如果服务器旁边显示 绿色状态指示器,则表示连接成功
常见问题解答
Q:为什么我看不到 MCP 服务器?
A:检查 mcp.json 文件是否放在项目根目录下的 .cursor 文件夹中。文件路径和格式必须正确,否则 Cursor 无法识别。
Q:如何知道我的令牌是否正确?
A:如果令牌无效,MCP 服务器状态会显示为红色或错误。你可以重新生成一个令牌并更新配置文件,然后重启 Cursor。
Step 4: Start Using MCP Features
现在,你可以在 Cursor 中使用 Supabase MCP 了。例如:
- 打开 Cursor 聊天(通过按
Cmd+I或Ctrl+I) - 在聊天中输入你的 Supabase 相关问题或命令,例如 “列出我的 Supabase 项目” 或 “在我的数据库中创建一个新表”
Cursor 的 AI 助手会识别这些请求,调用 Supabase MCP 服务器,并执行相应的操作。
Practical Examples
以下是一些实际的例子,展示了如何利用 Cursor 集成 Supabase MCP 来提高工作效率。
Example 1: List All Supabase Projects
提示词:
列出我所有的 Supabase 项目
AI 助手会调用 list_projects 工具,并返回你的项目列表,包括项目名称、ID 和状态。
小提示:这是测试连接是否成功的最好方式。
Example 2: Create a User Management System
提示词:
在我的supabase项目 "today-lunch-picker" 中创建一个用户管理系统,需要以下表: 1. 用户表(users) 2. 角色表(roles) 3. 用户角色关联表(user_roles) 先在聊天框中输出以上表结构的 sql 语句,然后再执行到 supabase 当中。
AI 将生成并执行类似以下的 SQL:
等待 AI 执行完成。
小提示:对于复杂的数据库操作,先让 AI 展示 SQL 语句,确认无误后再执行,这能避免意外修改。
Example 3: Query Data
提示词:
查询"today-lunch-picker"项目中角色有几种?先输出 SQL,然后执行。
AI 将生成并执行类似以下的 SQL:
Advanced Usage and Best Practices
Read-Only Mode
如果你希望限制 Supabase MCP 服务器仅执行读取操作,可以在命令行参数中添加 --read-only 标志:
{
"mcpServers":{
"supabase":{
"command":"npx",
"args":[
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"",
"--read-only"
]
}
}
}
这样可以防止执行写入操作,特别适合在生产环境或测试中需要严格权限控制的场景。
Key Considerations
- 明确指定项目:在向 AI 助手提问时,始终明确指定你想要操作的 Supabase 项目名称或 ID,避免混淆。
- 分步操作:对于复杂任务,尝试将其分解为多个步骤,逐步指导 AI 助手完成,这样更容易控制流程。
- 检查生成的 SQL:对于数据库结构变更,先要求 AI 助手展示它将要执行的 SQL,然后再确认执行。建议先关闭
auto-run模式,例如:请为"my-blog"项目生成创建文章表的SQL,但不要执行,我想先查看SQL语句
- 利用上下文:AI 助手会记住对话上下文,这样你可以在多个请求中引用同一个项目或表。例如:
1. "在my-app项目中查询所有用户表的结构" 2. "为这个表创建一个索引,以提高按电子邮件查询的性能"
- 组合使用工具:例如,先获取表结构,然后生成符合该结构的查询或代码:
1. "列出my-app项目中的所有表" 2. "基于users表生成一个TypeScript接口" 3. "编写一个基于该接口的React组件来显示用户列表"
常见问题解答
Q:我不小心执行了错误的SQL怎么办?
A:建议在重要项目中始终开启“只读模式”进行探索,或者使用 Supabase 的“分支”功能(实验性)进行安全测试。另外,定期备份你的数据库也是好习惯。
Q:AI 助手似乎不理解我的需求?
A:尝试将复杂问题拆解成更小的、更具体的指令。例如,不要直接说“创建博客系统”,而是说“创建一个名为 posts 的表”和“为这个表添加 content 列”。
Conclusion
通过将 Cursor 与 Supabase MCP 集成,你可以将 AI 助手的强大能力直接应用于后端开发中,快速完成数据库管理、项目配置和代码生成等任务。这种集成特别适合需要频繁与 Supabase 交互的项目,无论是快速的原型开发阶段,还是维护现有应用。
在实际使用时,结合本文中提到的注意事项,特别是“先预览再执行”的原则,可以有效避免意外修改数据。现在就开始使用 Cursor 和 Supabase MCP 来简化你的开发工作流程吧!
