TRAE 最佳实践征文大赛 | Trae + Supabase + Vercel 的理解与运用：TodoList 案例展示🧣

TRAE 最佳实践征文大赛：Trae + Supabase + Vercel 的理解与运用：TodoList 案例展示🧣

数据对接失败经验：TRAE2.0SOLO | 围巾哥萧尘 | 黑客马拉松比赛网站打造🧣

数据对接成功经验：TRAE SOLO | 关于 supabase 的理解与运用 | todolist案例的展示 | 围巾哥萧尘 🧣

第一步：创建 Supabase 项目，获得地址和密钥

首先需要创建一个新的 Supabase 项目。
创建项目后，将获得该项目的 URL （地址）和 Key（密钥） 。
这些地址和密钥是进行 MCP (Master Configuration Project) 配置时必需的两个参数。
具体而言，需要找到项目的项目编号 (Project ID) 和自己的 Supabase 密钥 ( API Key/Secret) 。
如果这些参数没有正确配置， MCP 将无法完成配置。

第二步：获得 Supabase Token 对接 Supabase MCP 和连接 Supabase 授权

perl 复制代码

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--project-ref=usnaxjfbqkhjgisawnzd"（这个参数是这个）
      ],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "sbp_4c0242fa6bdfb8083d2a9c1e6b467170baa60f85"
      }
    }
  }
}

要使 MCP 能够操作 Supabase 数据库，首先需要完成 MCP 的配置。
在此过程中，您需要获取一个 "Token 值" 。（supabase.com/dashboard/a...
这个 "token 值" 是通过创建访问令牌 (Access Token) 获得的。该令牌代表您的账户，并允许您执行操作。
在操作案例时，会借助 Supabase 的令牌来完成操作，利用 Trae 和 supabase 结合令牌进行操作。
在配置 MCP 时，除了项目编号和您的密钥，还需要特别注意 "project Ref 参数" ，其中真正的项目参数是列表参数的前面一段。（usnaxjfbqkhjgisawnzd.supabase.co 的 usnaxjfbqkhjgisawnzd 为 project Ref 参数）
当使用 mcp 系统时，复制 MCP 后，务必将 MCP 的地址更改为您的用户参数地址 ，这样才能正常使用。（supabase.com/docs/guides...

第三步：启动 Trae 完成 todolist 项目的开发

案例来源：@张艾伦爱编程

markdown 复制代码

# 项目说明
实现一个todo-list app

# 需求描述
- 使用当前文件夹作为项目根目录
- 使用React（Vite）+Supabase实现
- 使用Supabase默认的邮箱登录
- 使用Supabase MCP自动创建数据表
- 实现功能：用户登录、展示用户自己的Todo 列表、添加 / 删除 / 更新事项、标记完成
- 使用Row Level Security限制用户仅能访问自己的数据
- 请自动连接Supabase，并生成所需的前端代码和逻辑组件

# 环境变量说明
Supabase的项目URL和匿名密钥配置在`.env.local`文件中