返回顶部
热门问答 更多热门问答
技术文章 更多技术文章

Cursor 轻松集成 Supabase MCP 服务

[复制链接]
链载Ai 显示全部楼层 发表于 昨天 18:02 |阅读模式 打印 上一主题 下一主题

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: inherit;line-height: 1.75;color: rgb(15, 76, 129);font-weight: bold;">见字如面,与大家分享实践中的经验与思考。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">Cursor 作为一款强大的 AI 驱动代码编辑器,已经凭借其智能代码补全和理解能力为开发者带来便利。而 Supabase 作为一个开源的 Firebase 替代品,提供了数据库、身份验证、存储等完整的后端服务。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">将 Cursor 与 Supabase 通过 MCP (Model Context Protocol) 集成起来,可以让 AI 助手直接与你的 Supabase 项目进行交互,极大地提升开发效率:

  • ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);">
    无需频繁切换工具,直接在编辑器中管理 Supabase 项目
  • ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);">
    通过自然语言命令执行 SQL 查询和数据库操作
  • ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);">
    快速获取项目配置信息,简化开发流程
  • ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;line-height: 1.75;text-indent: 0px;display: list-item;color: rgb(0, 0, 0);">
    使用 AI 助手自动生成符合数据库结构的代码

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 16px;line-height: 1.75;letter-spacing: 0.544px;text-align: justify;">本文将详细介绍如何在 Cursor 中配置 Supabase MCP,实现这种无缝集成,帮助开发者创建更高效的工作流程。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;font-size: 20.8px;line-height: 1.75;display: table;color: rgb(255, 255, 255);background: rgb(15, 76, 129);text-align: center;border-radius: 8px 24px;box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px;">Supabase 与 MCP

Supabase 简介

Supabase 是一个开源的 Firebase 替代方案,它提供了构建现代应用所需的全套后端服务。与 Firebase 不同,Supabase 基于 PostgreSQL 数据库构建,这意味着你可以享受到关系型数据库的全部功能和灵活性,同时又能获得类似 Firebase 的简便开发体验。

image-20250416下午94422072

Supabase 的免费计划也可满足个人研究与学习,支持一些小型 App 的后端数据开发。

image-20250416下午94554485

核心功能

  1. Postgres 数据库:每个 Supabase 项目都是一个完整的 PostgreSQL 数据库,支持关系型数据和复杂查询,使用 SQL 进行交互。

  2. 身份验证系统:支持电子邮件/密码、OAuth、手机号码等多种登录方式,并通过行级安全性(RLS)策略保护数据。

  3. 自动生成的 API:根据数据库结构自动创建 RESTful 和 GraphQL API,无需编写额外代码。

  4. 实时订阅:通过 WebSocket 提供实时数据同步,让应用能够实时响应数据变化。

  5. 文件存储:内置的存储服务,用于上传、下载和管理各种文件。

  6. 边缘函数:允许在全球边缘节点上运行自定义代码,无需部署或扩展服务器。

  7. 向量数据库:支持 AI 应用开发,可以存储、索引和搜索向量嵌入,与 OpenAI 等模型集成。

Supabase 的开发流程

使用 Supabase 开发应用的基本流程是:

  1. 创建 Supabase 项目
  2. 设计和创建数据库表结构
  3. 配置身份验证和安全策略
  4. 使用自动生成的 API 在前端应用中访问数据
  5. 根据需要添加自定义功能和业务逻辑

Supabase 支持本地开发和云端部署,提供了完善的文档和客户端库,涵盖多种编程语言和框架,包括 JavaScript/TypeScript、React、Vue、Flutter、Swift 等。

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 能够通过自然语言理解你的需求,并与 Supabase 进行交互。

Cursor 中实操集成 Supabase MCP

将 Supabase MCP 集成到 Cursor 中只需几个简单步骤,下面是详细的操作指南:

步骤 1:创建 Supabase 个人访问令牌

首先,你需要创建一个 Supabase 个人访问令牌:

  1. 登录 Supabase 控制台(https://app.supabase.com

  2. 点击右上角的个人资料图标,选择"Account preferences"
  3. 在左侧菜单中选择"Access Tokens"
  4. 点击"Generate New Token"
  5. 给令牌起一个描述性的名称,例如"Cursor MCP Server"
  6. 点击"Generate"并复制生成的令牌(注意:令牌只会显示一次)
image-20250416下午85531557

步骤 2:在 Cursor 中配置 MCP

  1. 打开 Cursor 编辑器
  2. 在项目根目录创建.cursor文件夹(如果尚不存在)

  3. .cursor文件夹中创建mcp.json文件

  4. mcp.json文件中添加以下配置:

{
"mcpServers":{
"supabase":{
"command":"npx",
"args":[
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"<personal-access-token>"
]
}
}
}

5. 将<personal-access-token>替换为你在步骤 1 中创建的实际令牌

6. 保存 json 文件
image-20250416下午90120697

步骤 3:验证连接

  1. 在 Cursor 中,打开设置(可以通过按Cmd+PCtrl+P并输入 "Cursor Settings")

  2. 导航至 MCP 设置,确认 Supabase MCP 服务器已被识别并启用
  3. 如果服务器旁边显示绿色状态指示器,则表示连接成功
image-20250416下午85815934

步骤 4:使用 MCP 功能

现在,你可以在 Cursor 聊天中使用 Supabase MCP 功能。例如,你可以:

  1. 打开 Cursor 聊天(通过按Cmd+ICtrl+I

  2. 在聊天中输入你的 Supabase 相关问题或命令,例如 "列出我的 Supabase 项目" 或 "在我的数据库中创建一个新表"

Cursor 的 AI 助手将识别这些请求,调用 Supabase MCP 服务器,并执行相应的操作。

image-20250416下午90724898

Windows 用户注意事项

如果你使用的是 Windows 系统,你需要在配置中添加额外的命令前缀:

{
"mcpServers":{
"supabase":{
"command":"cmd",
"args":[
"/c",
"npx",
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"<personal-access-token>"
]
}
}
}

如果你使用的是 WSL (Windows Subsystem for Linux),则配置应该是:

{
"mcpServers":{
"supabase":{
"command":"wsl",
"args":[
"npx",
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"<personal-access-token>"
]
}
}
}

确保 Node.js 在你的系统 PATH 环境变量中可用。

实用操作示例

以下是几个使用 Cursor 集成 Supabase MCP 的实际操作示例,包含了初学者可以直接使用的示例数据和SQL代码:

示例 1:列出所有 Supabase 项目

提示词

列出我所有的Supabase项目

AI 助手会调用 Supabase MCP 的list_projects工具,并返回你的项目列表,包括项目名称、ID 和状态。

image-20250416下午90712908

示例 2:创建用户管理系统的数据库表

提示词

在我的supabase项目 "today-lunch-picker" 中创建一个用户管理系统,需要以下表:
1. 用户表(users)
2. 角色表(roles)
3. 用户角色关联表(user_roles)
先在聊天框中输出以上表结构的 sql 语句,然后再执行到 supabase 当中。

AI将生成并执行类似以下的SQL

-- 创建角色表
CREATE TABLEIFNOTEXISTSpublic.roles (
id SERIALPRIMARY KEY,
nameVARCHAR(50)NOT NULLUNIQUE,
description TEXT,
created_at TIMESTAMPTZNOT NULLDEFAULTNOW(),
updated_at TIMESTAMPTZNOT NULLDEFAULTNOW()
);

-- 添加默认角色
INSERT INTOpublic.roles (name, description)
VALUES
('admin','管理员角色,拥有所有权限'),
('user','普通用户角色,拥有基本权限');

-- 启用行级安全
ALTER TABLEpublic.roles ENABLEROWLEVEL SECURITY;

-- 创建策略
CREATEPOLICY "Roles are viewable by authenticated users"ONpublic.roles
FORSELECTUSING(auth.role()='authenticated');

CREATEPOLICY "Roles are editable by admins"ONpublic.roles
FORALLUSING(auth.role()='authenticated'ANDEXISTS(
SELECT1FROMauth.users
WHEREauth.users.id=auth.uid()ANDauth.users.raw_app_meta_data->>'role'='admin'
));

-- 创建用户表
CREATE TABLEIFNOTEXISTSpublic.users (
id UUIDPRIMARY KEYREFERENCESauth.users(id)ONDELETECASCADE,
usernameVARCHAR(100)UNIQUE,
display_nameVARCHAR(100),
avatar_url TEXT,
phoneVARCHAR(20),
address TEXT,
bio TEXT,
is_activeBOOLEANDEFAULTTRUE,
created_at TIMESTAMPTZNOT NULLDEFAULTNOW(),
updated_at TIMESTAMPTZNOT NULLDEFAULTNOW()
);

-- 创建触发器函数,当新用户注册时自动创建记录
CREATEORREPLACEFUNCTIONpublic.handle_new_user()
RETURNSTRIGGERAS$$
BEGIN
INSERT INTOpublic.users (id, username, display_name)
VALUES(
NEW.id,
NEW.email,
COALESCE(NEW.raw_user_meta_data->>'display_name', split_part(NEW.email,'@',1))
);
RETURNNEW;
END;
$$LANGUAGEplpgsql SECURITY DEFINER;

-- 创建触发器
CREATEORREPLACETRIGGERon_auth_user_created
AFTERINSERTONauth.users
FOREACHROWEXECUTEFUNCTIONpublic.handle_new_user();

-- 启用行级安全
ALTER TABLEpublic.users ENABLEROWLEVEL SECURITY;

-- 创建策略
CREATEPOLICY "Users can view all profiles"ONpublic.users
FORSELECTUSING(auth.role()='authenticated');

CREATEPOLICY "Users can update their own profile"ONpublic.users
FORUPDATEUSING(auth.uid()=id);

CREATEPOLICY "Admin can update all profiles"ONpublic.users
FORALLUSING(auth.role()='authenticated'ANDEXISTS(
SELECT1FROMauth.users
WHEREauth.users.id=auth.uid()ANDauth.users.raw_app_meta_data->>'role'='admin'
));

-- 创建用户角色关联表
CREATE TABLEIFNOTEXISTSpublic.user_roles (
id SERIALPRIMARY KEY,
user_id UUIDREFERENCESpublic.users(id)ONDELETECASCADE,
role_idINTEGERREFERENCESpublic.roles(id)ONDELETECASCADE,
created_at TIMESTAMPTZNOT NULLDEFAULTNOW(),
updated_at TIMESTAMPTZNOT NULLDEFAULTNOW(),
UNIQUE(user_id, role_id)
);

-- 创建默认角色分配函数
CREATEORREPLACEFUNCTIONpublic.assign_default_role()
RETURNSTRIGGERAS$$
DECLARE
default_role_idINTEGER;
BEGIN
-- 获取默认 'user' 角色的 ID
SELECTidINTOdefault_role_idFROMpublic.rolesWHEREname='user';

-- 为新用户分配默认角色
IF default_role_idISNOT NULLTHEN
INSERT INTOpublic.user_roles (user_id, role_id)
VALUES(NEW.id, default_role_id);
ENDIF;

RETURNNEW;
END;
$$LANGUAGEplpgsql SECURITY DEFINER;

-- 创建触发器
CREATEORREPLACETRIGGERon_public_user_created
AFTERINSERTONpublic.users
FOREACHROWEXECUTEFUNCTIONpublic.assign_default_role();

-- 启用行级安全
ALTER TABLEpublic.user_roles ENABLEROWLEVEL SECURITY;

-- 创建策略
CREATEPOLICY "User roles are viewable by authenticated users"ONpublic.user_roles
FORSELECTUSING(auth.role()='authenticated');

CREATEPOLICY "Users can manage their own roles if they're admins"ONpublic.user_roles
FORALLUSING(
auth.role()='authenticated'AND
EXISTS(
SELECT1FROMauth.users
WHEREauth.users.id=auth.uid()ANDauth.users.raw_app_meta_data->>'role'='admin'
)
);

-- 创建用户角色视图
CREATEORREPLACEVIEWpublic.users_with_rolesAS
SELECT
u.id,
u.username,
u.display_name,
u.avatar_url,
u.is_active,
ARRAY_AGG(r.name)ASroles
FROMpublic.users u
LEFTJOINpublic.user_roles urONu.id=ur.user_id
LEFTJOINpublic.roles rONur.role_id=r.id
GROUPBYu.id, u.username, u.display_name, u.avatar_url, u.is_active;

-- 创建角色管理函数
CREATEORREPLACEFUNCTIONpublic.user_has_role(user_id UUID, role_name TEXT)
RETURNSBOOLEANAS$$
BEGIN
RETURNEXISTS(
SELECT1
FROMpublic.user_roles ur
JOINpublic.roles rONur.role_id=r.id
WHEREur.user_id=user_has_role.user_idANDr.name=user_has_role.role_name
);
END;
$$LANGUAGEplpgsql SECURITY DEFINER;

CREATEORREPLACEFUNCTIONpublic.add_role_to_user(user_id UUID, role_name TEXT)
RETURNSBOOLEANAS$$
DECLARE
selected_role_idINTEGER;
BEGIN
-- 检查角色是否存在
SELECTidINTOselected_role_idFROMpublic.rolesWHEREname=add_role_to_user.role_name;

IF selected_role_idISNULLTHEN
RAISE EXCEPTION'角色 % 不存在', add_role_to_user.role_name;
ENDIF;

-- 如果不存在,则为用户添加角色
INSERT INTOpublic.user_roles (user_id, role_id)
VALUES(add_role_to_user.user_id, selected_role_id)
ONCONFLICT (user_id, role_id) DO NOTHING;

RETURNTRUE;
END;
$$LANGUAGEplpgsql SECURITY DEFINER;

CREATEORREPLACEFUNCTIONpublic.remove_role_from_user(user_id UUID, role_name TEXT)
RETURNSBOOLEANAS$$
DECLARE
selected_role_idINTEGER;
BEGIN
-- 检查角色是否存在
SELECTidINTOselected_role_idFROMpublic.rolesWHEREname=remove_role_from_user.role_name;

IF selected_role_idISNULLTHEN
RAISE EXCEPTION'角色 % 不存在', remove_role_from_user.role_name;
ENDIF;

-- 从用户中移除角色
DELETEFROMpublic.user_roles
WHEREuser_id=remove_role_from_user.user_idANDrole_id=selected_role_id;

RETURNTRUE;
END;
$$LANGUAGEplpgsql SECURITY DEFINER;

等待 AI 执行完成:

image-20250416下午93411481
image-20250416下午94759012

示例 3:查询数据

提示词

查询"today-lunch-picker"项目中角色有几种?先输出SQL,然后执行。

AI将生成并执行类似以下的SQL

SELECTid, name, description
FROMpublic.roles
ORDERBYid;

image-20250416下午93607891

高级使用技巧

只读模式

如果你希望限制 Supabase MCP 服务器仅执行读取操作,可以在命令行参数中添加--read-only标志:

{
"mcpServers":{
"supabase":{
"command":"npx",
"args":[
"-y",
"@supabase/mcp-server-supabase@latest",
"--access-token",
"<personal-access-token>",
"--read-only"
]
}
}
}

这样可以防止执行写入操作,通过以只读用户身份执行所有 SQL 查询。

注意事项

  1. 明确指定项目:在向 AI 助手提问时,始终明确指定你想要操作的 Supabase 项目名称或 ID。

  2. 分步操作:对于复杂的任务,尝试将其分解为多个步骤,逐步指导 AI 助手完成。

  3. 检查生成的 SQL:对于数据库结构变更,先要求 AI 助手展示它将要执行的 SQL,然后再确认执行。同时在重要项目中建议先关闭auto-run模式,例如:

    请为"my-blog"项目生成创建文章表的SQL,但不要执行,我想先查看SQL语句
  4. 利用上下文:AI 助手会记住对话上下文,这样你可以在多个请求中引用同一个项目或表。例如:

    1. "在my-app项目中查询所有用户表的结构"
    2. "为这个表创建一个索引,以提高按电子邮件查询的性能"
  5. 组合使用工具:例如,先获取表结构,然后生成符合该结构的查询或代码:

    1. "列出my-app项目中的所有表"
    2. "基于users表生成一个TypeScript接口"
    3. "编写一个基于该接口的React组件来显示用户列表"


最后

通过 Cursor 集成 Supabase MCP,利用 AI 助手的能力快速完成 Supabase 相关任务。这种集成特别适合需要频繁与 Supabase 交互的项目,无论是原型开发阶段还是维护现有应用。但在使用时需要结合本文中提到的注意事项,避免出现乱改你的数据库和数据。

开始使用 Cursor 和 Supabase MCP 来简化你的开发工作流程吧!

Cursor 系列精选阅读

如果你对 Cursor 感兴趣,可以按学习路径浏览我的更多专题文章:

入门篇

  • 零基础入门:5步掌握Cursor AI编辑器基础操作
  • 手把手教你重置成任意版本 Cursor,同时保留所有配置
  • Cursor必学的AI交互快捷键
  • Cursor AI提示词编写技巧总结
  • Cursor 搭建高效全栈开发环境
  • 让你的 Cursor 变得和 JetBrains IDEs 一样好用

进阶篇

  • MCP 协议详解:AI 世界的"USB-C接口"
  • Cursor 配置 MCP Server 指南
  • Cursor与Git协同工作指南
  • Cursor Rules最佳实践总结
  • Cursor Rules 进阶指南:打造企业级多语言开发规范
  • Cursor Notepads 最佳实践总结
  • Cursor 项目研发最佳实践总结

设计与开发实战

  • Cursor + Flux 构建高质量本地运行的文生图 MCP 服务
  • Cusor 使用对话直接生成 Figma UI 设计稿
  • Cursor + Figma:UI 设计稿一键转代码的高效工作流
  • 零基础3步生成专业原型图!Cursor+Claude3.7教程
  • Cursor中Claude 3.7 vs 3.5前端开发对比
  • 从0到1:完全用Cursor开发Web应用的真实体验

工作流整合

  • Cursor + PlantUML:告别手写 SQL 的高效工作流
  • Cursor 结合“电梯演讲”,生成8大场景的产品愿景表达

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

链载AI是专业的生成式人工智能教程平台。提供Stable Diffusion、Midjourney AI绘画教程,Suno AI音乐生成指南,以及Runway、Pika等AI视频制作与动画生成实战案例。从提示词编写到参数调整,手把手助您从入门到精通。
  • 官方手机版

  • 微信公众号

  • 商务合作

  • Powered by Discuz! X3.5 | Copyright © 2025-2025. | 链载Ai
  • 桂ICP备2024021734号 | 营业执照 | |广西笔趣文化传媒有限公司|| QQ