企业官网建设流程全解析

前端项目推上主分支后，想让 Claude Code 通过 MCP 自动跑一遍 ESLint 和 Lighthouse，这件事的卡点往往不在工具本身，而在 Claude Code 默认的模型通道不一定指向可用的兼容地址。要让 MCP 进入自主执行前的准备状态，先把 Base URL 换到 TaoToken 通道：打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 创建 Key，再把 ANTHROPIC_BASE_URL 填成 https://taotoken.net/api。TaoToken 在这个环节只提供 Key 和 Base URL，不代替 Claude Code 执行任何工具逻辑。工具能不能被调起来，最终还是靠本地的 MCP server 进程。

MCP 火起来之后，很多前端同学的第一反应是去插件市场找 ESLint、Lighthouse、Playwright 的 server，把配置塞进项目，然后期待 AI 自己把质检、构建、性能报告串起来。真正动手时才发现，工具列表能不能被模型看到，取决于模型通道能不能稳定返回工具描述和调用指令。Claude Code 默认走的那条通道，可能因为额度、模型版本、路径规则或者兼容性问题，没法在 MCP 场景里持续工作。接入配置这一步做扎实，后面调试 MCP server 才不会来回甩锅。

把 Claude Code 想成一个项目经理，MCP server 是它手边的工具箱，模型通道则是项目经理和总部之间的电话线。电话线不通，工具箱再全，项目经理也只能站在原地。MCP 负责定义工具箱的说明书格式，TaoToken 负责把电话线接到一个能用的兼容地址上。两件事分开配，排查的时候才不会把 401、404 和工具列表为空混在一起。

1. 从主分支提交质检说起：MCP 把 ESLint、Lighthouse 挂到 Claude Code 上

1.1 原文那个“AI 自动触发质检”的场景，拆开只有三层

前端把代码合进主分支之后，希望 AI 顺手跑完 ESLint，再拉一次 Lighthouse 报告，然后把结果贴回评论里。这个画面听起来像一个大而全的自动化平台，拆开看其实只有三层：Claude Code 作为 MCP 主机发起请求，MCP 客户端在主机内部和各个 server 保持连接，MCP server 则提供 ESLint、Lighthouse 这些具体工具。模型不直接执行 npm 命令，也不直接打开浏览器跑性能测试，它只负责理解工具描述、生成调用参数，再把调用指令交给 MCP 客户端。

原文里提到的“工具选择”阶段，本质上是模型在上下文里看到了一张工具菜单。菜单里写着工具名、用途、参数格式，模型根据用户那句“检查代码里有没有内存泄漏，再生成性能报告”去挑工具。如果模型通道不稳定，这张菜单可能加载不全，或者模型返回的调用指令格式对不上，表现就是 Claude Code 里能看到 MCP server 名字，但工具列表空空如也，或者刚调用一次就断连。

所以接入配置的顺序很清楚：先解决模型通道，再解决 MCP server 注册。先让 Claude Code 能稳定地和模型通信，再去 .mcp.json 里挂 ESLint、Lighthouse 的 server。反过来做，你会花很多时间怀疑 MCP 配置，最后发现是 Base URL 没有指到可用通道。

1.2 MCP 主机、客户端、服务器，和 Claude Code 的角色对应

在 Claude Code 这套工具里，MCP 主机就是 Claude Code 本身，MCP 客户端运行在 Claude Code 内部，负责和每一个 MCP server 建立一对一连接。MCP server 可以是本地进程，也可以是远程服务，它把工具、资源、上下文暴露成协议规定的格式。前端项目里常见的组合是：本地跑一个 ESLint MCP server，再跑一个 Lighthouse MCP server，Claude Code 通过客户端连接它们，模型根据当前任务决定调用哪一个。

这里有个容易混淆的点：MCP server 是工具仓库，不是模型通道。你把 ESLint MCP server 配好了，只代表 Claude Code 知道有这个工具；模型能不能读到工具描述，取决于 Claude Code 发出去的请求有没有得到正常响应。如果 ANTHROPIC_BASE_URL 还指向一个不可用或者不兼容的地址，MCP 客户端连得再好，模型侧也可能收不到工具清单。这就是为什么本文把 Base URL 的改动放在 MCP 配置前面。

安全边界也要提前说清楚。MCP server 在本地执行 ESLint、Lighthouse 这类只读或构建类任务，风险相对可控；但不要把它理解成模型直接连上了生产库或者生产机器。AI 编程工具默认只负责生成、解释、对照代码或配置，真正的命令执行、SQL 诊断、编译运行，都应该由读者在本地终端或对应客户端里完成，再把结果贴回对话。MCP 让工具调用更顺，不改变这条执行边界。

1.3 为什么接入配置要放在工具配置前面

很多教程一上来就让你复制一大段 mcpServers JSON，结果你配完发现 Claude Code 连启动都报错。原因是模型通道没通，Claude Code 还没进入能加载 MCP 工具列表的状态。先把 ANTHROPIC_BASE_URL 指向 https://taotoken.net/api，再用一把可用的 Key 启动 Claude Code，至少保证基础对话能跑通。基础对话通了，再去加 MCP server，每加一个就验证一次，问题范围会小很多。

另一个原因是模型 ID 和 MCP 工具描述是两种东西。模型 ID 决定 Claude Code 用哪个模型来理解任务，工具描述决定模型能看到哪些工具。模型 ID 填错，可能直接 404；工具描述没加载，可能模型一直在用内置能力瞎猜。把这两类问题分开，配置文件里的字段各归各管，排障时就不会把“模型名不存在”和“MCP server 没启动”混成同一个错误。

2. 在 TaoToken 拿 Key：官网、Base URL 和模型 ID 别混

2.1 打开官网创建 API Key

准备材料只有三样：一个可用的 API Key、正确的 Base URL、从模型广场复制来的模型 ID。打开 TaoToken 注册并创建 API Key，生成后先复制到安全的地方。本文所有示例里的 Key 都写成 YOUR_API_KEY，你实际配置时替换成自己创建的那一串。不要把 Key 写进前端代码、提交到 Git，也不要贴在公开的 issue 里。

Key 的权限和额度在控制台里能看到。如果你只是先验证 Claude Code 能不能连上 MCP，可以先用一把测试 Key，等工具列表跑通之后，再换成长期使用的 Key。换 Key 时只需要改 ANTHROPIC_AUTH_TOKEN 的值，Base URL 和模型 ID 不用动。这样排查问题的时候，变量更少。

2.2 官网给人点，Base URL 给工具填

官网地址和接口地址是两件事，混用会直接导致请求失败。给人点的落地页是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end，在这里注册、创建 Key、看模型广场、查用量。填进 Claude Code 的 Base URL 是 https://taotoken.net/api，末尾不要加 /v1。Claude Code 会在这个地址后面自己拼接接口路径，你再加一层 /v1，请求就会变成类似 /v1/v1/messages 的形式，404 往往就是这么来的。

这个区分和 MCP 的客户端-服务器模型很像：官网是管理入口，Base URL 是数据通道。管理入口用来拿凭证、看额度；数据通道用来让 Claude Code 和模型通信。两者不能互相替代，也不能把官网链接填进配置文件。配置里只认 https://taotoken.net/api 这个形式，不要带查询参数，不要带 /v1。

2.3 模型 ID 去模型广场复制

模型 ID 不要凭记忆手写，也不要把日期后缀当成必填项。不同通道、不同时间上架的模型 ID 可能不一样，最稳妥的做法是打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 看模型广场当时的列表，复制你要用的那个 ID，再填到 ANTHROPIC_MODEL 里。本文示例里写 YOUR_MODEL_ID，是因为模型列表会变，写死一个具体字符串反而容易过期。

如果你在 Claude Code 里看到“模型不存在”或者“model not found”，第一个动作是回模型广场核对 ID，而不是去改 MCP 配置。模型 ID 错了，Claude Code 连基础对话都发不出去，更别提加载 MCP 工具列表。核对完 ID，再确认 ANTHROPIC_BASE_URL 没有多写路径，基本就能排除大部分启动阶段的错误。

3. ~/.claude/settings.json 里把 ANTHROPIC_BASE_URL 指到 TaoToken 通道

3.1 临时环境变量写法

如果你只想快速验证一次，可以在当前终端里导出环境变量，再启动 Claude Code。临时变量的好处是关掉终端就失效，不会污染全局配置，适合拿来试 Key 和模型 ID。坏处是每开一个新终端都要重新导出，长期使用还是建议写进 settings.json。

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" export ANTHROPIC_MODEL="YOUR_MODEL_ID" claude

这段命令里，Base URL 没有 /v1，Key 用占位符，模型 ID 从模型广场复制。启动 claude 之后，先不要急着加 MCP server，先发一句普通对话，确认 Claude Code 能正常返回内容。基础对话通了，说明模型通道这个环节已经打通。

3.2 settings.json 的 env 写法

长期使用更推荐把配置写进 ~/.claude/settings.json，让 Claude Code 每次启动都自动读取。文件里用 env 对象承载环境变量，字段名分别是 ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL。下面的示例可以直接复制，但要把 YOUR_API_KEY 和 YOUR_MODEL_ID 换成你自己的值。

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY", "ANTHROPIC_MODEL": "YOUR_MODEL_ID" } }

保存之后重新启动 Claude Code。注意不要在这个文件里同时写两套 Base URL，也不要把 /v1 加在 https://taotoken.net/api 后面。如果你之前配置过别的通道，先注释掉或者删掉旧字段，避免优先级冲突。Claude Code 读取配置时，环境变量和 settings.json 可能同时生效，保留一份清晰的配置更省事。

3.3 怎么确认 Claude Code 读到了配置

确认方式不是问模型“你的 Base URL 是什么”，模型不一定知道运行时配置。更可靠的做法是看启动日志和报错。启动 claude 后，如果立刻出现 401，说明请求已经打到服务端但认证没过；如果出现 404，说明路径不对；如果根本没有网络请求报错，能正常对话，说明通道基本可用。此时再进入 MCP 配置环节，问题范围就缩小到了本地 server 和 .mcp.json。

如果你改了 settings.json 但行为没变化，先检查文件路径是不是 ~/.claude/settings.json，再确认终端里有没有残留的旧环境变量。有些 shell 配置会在启动时自动导出 ANTHROPIC_BASE_URL，覆盖掉 settings.json 里的值。可以把env | grep ANTHROPIC的输出看一眼，确认当前会话里实际生效的是哪一套。

4. .mcp.json 里加 ESLint、Lighthouse：工具列表和模型通道分开配

4.1 mcpServers 的结构

Claude Code 的项目级 MCP 配置通常放在 .mcp.json，顶层是 mcpServers 对象，里面每个键是一个 server 名称，值里写 command、args 等启动参数。下面用一个真实的 filesystem server 做示例，先把链路跑通，再换成 ESLint 或 Lighthouse 的 server。注意，这个文件只负责告诉 Claude Code 怎么启动 MCP server，不负责模型通道。

{ "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"] } } }

把 /path/to/your/project 换成你的前端项目根目录。保存后重启 Claude Code，让配置生效。这个 filesystem server 可以用来看项目文件，适合验证 Claude Code 能不能识别并连接 MCP server。等它出现在工具列表里，你再把 ESLint、Lighthouse 的 server 按同样结构加进去。

4.2 用 claude mcp add 添加第一个 server

除了手写 .mcp.json，也可以用 Claude Code 自带的命令添加 MCP server。下面的命令会往配置里写入一个名为 filesystem 的 server，命令是 npx，参数是 -y 和官方包名，最后跟上项目路径。先跑通这个，再考虑替换成 ESLint 或 Lighthouse 的 server。

claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /path/to/your/project claude mcp list

claude mcp list会列出当前已注册的 MCP server。如果这里能看到 filesystem，说明 Claude Code 已经读到了 MCP 配置。接下来进入 Claude Code 会话，用/mcp查看连接状态和工具列表。工具列表能出来，才代表 MCP 客户端和 server 之间的握手完成。

4.3 换成 ESLint、Lighthouse 时不要抄错 command

ESLint 和 Lighthouse 的 MCP server 不一定叫同一个包名，启动参数也各不相同。配置时把 name 换成你容易识别的名字，比如 eslint-check 或 lighthouse-report，command 和 args 以对应工具方文档给出的为准。不要为了凑示例去编造一个不存在的 npm 包，也不要把模型 ID 填到 MCP server 的 args 里。模型 ID 属于 Claude Code 侧，MCP server 侧只关心自己怎么启动、需要哪些参数。

如果你同时配多个 MCP server，建议每加一个就重启一次 Claude Code，并用/mcp确认它单独可用。一次性塞五六个 server，出错时很难判断是哪一个启动失败。尤其是 ESLint 这种依赖项目本地配置的工具，工作目录、Node 版本、依赖安装情况都会影响 server 能不能正常跑起来。

5. 在 Claude Code 里用 /mcp 看工具列表，确认通道和工具都活了

5.1 /mcp 命令看连接状态

进入 Claude Code 会话后，输入/mcp，界面会列出已连接的 MCP server 和它们暴露的工具。如果 filesystem 显示已连接，并且能看到 read_file、write_file 之类的工具名，说明 MCP 链路是通的。再把 ESLint 或 Lighthouse 的 server 加上，重新执行/mcp，确认新 server 也出现在列表里。列表为空时，先查 .mcp.json 路径和 command，不要第一时间去改 Base URL。

如果/mcp里 server 状态是 failed，通常能在旁边看到启动错误。常见原因是 npx 找不到包、路径写错、Node 版本不满足、或者命令不在 PATH 里。把这些错误复制出来，对照 MCP server 的 README 排查。模型通道的问题通常表现为对话报错，而不是单个 server 启动失败，这两类日志要分开看。

5.2 发一条只读测试

工具列表出现之后，可以发一条只读测试，比如让 Claude Code 列出当前项目里有哪些文件，或者解释某条 ESLint 规则的作用。注意，真正的文件读取和 ESLint 执行由 MCP server 在本地完成，模型只负责生成调用参数和解释结果。涉及修改文件、删除文件、执行构建脚本的操作，先不要一上来就让它自动跑，确认工具行为符合预期再逐步放开。

如果你让 Claude Code 去跑 Lighthouse，它可能会调用对应的 MCP 工具，但浏览器环境、端口、Chrome 路径这些仍然由本地机器决定。AI 不能替你安装缺失的系统依赖，也不能绕过本地权限。遇到工具调用失败，先把 MCP server 单独在终端里跑一遍，确认它自己能工作，再回到 Claude Code 里重试。

5.3 去控制台看这次调用有没有记上

对话和工具调用都跑通之后，打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 看一眼用量记录。如果这次 Claude Code 的请求没有出现在记录里，说明请求可能没有走到 TaoToken 通道，回查 ANTHROPIC_BASE_URL 是不是被旧环境变量覆盖，或者 settings.json 有没有写错字段名。用量记录能对上，模型通道这一层就算稳定了。

控制台里还能看到 Key 的调用情况。如果发现某个 Key 用量异常，及时停用并重新创建。不要把长期 Key 写进项目里的 .mcp.json，MCP 配置只应该包含 server 启动命令，不应该包含模型通道的密钥。密钥统一放在 Claude Code 的环境变量或 settings.json 里，项目配置文件可以提交到 Git，但不要带 Key。

6. 401、404 和工具列表为空的排查顺序

6.1 401：Key 不对或没带上

401 说明请求已经到达服务端，但认证没通过。检查 ANTHROPIC_AUTH_TOKEN 的值是不是 YOUR_API_KEY 替换后的真实 Key，前后有没有多余空格或换行。如果 Key 是从旧项目里复制过来的，确认它没有过期或被停用。最直接的办法是去 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 重新创建一把 Key，替换后再启动 Claude Code。

还有一种情况是环境变量和 settings.json 同时存在，旧变量覆盖了新配置。可以在终端里执行env | grep ANTHROPIC，看看当前实际生效的 Key 是哪一个。如果输出里出现了你不认识的旧 Key，把它从 shell 配置里删掉，或者在新终端里重新导出。排查认证问题时，保持只有一处 Key 来源最省心。

6.2 404：Base URL 写了 /v1

404 在本篇配置里最常见的原因是 ANTHROPIC_BASE_URL 多写了 /v1。Claude Code 会自己拼接接口路径，如果 Base URL 写成 https://taotoken.net/api/v1，最终请求可能变成 /v1/v1/messages，服务端找不到这个路径。正确写法是 https://taotoken.net/api，末尾不要带 /v1，也不要带其他路径。

改完之后重启 Claude Code，再发一条基础对话。如果 404 消失，说明问题就在路径。不要把官网地址 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 填进 ANTHROPIC_BASE_URL，那个地址是给人打开页面用的，不是给工具发请求用的。两个地址混用，也会表现成 404 或返回 HTML 内容。

6.3 工具列表为空：MCP server 没起来

基础对话正常，但/mcp里工具列表为空，说明模型通道已经通了，问题在 MCP 配置。先看 .mcp.json 是不是放在项目根目录，或者claude mcp list里有没有你添加的 server。再用claude mcp add重新添加一次，观察命令输出有没有报错。如果 server 状态是 failed，点开错误详情，通常是包名不对、npx 下载失败、路径不存在。

ESLint 和 Lighthouse 的 MCP server 依赖本地项目环境。项目里没有安装对应依赖、Node 版本太低、工作目录不对，都会让 server 启动后立刻退出。把 command 和 args 复制到终端里单独执行，如果终端里也跑不起来，Claude Code 里更跑不起来。先把终端跑通，再回到 Claude Code。

6.4 改完配置要重启 Claude Code

settings.json 和 .mcp.json 的改动通常需要重启 Claude Code 才会生效。改完文件直接在当前会话里试，很容易得到旧配置的结果。重启之后再执行/mcp，再发一条测试消息。如果还是不对，把终端里的报错、/mcp的状态、以及你改过的字段列出来，对照 401、404、server 启动失败三类问题逐一排除。

排查时不要同时改三个地方。先只动 ANTHROPIC_BASE_URL，确认基础对话通；再只加一个 MCP server，确认工具列表出现；最后再换成 ESLint、Lighthouse。每一步只引入一个变量，问题定位会快很多。

7. 跑通之后，去模型对话和控制台做一次闭环

7.1 用同一把 Key 在模型对话里发消息

Claude Code 里能聊天、/mcp能看到工具之后，可以打开 TaoToken 模型对话 用同一把 Key 发一条测试消息。这一步是为了确认 Key 本身、模型 ID、Base URL 三者没有互相矛盾。模型对话里能正常返回，说明凭证和模型选择没问题；如果这里报错，先解决 Key 和模型 ID，再回头查 Claude Code 的 MCP 配置。

模型对话也可以用来试你准备让 Claude Code 调用的模型。不同模型对工具描述的理解能力不同，有些模型在 MCP 场景里更容易生成格式正确的调用参数。模型 ID 以模型广场当时列表为准，不要凭记忆写。选好之后，把同一个 ID 填回 Claude Code 的 ANTHROPIC_MODEL。

7.2 长期写代码看 Coding Plan

如果你准备每天让 Claude Code 带着 ESLint、Lighthouse 这些 MCP 工具跑任务，可以打开 Coding Plan 看套餐是否够用。Claude Code 的 MCP 场景会频繁发请求，工具描述、调用参数、结果解释都会占用额度。先用小任务观察一段时间，再决定要不要调整套餐。

不要等到额度用完才发现 Key 没有限额。控制台里的用量记录可以帮你判断是哪个项目、哪个 Key 在消耗。如果团队多人共用，最好每人一把 Key，出问题能定位到人，也方便单独停用。

7.3 Key 和文档

后续要新建 Key，可以在 控制台 API Keys 创建。Claude Code 环境变量和 settings.json 的字段对照，可以看 Claude Code 接入文档。文档里如果提到 Base URL，仍然填 https://taotoken.net/api，不要加 /v1，也不要把官网链接带进去。

配置到这一步，Claude Code 的模型通道和 MCP 工具列表就分开了：通道负责让模型稳定工作，MCP server 负责在本地执行具体工具。后面再遇到“工具列表为空”或者“调用一次就断”，先看/mcp状态，再核 ANTHROPIC_BASE_URL 和 Key，顺序不要乱。