企业官网建设流程全解析

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

1. 目标与产物：用 Continue 驱动 Playwright MCP 完成一次浏览器自动化

本文要完成的事情很具体：在 VS Code 里用 Continue 作为 AI 编程助手，通过 MCP（Model Context Protocol）调用microsoft/playwright-mcp这个开源项目，让模型自己打开一个网页、读取标题、断言标题内容、最后截一张图保存下来。整个过程不需要你手写 Playwright 脚本，而是由 Continue 把自然语言指令转成 MCP 工具调用，交给 Playwright MCP 服务执行。

产物有三样：一份可用的 MCP 配置 JSON、一条能验证 TaoToken 通道是否通畅的最小 curl 命令、以及一次完整的“打开页面→断言标题→截图”执行记录（包含工具调用轨迹和 Token 消耗）。TaoToken 在这里扮演的角色是 Continue 的 OpenAI 兼容供应商——也就是说，Continue 负责“想”，TaoToken 负责“供模型”，Playwright MCP 负责“动手”。

开始之前，你需要准备：Node.js 18+、VS Code、Continue 插件、一个 TaoToken API Key。Key 在官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_generate&utm_medium=csdn&utm_campaign=generate 注册后到控制台创建，Base URL 统一填https://taotoken.net/api。本文所有涉及模型 ID、价格、上下文长度的信息，都以官网当前页面为准，不在此处写死。

2. 操作步骤：装 MCP、配 Continue、跑通第一条指令

2.1 安装 Playwright MCP

microsoft/playwright-mcp是一个独立的 MCP 服务器，通过 stdio 与客户端通信。最省事的方式是用 npx 直接拉起，不需要全局安装：

npx @playwright/mcp@latest --help

如果你希望固定版本、避免每次拉取，也可以全局装：

npm install -g @playwright/mcp

装完后确认浏览器内核可用。Playwright MCP 默认会调用本机已安装的 Chromium，如果没装过，执行一次：

npx playwright install chromium

这一步只做一次，后续 MCP 启动会复用。

2.2 在 Continue 里注册 MCP 服务器

Continue 的 MCP 配置写在~/.continue/config.json（部分版本是config.yaml，以你本地插件版本为准）。核心是mcpServers字段。下面是一段可直接粘贴的 JSON 片段：

{ "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest"], "env": { "PLAYWRIGHT_HEADLESS": "true" } } } }

PLAYWRIGHT_HEADLESS设为 true 表示无头模式，截图仍然能正常生成。如果你要观察浏览器动作，把它改成 false。

保存后重启 Continue，在侧边栏的 MCP 面板里应该能看到playwright处于 connected 状态，并列出它暴露的工具，通常包括browser_navigate、browser_snapshot、browser_take_screenshot、browser_click等。

2.3 把 TaoToken 配成 Continue 的模型供应商

Continue 支持 OpenAI 兼容接口，所以 TaoToken 可以直接作为 provider 接入。在同一个config.json的models数组里加一段：

{ "title": "TaoToken", "provider": "openai", "model": "YOUR_MODEL_ID", "apiBase": "https://taotoken.net/api", "apiKey": "YOUR_TAOTOKEN_API_KEY" }

model字段填你在 TaoToken 控制台看到的模型 ID，不要照抄本文。apiBase必须是https://taotoken.net/api，末尾不要多加/v1，Continue 会自己拼接路径。填完后在 Continue 的模型下拉里选中 TaoToken，再确保对话时启用了 playwright 这个 MCP 服务器。

2.4 最小 curl 验证

在让 Continue 干活之前，先用一条 curl 确认 TaoToken 通道是通的，避免把网络问题和配置问题混在一起排查：

curl https://taotoken.net/api/chat/completions \ -H "Authorization: Bearer YOUR_TAOTOKEN_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "model": "YOUR_MODEL_ID", "messages": [{"role": "user", "content": "reply with ok"}], "max_tokens": 16 }'

返回里出现正常的choices结构就说明 Key、Base URL、模型 ID 三者匹配。如果返回 401，检查 Key 是否复制完整；返回 404，多半是模型 ID 写错或 apiBase 多写了路径。

2.5 发起浏览器自动化指令

在 Continue 对话框里输入：

用 playwright 打开 https://example.com，读取页面标题，断言标题包含 "Example"，然后截一张全页图保存到当前工作目录。

Continue 会把这句话交给 TaoToken 上的模型，模型决定调用哪些 MCP 工具。典型调用序列是：browser_navigate→browser_snapshot（拿到可访问性树和标题）→browser_take_screenshot。每一步的入参和返回都会显示在 Continue 的工具调用面板里，这就是你要记录的“MCP 工具调用”轨迹。

3. TaoToken 接入与配置要点

TaoToken 在整条链路里只做一件事：提供 OpenAI 兼容的模型推理服务。它不参与浏览器控制，也不感知 MCP 协议。理解这一点，排障时就能快速定位问题出在哪一层。

配置上有三个容易踩的点。第一，apiBase只写到https://taotoken.net/api，不要写成https://taotoken.net/api/v1，否则请求路径会变成/api/v1/chat/completions，与网关预期不符。第二，模型 ID 必须与控制台一致，不同模型对工具调用（tool calling）的支持程度不同，做 MCP 场景要选支持 function calling 的模型。第三，Key 建议放在环境变量里，Continue 的配置支持${env:TAOTOKEN_API_KEY}这种写法，避免明文提交到 Git。

如果你用的是 Claude Code 而不是 Continue，配置位置换成~/.claude/settings.json，字段是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY；如果用 Codex，则改config.toml。多供应商切换可以用 CC Switch 这类三件套工具管理，把 TaoToken 作为其中一个 profile。这些属于不同客户端的接入方式，本文主线仍是 Continue。

想确认当前可用的模型清单和各自能力，直接看官网的模型对话页面和接入文档，那里有实时更新的列表。控制台里创建的 Key 可以按用途分开，比如给 Continue 单独一把，方便统计消耗。

4. 可验证结果与失败分支

一次成功的执行，你会在 Continue 面板里看到类似这样的记录：

Token 消耗方面，Continue 会在每条消息旁显示 input/output tokens。一次这样的任务通常在几千 token 量级，具体取决于快照返回的页面结构大小。页面越复杂，browser_snapshot返回的内容越多，input token 越高。这也是为什么建议先用简单页面验证链路，再上真实业务页面。

失败分支要提前知道怎么处理：

• MCP 未连接：Continue 面板里 playwright 显示 disconnected。检查 npx 是否能正常执行，必要时改成全局安装后的绝对路径。
• 模型不调用工具：模型只回复文字，不触发 MCP。多半是所选模型不支持 function calling，换一个支持工具调用的模型 ID。
• 401/404：回到第 2.4 节的 curl 单独验证，把模型层问题和 MCP 层问题分开。
• 截图空白：无头模式下页面未渲染完就截图。可以在指令里要求“等待页面加载完成后再截图”，或改用browser_snapshot先确认内容已就绪。
• 浏览器内核缺失：报错提示找不到 Chromium，执行npx playwright install chromium。

本文不含任何排行分数，也不对模型能力做横向评测。所有涉及具体模型表现的数字，请以官网和你的实测为准。

5. 限制、成本与模型选择

先说限制。Playwright MCP 控制的是真实浏览器，能做的事很多，但也意味着它受页面反自动化策略、登录态、动态渲染的影响。复杂单页应用里，browser_snapshot返回的可访问性树可能非常长，既推高 Token 成本，也可能让模型抓不住重点。实践中建议把任务拆小：一次只做一件事，比如“打开并断言标题”和“截图”分成两轮，比一句话塞五个动作更稳。

成本主要由两部分构成：模型推理的 Token 费用，以及本地运行浏览器的资源开销。前者取决于你选的模型和页面复杂度，后者基本免费但吃内存。TaoToken 的计费以官网标价为准，不同模型单价不同，做高频自动化时优先选性价比合适的模型，把复杂推理留给真正需要的步骤。

模型选择上，MCP 场景的硬性要求是支持工具调用。在此前提下，按任务难度分档：简单导航和断言，用轻量模型就够；需要理解复杂页面结构、做多步决策时，再换更强的模型。具体哪些模型 ID 可用、各自上下文多长、单价多少，官网的模型列表是唯一准确来源，本文不复制这些会变动的数字。

最后给一个上手路径建议：先用 example.com 这类极简页面把“Continue + TaoToken + Playwright MCP”三者跑通，确认工具调用和 Token 统计都正常，再逐步换成你的目标站点。需要长期、高频地跑这类 Agent 任务，可以了解官网的 Coding Plan；只是偶尔验证接入，用按量计费的 API Key 即可。接入过程中遇到路径、鉴权、插件配置问题，优先查接入文档和 API Keys 页面，那里有最新的参数说明。

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度