企业官网建设流程全解析

1. 为什么要把 Claude Code 接到 Supabase 上

Claude Code 单独用的时候，本质上还是一个「读代码、写代码」的助手。你让它改一个 React 组件、补一段 SQL、解释一个报错，它都能干得不错。但它看不到你数据库里真实有什么表、字段类型是什么、有没有索引、外键怎么连的。每次要写查询，你得手动把 schema 贴给它，或者来回切换 Supabase 控制台复制粘贴。

我试过在几个真实项目里这么干，最烦的不是写 SQL，而是「上下文对不上」。比如你让 Claude 写一个orders表的统计查询，它默认按created_at字段来分组，但你库里实际叫order_time，跑出来直接报column does not exist。这种错不致命，但一次一次修很消耗耐心。

Supabase MCP 解决的就是这个问题。MCP 全称 Model Context Protocol，是 Anthropic 推出的一个标准协议，让 Claude 能通过统一的接口去访问外部系统——数据库、文件系统、第三方 API 都行。Supabase 本身是开源的 Postgres，自带 REST API、鉴权、存储和 Edge Functions，免费层就能跑一个完整后端。把这两个接起来之后，Claude Code 就能直接读你的表结构、生成 SQL、执行查询、插入数据，甚至根据真实 schema 帮你写前端调用代码。

适合谁用？三类人最明显：一是独立开发者，一个人要同时管前端、后端和数据库，想让 AI 帮忙分担数据库这块；二是做 AI 编程出海方向的同学，Supabase 在海外项目里用得非常多，配合 Claude Code 能明显提速；三是刚接触 Postgres 的新手，让 Claude 帮你把「建表、插数据、查结果」这条链路跑通，比对着文档啃快得多。

这篇会从连接配置讲到一次完整的建表查询验证，中间给出可复制的 MCP 配置片段，并且把 endpoint 统一改到 TaoToken 的 Key 通道，这样你只需要维护一个 Key，不用在多个平台之间来回切换。

2. 前置准备：TaoToken 统一 Key 通道与 MCP 环境

在动手配 Supabase MCP 之前，先把「Claude Code 怎么调用模型」这件事理顺。Claude Code 默认走的是 Anthropic 官方通道，但国内直连经常不稳定，而且 Key 管理分散。TaoToken 提供的是一个统一的 Key 通道，把模型调用收敛到一个 endpoint 上，Claude Code、Cline、Codex 这些工具都能共用同一个 Key。

先注册并拿到 Key。打开官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，注册后在控制台里创建一个 API Key。控制台地址是 https://taotoken.net/console ，Key 管理页面在 https://taotoken.net/api-keys 。创建完记得复制保存，页面刷新后就不再完整显示了。

拿到 Key 之后，Claude Code 这边需要设置两个环境变量。Base URL 指向https://taotoken.net/api，注意这个地址不加任何 UTM 参数，就是纯 API 入口。Key 就是你刚复制的那串。

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的TaoToken密钥"

如果你用的是 Claude Code 的配置文件方式，可以在~/.claude/settings.json里写：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的TaoToken密钥" } }

Model ID 这块，Claude Code 默认会请求claude-sonnet-4-5这类模型标识，TaoToken 通道是兼容的，你不需要额外改。如果遇到模型找不到的报错，去 https://taotoken.net/doc 查一下当前支持的模型列表，把 Model ID 对齐即可。

接下来是 Supabase 侧的准备。你需要一个 Supabase 项目，登录 supabase.com 新建一个，记下两个东西：项目 URL（形如https://xxxx.supabase.co）和 service_role key（在 Project Settings → API 里，注意用 service_role 而不是 anon，因为 MCP 要执行建表和写入操作）。这两个值后面会写进 MCP 配置里。

MCP 的运行环境需要 Node.js。确认一下版本：

node -v npm -v

Node 18 以上就行。然后建一个专门放 MCP 脚本的目录，我习惯放在~/.mcp/supabase下面，方便统一管理。

mkdir -p ~/.mcp/supabase cd ~/.mcp/supabase npm init -y npm install @supabase/supabase-js

装完@supabase/supabase-js之后，这个目录里就有了node_modules，后面 MCP 脚本直接 require 它就行。这一步别跳过，很多人配 MCP 失败就是因为脚本里 import 了一个没装的包。

3. 可复制的 Supabase MCP 配置片段

这一节给出完整的配置文件，路径和原文保持一致，你直接复制改几个值就能用。

先创建 MCP 服务脚本。在~/.mcp/supabase/index.js里写入：

#!/usr/bin/env node import { createClient } from "@supabase/supabase-js"; const [, , url, key] = process.argv; if (!url || !key) { console.error("缺少 Supabase URL 或 Key"); process.exit(1); } const supabase = createClient(url, key); // 简单的连通性检查 const { data, error } = await supabase.from("_mcp_health").select("*").limit(1); if (error && error.code !== "PGRST205") { console.error("连接失败:", error.message); process.exit(1); } console.log("Connected to Supabase:", url);

注意这里用了一个_mcp_health表做探活，如果表不存在会返回PGRST205（表未找到），这其实说明连接是通的，只是表还没建，所以代码里把这个错误码排除掉。这样你第一次跑的时候不会因为表不存在而误判连接失败。

然后是 Claude Code 的 MCP 配置文件。原文用的是~/.mcp/config.toml，我们保持一致：

[mcp.supabase] command = "node" args = [ "/Users/你的用户名/.mcp/supabase/index.js", "https://xxxx.supabase.co", "your_service_role_key" ]

三个地方要改：/Users/你的用户名/换成你本机的实际路径，Windows 下是C:\\Users\\你的用户名\\.mcp\\supabase\\index.js；https://xxxx.supabase.co换成你的 Supabase 项目 URL；your_service_role_key换成 service_role key。

如果你用的是 Cline 或者 Claude Code 的 MCP 配置界面，格式会略有不同，通常是 JSON：

{ "mcpServers": { "supabase": { "command": "node", "args": [ "/Users/你的用户名/.mcp/supabase/index.js", "https://xxxx.supabase.co", "your_service_role_key" ] } } }

这里有个关键点：Base URL、Key、Model ID 三件套要写全。Base URL 是 TaoToken 的https://taotoken.net/api，Key 是 TaoToken 的 API Key，Model ID 是 Claude 的模型标识。Supabase 的 URL 和 Key 是另一套，别混在一起。很多人配错就是把 Supabase 的 key 填到了 ANTHROPIC_API_KEY 里，结果模型调用直接 401。

配置写完后，重启 Claude Code 或者重新加载 MCP 配置。在 Claude Code 里输入/mcp可以查看当前加载的 MCP 服务列表，看到supabase就说明配置被读到了。

4. 验证请求：一次建表查询的完整动作

配置好之后，最重要的就是验证它真的能跑通。别急着让 Claude 写复杂业务，先用一个最小闭环：建表 → 插数据 → 查结果。

打开 Claude Code，在对话里输入：

我已经配置了 Supabase MCP，请先检查数据库连接是否正常。

如果配置正确，Claude 会调用 MCP 的探活逻辑，返回类似Connected to Supabase: https://xxxx.supabase.co的信息。如果返回的是连接失败或者超时，先去看第 5 节的排查。

连接确认后，让它建一张表：

帮我在 Supabase 里新建一个 users 表，字段有 id（uuid 主键）、name（text）、email（text）、created_at（timestamp 默认 now）。

Claude 会生成这样的 SQL 并通过 MCP 执行：

create table users ( id uuid primary key default gen_random_uuid(), name text not null, email text not null unique, created_at timestamp default now() );

执行成功后，你可以让它插一条数据：

往 users 表插入一条记录，name 是 Miaomiao，email 是 hi@example.com。

对应的操作是：

await supabase.from("users").insert({ name: "Miaomiao", email: "hi@example.com" });

最后查询验证：

查询 users 表的所有记录。

Claude 会返回类似：

[ { "id": "a1b2c3d4-...", "name": "Miaomiao", "email": "hi@example.com", "created_at": "2025-01-15T10:30:00" } ]

到这一步，整条链路就通了。Claude Code 通过 MCP 读到了真实表结构，生成了正确的 SQL，执行后拿到了真实数据。后面你再让它写前端调用代码，它就能基于真实的字段名来写，不会再出现order_time写成created_at这种问题。

如果你想验证模型通道是否也走通了，可以打开 https://taotoken.net/models 用同一个 Key 做一次对话测试，确认模型侧和数据库侧两条链路都正常。

5. 常见报错排查：401、local proxy failed、reading choices

配 MCP 的过程里，报错基本集中在几个地方。我把踩过的坑列出来，对照着查会快很多。

401 Unauthorized。这个最常见，分两种。一种是模型调用返回 401，说明 TaoToken 的 Key 不对或者没生效。检查ANTHROPIC_API_KEY是不是完整复制了，有没有多余空格。另一种是 Supabase 返回 401，说明 service_role key 填错了，或者用了 anon key 去执行建表操作。anon key 权限不够，建表会直接被拒。确认你用的是 service_role key。

local proxy failed。这个报错通常出现在 Claude Code 启动阶段，意思是它连不上你配置的 Base URL。先确认ANTHROPIC_BASE_URL写的是https://taotoken.net/api，不要带路径后缀，也不要带 UTM 参数。然后用 curl 测一下：

curl -X POST https://taotoken.net/api/v1/messages \ -H "x-api-key: sk-你的密钥" \ -H "anthropic-version: 2023-06-01" \ -H "content-type: application/json" \ -d '{"model":"claude-sonnet-4-5","max_tokens":100,"messages":[{"role":"user","content":"hi"}]}'

如果 curl 能通但 Claude Code 不通，那就是 Claude Code 的配置文件没被读到，检查~/.claude/settings.json的路径和格式。

reading choices 报错。这个一般出现在 MCP 返回的数据格式不对的时候。Claude Code 期望 MCP 返回结构化的 JSON，如果你的脚本里console.log混入了非 JSON 内容，解析就会失败。检查index.js里除了必要的日志，不要输出多余内容。探活那条console.log是允许的，但别在数据返回路径上打日志。

OAuth 相关报错。Supabase 的某些操作需要 OAuth token，如果你用的是 service_role key 直连，一般不会触发。但如果报 OAuth 错误，说明你的 Supabase 项目开启了 RLS（行级安全）且策略不允许 service_role 绕过。去 Supabase 控制台的 Authentication → Policies 里检查一下，或者临时关掉 RLS 测试。

MCP 服务没加载。在 Claude Code 里输入/mcp看不到 supabase，说明配置文件路径不对或者 TOML 格式有误。TOML 对缩进和引号敏感，args数组里的每一项都要用双引号，路径里的反斜杠在 Windows 下要转义。

建表成功但查询报 column does not exist。这说明 Claude 生成的 SQL 字段名和实际表结构不一致。让 Claude 先执行一次select * from information_schema.columns where table_name = 'users'把真实字段拉出来，再基于结果写查询。这也是 MCP 的价值所在——它能自己查 schema，不用你手动贴。

6. 把这条链路用起来：从建表到前端调用

跑通验证之后，这条链路能做的事情比想象中多。我平时的工作流是这样的：先在 Claude Code 里用自然语言描述需求，让它通过 MCP 建表、加索引、插测试数据，确认数据结构没问题之后，再让它基于真实 schema 生成 Next.js 的 API 路由和前端页面。

比如让它写一个用户列表接口：

基于 users 表，帮我写一个 Next.js 的 /api/users 路由，用 Supabase SDK 查询所有用户并返回 JSON。

Claude 会生成类似这样的代码：

import { createClient } from "@supabase/supabase-js"; const supabase = createClient( process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY ); export default async function handler(req, res) { const { data, error } = await supabase.from("users").select("*"); if (error) return res.status(500).json({ error: error.message }); res.status(200).json(data); }

因为 Claude 已经通过 MCP 看过真实的users表结构，它生成的字段名、类型都是对的，你复制过去基本不用改。这就是「可对话式数据库开发」的实际体验——不是让 AI 替你写代码，而是让它在真实上下文里写代码。

长期做编码和 Agent 方向的话，可以考虑用 Coding Plan，把模型调用和 MCP 工具链统一管理，地址是 https://taotoken.net/coding-plan 。如果只是想先验证模型通道，用模型对话页面测一下就行：https://taotoken.net/models 。接入文档在 https://taotoken.net/doc ，API Key 管理在 https://taotoken.net/api-keys 。

最后说一个实用技巧：把 Supabase 的 URL 和 Key 放到环境变量里，不要硬编码在 MCP 配置文件中。这样你换项目的时候只需要改环境变量，配置文件不用动。Claude Code 的 MCP 配置支持读取环境变量，把args里的值换成process.env.SUPABASE_URL和process.env.SUPABASE_KEY就行。