1. 网页也能提供 MCP 了先搞清楚它到底解决什么问题Web MCP 是什么一句话概括把原本跑在本地进程或远程服务器上的 MCP 服务直接搬进浏览器页面里让网页本身成为一个可被 AI 工具调用的 MCP 端点。MCPModel Context Protocol模型上下文协议是 Anthropic 在 2024 年底提出的开放协议用来统一大模型与外部工具、数据源之间的交互方式。你可以把它理解成 AI 世界的 USB-C 接口——不管对面是文件系统、数据库还是某个 SaaS API只要按 MCP 规范暴露能力模型就能通过标准方式调用。过去我们接入 MCP通常要单独起一个 Node 或 Python 进程配好 stdio 或 SSE 传输再让 AI 客户端去连。这套流程对开发者不算难但对只想「让 AI 读一下当前网页」的场景就太重了。Web MCP 的思路是网页自己就是服务端。用户打开页面页面通过 Service Worker、WebSocket 或浏览器扩展把结构化能力暴露出去AI 助手就能直接读取页面上下文、查询图表背后的数据、甚至帮用户填表单。它适合谁三类人最该关注一是做浏览器端 AI 应用的开发者二是维护在线文档、数据看板这类交互页面的团队三是想让 AI 助手直接操作当前标签页的插件作者。这篇我会从原理讲到落地给你可复制的config.toml和settings.json骨架并用 TaoToken 统一 Key 通道把 AI 工具接进来最后教你怎么验证一个 Web MCP 服务到底能不能被发现。2. 前置准备用 TaoToken 统一 Key 与 API 通道在动手写配置之前先把「AI 工具怎么连模型」这件事理顺。Web MCP 解决的是「网页暴露能力」但调用这些能力的 AI 客户端本身还需要一个模型入口。如果你同时用 Claude Code、Cline、Continue 这类工具每个都单独配 Key 会很乱。我的做法是用 TaoToken 做统一通道一个 Key 走通对话、编码和 Agent 场景。TaoToken 的官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 这个地址不加 UTM 参数配置里直接填。你需要先在控制台创建一个 API Key然后把它填进各个工具的配置里。具体操作路径打开控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 在 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 新建一个 Key复制出来备用。如果你只是想先验证模型通不通可以直接用模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一条消息测试。长期做编码或 Agent 的话Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 有更划算的套餐说明。注意API Key 属于敏感凭证不要写进前端代码或提交到公开仓库。Web MCP 场景下页面里只放「调用本地代理」的逻辑真正的 Key 留在本地配置文件或后端。3. 可复制配置config.toml 与 settings.json 骨架下面给你两套骨架。config.toml用于支持 TOML 配置的 MCP 客户端比如某些 Rust 或 Python 写的 Agent 框架settings.json用于 Claude Code、Cline 这类 JSON 配置的工具。两套都通过 TaoToken 走统一通道。先看config.toml# ~/.config/webmcp/config.toml # Web MCP 客户端配置骨架通过 TaoToken 统一模型通道 [provider] name taotoken base_url https://taotoken.net/api api_key sk-你的TaoToken密钥 model claude-sonnet-4-20250514 [mcp_servers.web_page] # 网页端 MCP 服务通过本地 WebSocket 代理暴露 transport websocket url ws://127.0.0.1:8765/mcp # 页面卸载时自动断开 auto_disconnect true # 敏感操作需要二次确认 require_confirmation [submit_form, delete_record] [mcp_servers.web_page.permissions] # 明确声明允许访问的能力避免静默暴露 allow [read_dom, query_chart_data, fill_form] deny [read_cookies, access_local_storage] [security] # 跨域来源校验 allowed_origins [https://your-app.example.com] # 用户授权超时秒 auth_timeout 120再看settings.json这是 Claude Code 和多数 JSON 系工具的通用结构{ mcpServers: { web-page: { command: npx, args: [-y, webmcp/bridge, --port, 8765], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的TaoToken密钥, WEBMCP_ALLOWED_ORIGINS: https://your-app.example.com, WEBMCP_REQUIRE_CONFIRM: submit_form,delete_record } } }, model: { provider: taotoken, baseUrl: https://taotoken.net/api, apiKey: sk-你的TaoToken密钥, model: claude-sonnet-4-20250514 } }两个配置的核心逻辑一致模型走 TaoToken 的https://taotoken.net/apiMCP 服务走本地 WebSocket 桥接权限用白名单控制。webmcp/bridge是一个示意包名实际落地时你可以用 Service Worker 直接承载 MCP 端点也可以用浏览器扩展注入。关键是allowed_origins和require_confirmation这两个字段一定要填否则页面数据可能被静默读取。如果你用的是 Claude Code 的 Anthropic 兼容模式接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 有详细说明ClaudeCodeAnthropic 的专用配置页在 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 照着填 base_url 和 key 即可。4. 验证请求确认 Web MCP 服务能被发现配置写完后别急着上业务逻辑先验证「服务能不能被发现」。这一步很多人跳过结果后面调半天发现是端点根本没注册上。第一步启动本地桥接后用 curl 探测 MCP 端点是否响应# 检查 WebSocket 桥接是否在监听 curl -i http://127.0.0.1:8765/health # 预期返回 # HTTP/1.1 200 OK # {status:ok,mcp_version:2024-11-05,capabilities:[read_dom,query_chart_data]}第二步用 MCP 标准的initialize请求确认协议握手。如果你装了mcp-cli这类工具可以直接mcp-cli inspect --transport websocket --url ws://127.0.0.1:8765/mcp正常输出会列出服务暴露的 tools 和 resources类似{ serverInfo: { name: web-page-mcp, version: 0.1.0 }, capabilities: { tools: {}, resources: {} }, tools: [ { name: read_dom, description: 读取当前页面 DOM 结构 }, { name: query_chart_data, description: 查询图表背后的数据源 } ] }第三步在 AI 客户端里发一条测试指令比如「读取当前页面标题」。如果模型能通过 TaoToken 通道返回页面标题说明整条链路通了AI 客户端 → TaoToken API → 模型 → MCP 工具调用 → 网页端点。实测下来最容易出问题的是 WebSocket 的跨域校验。浏览器对ws://的来源检查比http://严格allowed_origins必须和页面实际域名完全一致包括端口号。少一个端口就会握手失败但报错信息往往只显示「连接关闭」不提示来源问题。5. 本篇常见错排查错误一MCP server not found或工具列表为空。九成是桥接进程没起来或者settings.json里的command路径不对。先手动跑一遍npx webmcp/bridge --port 8765看有没有报错。如果提示端口占用换个端口并同步改配置里的url。错误二握手成功但调用工具返回 403。这是权限白名单没配对。检查config.toml的[mcp_servers.web_page.permissions]里allow是否包含你调用的工具名。注意工具名大小写敏感read_dom和read_DOM是两个东西。错误三页面关闭后 AI 还在调用旧数据。说明auto_disconnect没生效。Web MCP 的一个安全要点就是页面卸载时自动断开连接否则 AI 可能拿到过期上下文。在页面beforeunload事件里显式关闭 WebSocket别只依赖配置项。错误四TaoToken 返回 401。检查 API Key 是否复制完整以及base_url是不是https://taotoken.net/api注意结尾没有斜杠。如果用的是 Claude Code确认走的是 Anthropic 兼容端点配置参考 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。错误五跨域来源校验失败。浏览器控制台会报Origin not allowed。把页面实际访问的完整 origin协议域名端口填进allowed_origins本地开发时http://localhost:3000和http://127.0.0.1:3000算两个不同来源都要加。6. 把 Web MCP 接进你的工作流Web MCP 的本质是让网页从「被读取的内容」变成「可交互的能力提供方」。它降低了 AI 接入的门槛但安全边界必须自己守住用户授权要显式敏感操作要二次确认跨域来源要严格校验页面关闭要自动断开。落地路径我建议分三步走先用本文的config.toml和settings.json骨架把通道跑通用mcp-cli inspect确认服务可被发现再把页面里的只读能力读 DOM、查数据暴露出去跑通一条完整调用链最后才考虑表单填写、提交这类写操作并且一定加上require_confirmation。如果你在接入过程中卡在 Key 或通道配置上直接去 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 重新生成一个配合接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 对照检查。想先验证模型响应是否正常用模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一条消息最快。长期做编码和 Agent 的话Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 会比按量付费省心。这项能力还在早期标准化程度和安全模型都在演进。但方向很清楚浏览器正在成为 AI 工具链里的一等公民。早点把通道和权限骨架搭好等生态成熟时你就能直接往上叠业务而不是从头补基础设施。