1. 为什么要在 Claude Code 里接 BrowserCat MCPClaude Code 本身是个跑在终端里的编码助手能读写文件、执行命令、理解项目上下文但它默认碰不到浏览器。你让它“打开某个页面看看结构”“点一下登录按钮”“截个图确认渲染结果”它只能干瞪眼。BrowserCat MCP 就是补上这块能力的那层桥它把浏览器导航、点击、填表、截图、执行 JS 这些动作封装成 MCP 工具Claude Code 通过 MCP 协议调用就能真正驱动一个浏览器去干活。这套组合适合谁一类是写自动化脚本的开发者想用自然语言描述流程让 Claude Code 直接编排一类是做页面巡检、表单回归、数据采集辅助的运营或测试同学不想每次都手写 Playwright 样板代码还有一类是把 Claude Code 当 Agent 用、需要“看网页”这一步的工程团队。全链路的难点不在单个工具而在三件事统一 Key 通道怎么接、settings.json 配置骨架怎么写、MCP 服务注册后怎么验证真的通了。这篇就按这三步走最后给一次端到端任务验证和常见报错排查。我试过把 Key 散落在多个环境变量里结果换机器就崩所以下面统一走 TaoToken 的 API 通道一个 Key 管住模型调用配置集中到 settings.json迁移时只改一处。2. TaoToken 前置统一 Key 与 API 通道TaoToken 在这里的角色是统一入口Claude Code 的模型请求走它的 API 通道你只需要维护一个 Key不用在多个平台之间来回切换。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 这个不加 UTM。先拿 Key。登录后进控制台路径是 console直达链接 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。在 API Keys 页面创建一个新 Key建议按用途命名比如claude-code-browsercat方便后面排查是哪个 Key 出的问题。创建入口 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。注意Key 只在创建时完整显示一次复制后立刻存到密码管理器或本地.env别直接提交进 Git。拿到 Key 后Claude Code 侧需要两个环境变量一个是 API 基址一个是 Key。不同版本变量名略有差异常见的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY或ANTHROPIC_AUTH_TOKEN。在 Linux/WSL 下写进~/.bashrc或~/.zshrcexport ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的TaoToken密钥改完执行source ~/.bashrc让变量生效。验证是否读到echo $ANTHROPIC_BASE_URL echo $ANTHROPIC_API_KEY | head -c 8第二条只打印前 8 位确认非空即可别把完整 Key 打到终端历史里。如果你用的是 Coding Plan 做长期编码或 Agent 任务套餐和额度在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 查看按调用量选就行。这一步做完Claude Code 的模型通道就通了。接下来才是 BrowserCat MCP 的注册。3. 可复制配置settings.json 与 MCP 注册骨架Claude Code 的配置分两层一层是模型通道上面那两个环境变量一层是 MCP 服务注册。MCP 注册推荐用settings.json或项目级.mcp.json管理比每次敲命令可维护。先看 BrowserCat MCP 的服务定义骨架。它本质是个 npx 启动的进程通过环境变量传 API Key{ mcpServers: { browsercat: { command: npx, args: [-y, browsercatco/mcp-server], env: { BROWSERCAT_API_KEY: 你的BrowserCat密钥 } } } }BrowserCat 的 Key 需要去它官网免费套餐申请登录后创建 API Key 复制出来。这一步和 TaoToken 的 Key 是两回事TaoToken Key 管模型调用BrowserCat Key 管浏览器服务别混。把上面这段放进项目根目录的.mcp.json或者合并进 Claude Code 的settings.json。如果你想让配置对所有项目生效放在用户级配置里只想当前项目用就放项目根。一个更完整的settings.json骨架长这样{ mcpServers: { browsercat: { command: npx, args: [-y, browsercatco/mcp-server], env: { BROWSERCAT_API_KEY: 你的BrowserCat密钥 } } }, env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的TaoToken密钥 } }注意settings.json里写明文 Key 只适合本地调试。团队协作时把 Key 抽到环境变量配置文件里用占位或引用避免泄露。除了写文件也可以直接用命令注册适合临时验证claude mcp add-json browsercat {command:npx,args:[-y,browsercatco/mcp-server],env:{BROWSERCAT_API_KEY:你的密钥}}注册完用claude mcp list看列表里有没有browsercat。有就说明注册成功没有就回到配置文件检查 JSON 是否合法——JSON 少个逗号或引号是最常见的坑。4. 验证请求一次端到端浏览器任务配置写完必须验证不然你不知道是 MCP 没连上还是浏览器动作失败。分三步。第一步确认 MCP 连接。在 Claude Code 里输入/mcp会列出已连接的服务和它暴露的工具。正常应该看到browsercat下面挂着一串工具browsercat_navigate、browsercat_screenshot、browsercat_click、browsercat_fill、browsercat_select、browsercat_hover、browsercat_evaluate。看到这些就说明协议层通了。第二步发一个最小导航任务。直接对 Claude Code 说用 browsercat 打开 https://example.com 并返回页面标题它内部会调browsercat_navigate跳转再用browsercat_evaluate执行document.title取值。成功的话你会看到返回的标题文本。这一步验证的是“导航 JS 执行”链路。第三步做一次组合动作模拟真实流程。比如用 browsercat 打开百度在搜索框输入浏览器自动化点击搜索按钮截图保存对应工具调用顺序是browsercat_navigate→browsercat_fill填搜索框→browsercat_click点搜索→browsercat_screenshot截图。如果截图保存失败多半是保存路径权限问题换成项目目录下的相对路径再试。验证模型本身是否正常可以走模型对话入口 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 单独测一下排除是模型通道还是 MCP 的问题。接入细节和参数说明在文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。5. 本篇常见错排查报错一/mcp里看不到 browsercat。先claude mcp list确认注册状态。如果列表为空检查.mcp.json或settings.json的 JSON 是否合法用python -m json.tool settings.json验证。JSON 合法但没加载多半是文件放错目录——项目级配置要在项目根用户级要在对应配置目录。报错二npx 启动失败或卡住。browsercatco/mcp-server首次运行要下载网络慢会卡。手动跑一次npx -y browsercatco/mcp-server看是否报错。如果提示找不到包检查 Node 版本建议 18 以上。WSL 环境下确认 npx 在 PATH 里。报错三BROWSERCAT_API_KEY无效。确认 Key 是从 BrowserCat 官网创建后完整复制的没有多余空格。环境变量传参时注意 JSON 里不要漏引号。Key 失效就重新创建一个替换。报错四模型请求 401 或连不上。这是 TaoToken 通道问题不是 MCP 问题。检查ANTHROPIC_BASE_URL是否为https://taotoken.net/apiANTHROPIC_API_KEY是否以sk-开头且未过期。改完环境变量记得重开终端否则不生效。报错五截图保存失败。通常是路径问题。用绝对路径或项目内相对路径确认目录可写。WSL 下别往 Windows 盘符的受限目录写。报错六点击/填表定位不到元素。页面还没加载完就操作了。让 Claude Code 在导航后加一步browsercat_evaluate等待元素出现或者用browsercat_hover触发懒加载后再点。选择器尽量用稳定的 id 或 data 属性别依赖会变的 class。6. 继续往下走链路跑通后日常用法就顺了把常用流程写成提示词模板比如“打开后台 → 填账号密码 → 点登录 → 截图首页”Claude Code 会自己编排工具调用。长期做编码或 Agent 任务用 Coding Plan 更划算入口 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。需要新 Key 或管理多个项目时去 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。Claude Code 相关的接入配置参考文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有 settings.json 字段的完整说明。一个实用技巧把 BrowserCat 的 Key 和 TaoToken 的 Key 分别存成两个环境变量配置文件里只引用变量名这样换 Key 不用改 JSON也避免明文进版本库。另一个是给 MCP 调用加超时兜底页面加载慢时browsercat_navigate可能等很久在提示词里明确“等待 10 秒后截图”比默认行为可控。