MCP-Playwright 跑 JS 交互任务：Key 用 TaoToken

关注

原创 2026-09-13 09:11:29 179 阅读 AI 写同款· GEO 优化 ›

Coding plan全新升级至GLM5.3 flash + deepseek v4 flash双模型随意切换，量大管饱编程专用，满足你的生产需求

把 MCP-Playwright 装进 Claude Desktop，很多人以为装完就等于让 AI 学会点网页、跑 JS、截图了。真正跑起来才发现，LLM 本身只擅长读文本，点击、滚动、执行 JavaScript 这些动作全靠 Playwright MCP server 在本地驱动浏览器完成；而每一轮操作背后真正消耗 Token 的，是正在推理的模型，不是那个本地服务。换句话说，MCP server 只是替你握着遥控器的手，大脑仍然是模型，电量则是 Token。为了让这条链路稳定顺滑，也为了不被单一供应商的额度卡住，我选择打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 创建 TaoToken Key，并把模型 API 的 Base URL 填成 https://taotoken.net/api。一套 Key 接入不同模型，Claude Desktop 里的 MCP 交互任务马上就变得省心很多。

1. MCP-Playwright 装好了，但“谁在烧 Token”要先搞清楚

1.1 一个本地浏览器遥控器，和一个远程大脑

MCP-Playwright 这个名字容易让人误以为它本身包含模型调用。实际上，它通过 MCP（模型上下文协议）把 Playwright 的浏览器自动化能力暴露给 Claude 这类 LLM。Claude 需要点击、截图或执行 JS 时，会通过 MCP 协议下发工具调用；MCP server 收到指令后在本地启动 Chromium、Firefox 或 WebKit，完成浏览、填表、截屏、运行 JS 等操作，再把结果文本或截图返回给模型。模型拿这些实时反馈接着推理，继续安排下一步动作。

也就是说，浏览器控制能力在本地，思维在远端。Token 消耗发生在模型读取截图、分析页面结构、生成回复这段，而不是 Playwright 打开浏览器那一刻。理解这一点很重要，因为不少人在配置 MCP 工具时，习惯性想给 MCP server 也塞一个 API Key，结果发现它根本不读。真正需要 Key 的是模型 API 通道，也就是 Claude Desktop 背后请求的那个端点。这也正是 TaoToken 介入的位置：它统一了模型 API 的兼容入口，让 Key 和额度管理从“一堆供应商配置”收敛成一套。

1.2 通过 Smithery 或 mcp-get 图省事，能行吗

原文提到 Smithery 和 mcp-get 可以简化安装。它们的作用是帮你拉取和注册 MCP server，能省掉部分手工参数，但解决不了模型额度问题。因为无论用哪种方式安装，最终在 Claude Desktop 里发起对话时，还是需要一个能通过 Anthropic 兼容协议响应请求的模型通道。这里就是我接入 TaoToken 的地方。安装方式只能决定“浏览器遥控器”能不能被找到，而模型通道决定“大脑”愿不愿意正常回话，两者缺一不可。

2. 把 executeautomation/mcp-playwright 项目装进本地

2.1 克隆、装依赖、构建三步把 MCP server 跑起来

先按原文主路径操作。这个项目是前端类型，本地只需要有 npm 环境，不需要额外装浏览器驱动，Playwright 会自己处理浏览器内核。在终端执行：

git clone https://github.com/executeautomation/mcp-playwright.git
cd mcp-playwright
npm install
npm run build
npm link

npm link 的作用是把当前项目链接到全局 node_modules，让后续 npx 命令能直接找到这个 MCP server 的启动入口。建议每一条命令都单独执行并确认没有报错再继续。常见的坑是 npm install 时网络波动导致构建中断，重跑一次通常就好。构建完成后，先不要急着打开 Claude Desktop，下一步要把 claude-desktop-config.json 写对。

2.2 用 npx 启动时，为什么 --directory 不能省

Claude Desktop 加载 MCP server 靠的是 claude-desktop-config.json。原文第④步给了一段 JSON，结构上不要改动 command 和 args 的语义，但路径必须换成你本机真实的克隆目录。参考配置如下：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "--directory",
        "/绝对路径/指向/executeautomation/mcp-playwright",
        "run",
        "@modelcontextprotocol/playwright-mcp-server"
      ]
    }
  }
}

--directory 参数后面必须跟绝对路径，不能写相对路径。Windows 上建议统一用正斜杠或双反斜杠，例如 C:/apps/mcp-playwright 或 C:\apps\mcp-playwright。这一整段 JSON 和 TaoToken 没有直接关系，MCP server 进程不吃 API Key，所以不需要把 Key 塞进 args。真正需要替换的，是 Claude Desktop 请求模型时使用的鉴权信息，这部分放在下一章。

3. claude-desktop-config.json 不动 command，只换模型鉴权

3.1 先把 TaoToken Key 拿到手，再决定怎么注入

打开 TaoToken 注册并创建 API Key，得到的就是 YOUR_API_KEY。接着到它的模型广场确认你要用的模型 ID，不要根据网上旧教程猜一个 gpt-5 之类的名字，因为每个平台开放的模型 ID 可能不同。模型 ID 直接抄模型广场上的值，再填到后面配置里。TaoToken 在这里的角色不是代理也不是破解，而是一个兼容通道：它让你用一套统一 API 同时接入不同模型，顺便把额度管理和多 Key 切换握在手里。

这里要注意官网入口和接口地址是两回事。官网落地页 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 只负责注册、创建 Key、查看模型广场和用量；真正填进工具的 Base URL 是 https://taotoken.net/api，末尾不带 /v1。很多人习惯性补一个 /v1，结果接口直接 404。记住这个分工，后面所有工具配置都不容易混。

3.2 环境变量注入，把 Claude Desktop 的模型请求指向 TaoToken

Claude Desktop 的图形界面里没有填 Base URL 的框，但它在启动时会读取 ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL 这三个环境变量。macOS 用户可以在终端里先执行下面的命令，再启动 Claude Desktop：

export ANTHROPIC_BASE_URL=https://taotoken.net/api
export ANTHROPIC_AUTH_TOKEN=YOUR_API_KEY
export ANTHROPIC_MODEL=YOUR_MODEL_ID
open -a "Claude"

Windows 用户可以在 PowerShell 里执行：

$env:ANTHROPIC_BASE_URL="https://taotoken.net/api"
$env:ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"
$env:ANTHROPIC_MODEL="YOUR_MODEL_ID"
Start-Process "Claude"

这两个环境变量里填的是接口地址，不是官网地址。Base URL 是 https://taotoken.net/api，没有 /v1，也不要追加上面的 UTM 参数，那是给人点开网页注册用的，工具只认接口。如果你用的是 Claude Code 命令行版，也可以把同样内容写进 ~/.claude/settings.json 的 env 块里，效果一致。

3.3 或者把 TaoToken 配置交给 CC Switch 这类切换器

如果你不想每次在终端里 export，可以用 CC Switch 之类的桌面切换器来管理供应商。新增供应商时，Base URL 填 https://taotoken.net/api，API Key 填 YOUR_API_KEY，模型 ID 从 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 的模型广场选择。保存后切到对应供应商，再启动 Claude Desktop 即可。这个方案适合同时维护多套模型接入的人，切换时不用反复改系统环境变量。

4. 让 AI 在浏览器里跑一次 JS 和截图，验证链路

4.1 实测任务：打开页面、截图、执行 document.title

启动 Claude Desktop，确认左侧有 playwright MCP 工具。然后新建对话，给一句有明确顺序的指令：“打开 https://example.com，把页面滚动到中间，截一张当前视口的截图；接着执行 JS 取回 document.title。”模型会自己决定调用哪个 MCP 工具，并在截图完成后把结果读回来。

如果模型通道已经指到 TaoToken，你会看到它先调 MCP 工具，再基于返回的截图或文本继续回答。这个任务能同时覆盖两个核心能力：截图反馈让模型“看见”页面，JS 执行让模型拿到运行时数据。只要浏览器动作成功，截图出现在对话里，就说明 Playwright MCP 的复杂交互链路已经打通。Token 也会在模型读取截图和生成回复时正常消耗，因为真正的大模型推理发生在云端，浏览器本身不产生 Token。

4.2 去 TaoToken 控制台看这次调用记录

跑完这轮，到 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 的控制台看调用记录。如果能看到刚才那段时间对应的请求数量变化，说明你的 Claude Desktop 确实把模型请求发给了 TaoToken，并且 MCP 工具结果也被模型正常消费了。看用量这一步，正好对应原文里打开控制台确认配置是否生效的环节，只是把确认对象换成了自己的 TaoToken 账号。

5. 常见报错：npx 找不到、401、404、截图空白

5.1 MCP server 启动失败和模型请求失败的区分

MCP server 起不来和模型请求失败是两件事。如果 Claude Desktop 左侧没有 playwright 工具，说明 npx 过程出错。先回到第 2 章的目录，确认 npm run build 成功、npm link 没有报权限错误；也可以在终端直接执行 JSON 里的 npx 命令，看输出。如果工具挂上了但对话报认证错误，才需要检查 TaoToken 的 Key 和 Base URL。

5.2 三处最容易翻车的细节

实测下来最容易翻车的三处：第一，克隆目录路径写错，--directory 指向一个不存在的位置，npx 会直接退出；第二，模型 ID 没有从模型广场复制，而是照着老教程填了过期的名字，模型请求会 404；第三，Base URL 多写了一个 /v1，变成 https://taotoken.net/api/v1，也会 404。至于 401，通常就是 API Key 复制错了，或者不是从 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 创建的。TaoToken 的接口地址就是 https://taotoken.net/api 这个值，官网页面是给人看的，接口地址是给工具用的，两者不能互换。

如果 MCP 工具正常、模型请求也成功，但截图全黑或返回超时，可能是目标站点拒绝 headless 浏览器访问，换一个普通测试页面再试即可。

回头看这套链路，最值钱的不是 MCP 工具本身，而是把“谁在执行浏览器操作”和“谁在消耗 Token”分开理解。MCP-Playwright 解决的是 AI 能不能操作网页，TaoToken 解决的是模型 API 通道和 Key 管理，两者互补。下一步建议你打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 注册并创建 API Key，回到 Claude Desktop 里把路径填对，让它替你跑一次 document.title 和页面截图。看到截图回到对话里的那一刻，这套从浏览器到模型的闭环就算真正跑通了。