企业官网建设流程全解析

1. 先搞清楚 playwright-extension-mcp 到底卡在哪一环

opencode.json里配了playwright-extension-mcp，OpenCode 启动时也没报错，但浏览器扩展面板一直显示「目前没有连接任何 mcp 客户端」——这个现象我遇到过不止一次。它最迷惑人的地方在于：配置文件语法是对的，OpenCode 也确实读到了，可链路就是不通。

先把这条链路拆开看，它其实有四段：

1. OpenCode 解析opencode.json，识别出mcp节点下的本地服务定义；
2. OpenCode 以子进程方式拉起npx @playwright/mcp@latest --extension；
3. MCP Server 启动后监听 stdio，等待浏览器扩展通过 token 完成握手；
4. 浏览器扩展侧用PLAYWRIGHT_MCP_EXTENSION_TOKEN反向认证，握手成功后扩展面板才会显示已连接。

你看到的「配置加载成功」只证明第 1 段过了。第 2 段如果卡在npx的交互式安装确认上，进程根本没起来；第 3、4 段如果 token 或浏览器兼容性有问题，握手就停在半路。所以排查的核心不是「JSON 写没写对」，而是「进程有没有真正跑起来、握手有没有真正完成」。

这篇就按这个顺序给你一份可复制的配置骨架，再配一套逐步验证动作，帮你把问题定位到具体是哪一段断的。适合正在用 OpenCode 接浏览器自动化、又不想在配置里反复猜的人。

2. 接入前的统一通道准备：用 TaoToken 管好 Key 和 API

在动opencode.json之前，建议先把模型侧的 Key 和 API 通道收敛一下。原因很实际：MCP 排障时你不想再被「模型请求 401」这种无关变量干扰。我习惯用 TaoToken 做统一入口，一个 Key 覆盖对话、编码、Agent 几类调用，省得在多个平台之间来回切。

TaoToken 的定位是给 AI 编码工具提供统一的模型接入通道，官网在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 入口是 https://taotoken.net/api 。它的好处是：你本地 OpenCode、Coding Agent、脚本调用可以共用同一套凭证，排障时只需要盯 MCP 这一条链路，不用同时怀疑模型侧配置。

具体操作上，先去控制台建一个 Key：

• 控制台入口：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite
• API Keys 管理：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite

拿到 Key 之后，把它写进 OpenCode 的模型配置里（这部分和 MCP 是两块独立配置，别混在一起）。如果你只是想先验证模型通道通不通，可以直接用模型对话页发一条最小请求：

• 模型对话：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite

这一步的意义是：确认「模型请求」这条线是干净的。等会儿 MCP 连不上时，你就能排除掉「是不是 Key 过期导致整个会话异常」这种干扰项。长期跑编码和 Agent 任务的话，可以看下 Coding Plan：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite

接入文档在这里，配置字段有疑问时对照着看：

• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

注意：TaoToken 是模型接入通道，不负责 MCP 子进程的拉起。MCP 连不上浏览器，问题一定在 OpenCode 的本地进程链路或扩展侧，别把两件事混为一谈。

3. 可复制的 opencode.json 配置骨架

下面这份是我实测下来最稳的最小骨架。排障阶段先只保留playwright-extension一个 MCP，把普通playwright那条先注释掉或删掉，避免模型走错路径。

{ "$schema": "https://opencode.ai/config.json", "mcp": { "playwright-extension": { "type": "local", "command": [ "npx", "-y", "@playwright/mcp@latest", "--extension" ], "enabled": true, "environment": { "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "你的扩展token" } } } }

这份骨架里有四个关键点，逐个说清楚：

第一，-y必须加。这是最容易被忽略、又最像「真凶」的一处。npx首次拉@playwright/mcp@latest时会弹交互式安装确认，如果没加-y，子进程就卡在等你按 Y 的状态。OpenCode 前端只会显示「尝试连接」，不会告诉你它在等确认。加上-y强制非交互，进程才能顺利起来。

第二，command用数组形式。OpenCode 的本地 MCP 支持数组写法，每个参数独立成一项，避免 Windows 下路径和空格解析出问题。别写成单个字符串。

第三，环境变量字段用environment。很多 MCP 客户端通用的是env，但 OpenCode 本地 MCP 用的是environment。你如果从别的客户端抄配置，很容易在这里踩坑。上面这份用的是 OpenCode 认的字段。

第四，token 要干净。从扩展 UI 复制的PLAYWRIGHT_MCP_EXTENSION_TOKEN，末尾经常带换行或空格，粘进去后现象就是「配置全对但连不上」。建议复制后先在编辑器里看一眼有没有多余字符。

如果你确实需要同时保留普通 playwright 和扩展版，正式使用时可以都留着，但排障阶段强烈建议只留扩展版。原因很简单：模型可能优先调用普通 playwright，你看到工具可用就以为扩展链路通了，实际根本没走--extension那条路。

4. 逐步验证：从手动启动到最小请求

配置改完别急着在 OpenCode 里试，先在终端手动把 MCP 拉起来，这样能立刻分清是「配置问题」还是「运行问题」。

4.1 手动启动 MCP Server

PowerShell：

$env:PLAYWRIGHT_MCP_EXTENSION_TOKEN="你的token" npx -y @playwright/mcp@latest --extension

cmd：

set PLAYWRIGHT_MCP_EXTENSION_TOKEN=你的token npx -y @playwright/mcp@latest --extension

如果这一步终端里出现安装提示、下载失败、Node 版本不满足、进程闪退或长时间无输出，那问题就不在opencode.json，而在 Node/npm 环境或包本身。先把这条命令跑通，再回到 OpenCode。

4.2 确认浏览器扩展端口和 token

扩展侧要确认三件事：扩展已加载并开启开发者模式、扩展面板里显示的 token 和配置里填的一致、浏览器是 Chrome/Chromium 而不是 Edge。仓库里有过 Edge 下扩展连不上的报告，排障时先用 Chrome 做基准，能省很多时间。

4.3 用最小请求验证连通性

MCP Server 手动跑起来后，扩展面板应该从「没有连接任何 mcp 客户端」变成已连接状态。如果手动能连、OpenCode 里不能连，那锅就在 OpenCode 拉起子进程的链路，比如工作目录、PATH 解析、环境变量注入或 stdio 管道状态。

想进一步隔离，可以用 HTTP 模式做对照测试：

npx -y @playwright/mcp@latest --extension --port 8931

然后让客户端通过http://localhost:8931/mcp连接。如果 HTTP 模式能连、本地 command 模式不行，基本可以锁定是 OpenCode 的 stdio 子进程拉起环节有问题，而不是扩展或 token 的锅。

5. 本篇常见错排查对照表

把上面几类现象整理成一张对照表，方便你按症状定位：

排查顺序建议固定成：先手动终端启动 → 再确认扩展端口和 token → 最后回到 OpenCode 验证。这个顺序能把「配置错」和「链路错」分开，避免在 JSON 里反复猜。

6. 排障之后的接入与长期使用

等 MCP 链路跑通，模型侧的通道建议也一并收敛好，省得后面又出变量。排障和接入相关的 Key、文档入口：

• API Keys：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite
• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

想先验证模型通道是否正常，用模型对话发一条最小请求即可：

• 模型对话：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite

如果你是要长期跑编码和 Agent 任务，把 MCP 和模型通道都固定下来会更省心：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite

最后留一个我踩过的坑：改完opencode.json后，OpenCode 有时会缓存旧的 MCP 进程，记得完全重启一次再验证，否则你看到的还是上一次的失败状态。