网站导航
> 技术文档 > 如何让web网站支持MCP服务？50行代码即可让网站支持MCP，让AI助手与Web应用进行交互：WebMCP

如何让web网站支持MCP服务？50行代码即可让网站支持MCP，让AI助手与Web应用进行交互：WebMCP

网友: 技术文档 2025-07-30 11:11:56

如何让 Web 网站支持 MCP 服务？只需 50 行代码：WebMCP 全解析

想让 AI 助手与您的 Web 应用（前端界面/web网站）实现无缝交互，不再依赖屏幕抓取或视觉解析？只需短短 50 行代码，便可将您的网站升级为 MCP（Model Context Protocol）服务器，AI 便可调用您网站上的“工具”直接执行操作。本篇博客将带你从原理到实战，深度剖析如何使用 WebMCP（又名 MCP-B）在几分钟内让站点 AI 化。

猫头虎fork仓库：https://github.com/MaoTouHU/WebMCP

目录

  1. 什么是 MCP？为什么要支持 MCP？

  2. WebMCP 核心特性概览

  3. 核心代码：50 行搞定 MCP 服务

  4. 工作原理详解

  5. MCP-B：更进一步

    • 5.1 用户视角：Chrome 扩展如何使用
    • 5.2 网站拥有者视角：快速接入
    • 5.3 AI 视角：Deterministic 动作调用

  6. Live Demo 演示

  7. 快速上手指南

    • 7.1 安装依赖
    • 7.2 添加 MCP 服务端
    • 7.3 运行与测试

  8. 高级用法与扩展

    • 8.1 Native Host 本地客户端接入
    • 8.2 动态工具、缓存与安全

  9. 仓库结构

  10. 开发、贡献与路线图

  11. 结语

什么是 MCP？为什么要支持 MCP？

MCP（Model Context Protocol） 是一种标准化协议，用于在应用和 AI Agent 之间传递上下文与“工具”定义。通过 MCP，网站可以 直接暴露现有功能（如 API、状态管理、表单提交）给 AI，使 AI 调用变成有类型、有 Schema 校验的函数调用，而非依赖“视觉抓取”或“无结构化输入”：

  • 高可靠性：调用即函数执行，不再有误点、OCR 解析失败等风险
  • 无需额外认证：复用浏览器已有的 Cookie/Session 认证
  • 实时同步：与 Web 应用状态无缝集成
  • 跨应用工作流：AI 可在多个标签页/应用间自动编排完成任务

WebMCP（MCP-B）就是一套将 MCP 服务端快速集成到前端的解决方案，让您的网站 只用几十行代码，即可瞬间具备 AI Agent 可调用的“工具接口”。

WebMCP 核心特性概览

  • 零配置：无需 API 密钥、OAuth，全靠浏览器原生安全模型
  • 轻量级：前端直接注册 MCP Server，50 行代码搞定
  • 高性能：不做 DOM 视觉解析，调用速度更快
  • 跨应用联动：MCP-B 扩展支持在多标签页间自动发现并调用工具
  • 动态工具：可在页面生命周期中注册/注销工具
  • Schema 校验：基于 Zod 定义输入输出，保证调用正确性

核心代码：50 行搞定 MCP 服务

下面是一段在任意 Web 项目（Vanilla JS/TS、React、Vue……）中快速接入 MCP 的示例。仅需 50 行，即可让您的页面成为 MCP Server：

如何让web网站支持MCP服务？50行代码即可让网站支持MCP，让AI助手与Web应用进行交互：WebMCP

猫头虎fork仓库：https://github.com/MaoTouHU/WebMCP

import { TabServerTransport } from \"@mcp-b/transports\";import { McpServer }  from \"@modelcontextprotocol/sdk/server/mcp.js\";import { z }  from \"zod\";// 1. 创建 MCP Server（每个站点一个实例）const server = new McpServer({ name: \"my-website\", version: \"1.0.0\",});// 2. 注册工具：包裹现有逻辑server.tool( \"getPageInfo\",  // 工具标识 \"Get current page info\", // 描述 {}, // 输入 Schema（使用 Zod） async () => ({  // 实际执行逻辑 content: [ { type: \"text\", text: JSON.stringify({ title: document.title, url: window.location.href, }), }, ], }));// 3. 连接传输层：Tab Transportawait server.connect( new TabServerTransport({ allowedOrigins: [\"*\"], // 为示例放宽，生产请按需配置 }));
  • server.tool：将任意函数注册为可被 AI 调用的“工具”
  • TabServerTransport：基于 postMessage 与注入客户端通信

完整代码量不足 50 行，却已将页面能力完全暴露给 AI Agent。

工作原理详解

如何让web网站支持MCP服务？50行代码即可让网站支持MCP，让AI助手与Web应用进行交互：WebMCP

猫头虎fork仓库：https://github.com/MaoTouHU/WebMCP

  1. MCP Server
    前端页面实例化 McpServer，并通过 server.tool(...) 注册若干工具。每个工具都有：

    • 名称：唯一标识
    • 描述：便于 AI 理解
    • 输入 Schema：由 Zod 校验调用合法性
    • 执行函数：返回符合 MCP 标准的响应

  2. Transport 传输层

    • Tab Transport：页面内通信，支持同页 AI 客户端
    • Extension Transport：Chrome 扩展通过 Runtime Messaging 与页面对接
    • Native Host：本地桌面应用（Claude Desktop、Cursor 等）可通过 Native Host 与扩展配合

  3. AI Client（扩展/桌面）

    • 探测打开标签页中的 MCP Server
    • 收集工具并展示给 AI
    • AI 根据上下文决定调用何种工具，传入 JSON 参数
    • 调用通过浏览器已有的 Cookie/Session 完成鉴权
    • 工具执行后，页面可实时更新 UI；AI 也能根据返回值继续链式调用

MCP-B：更进一步

MCP-B（即 WebMCP）在 MCP 基础上，提供了针对浏览器场景的 Transport 与扩展，三大角色视角如下：

用户视角：Chrome 扩展如何使用

  1. 安装 MCP-B Chrome 扩展
  2. 访问支持 MCP 的网站
  3. 点击扩展图标，自动列出当前页面及所有打开标签的工具
  4. 在聊天界面或 Inspector 中输入自然语言指令，如 “Add to cart”
  5. 扩展将 NL 转换为对应工具调用，执行结果可见到页面 UI 更新

扩展自动利用当前浏览器会话实现鉴权，无需额外登录或配置。

网站拥有者视角：快速接入

  1. 安装依赖

    npm install @mcp-b/transports @modelcontextprotocol/sdk zod

  2. 注册 Server & Tools
    参考上文 50 行示例

  3. 运行 & 验证

    • 本地 pnpm dev 或 npm run dev
    • 打开页面，启动扩展，检查工具列表

无需任何后台改动、OAuth 流程或新增 API；完全在前端及浏览器沙箱内运行，安全且高效。

AI 视角：Deterministic 动作调用

  1. AI Client（扩展/桌面）拉取工具元数据
  2. 生成 JSON 调用（如 { tool: \"shop_addToCart\", args: { id: 123 } }）
  3. 通过 Transport 路由至页面上下文
  4. 页面执行对应函数，返回符合 MCP 格式的结果
  5. AI 根据结果动态决定下一步动作

相比视觉自动化（Visual QA/ROBOT），此方案无 UI 图像 OCR，也无点击坐标抖动，可靠性与执行速度大幅提升。

Live Demo 演示

  • Vanilla TypeScript Demo（内置 Todo 应用）

    cd examples/vanilla-ts && pnpm dev
    • 工具示例：getTodos, createTodo, updateTodo
    • AI 可直接新增、删除、标记完成任务

  • Vue 实例（By Besian）
    https://github.com/bestian/vue-MCP-B-demo

安装 MCP-B Chrome 扩展 后，可在任一示例站点直接体验工具调用。

快速上手指南

安装依赖

npm install @mcp-b/transports @modelcontextprotocol/sdk zod

添加 MCP 服务端

在主入口（如 index.ts 或 App.tsx）中添加：

import { TabServerTransport } from \"@mcp-b/transports\";import { McpServer }  from \"@modelcontextprotocol/sdk/server/mcp.js\";import { z }  from \"zod\";const server = new McpServer({ name: \"my-website\", version: \"1.0.0\" });server.tool(\"getPageInfo\", \"Get current page info\", {}, async () => ({ content: [{ type: \"text\", text: JSON.stringify({ title: document.title, url: window.location.href }) }],}));await server.connect(new TabServerTransport({ allowedOrigins: [\"*\"] }));

运行与测试

  1. 启动本地开发服务器。
  2. 在 Chrome 中安装 MCP-B 扩展。
  3. 访问您的页面，点击扩展 -> “Tools” 即可见到 getPageInfo 工具；使用聊天框发起调用。

高级用法与扩展

Native Host 本地客户端接入

  1. 全局安装 Native Host：

    npm install -g @mcp-b/native-host

  2. 启动：

    mcp-b-native-host

  3. 在桌面 AI 客户端（Claude Desktop、Cursor）中配置：

    { \"type\": \"streamable-http\", \"url\": \"http://127.0.0.1:12306/mcp\"}

此时，无需扩展即可让本地 AI 客户端调用浏览器标签页中的 MCP 工具。

动态工具、缓存与安全

  • 动态注册/注销：可在组件挂载/卸载时调用 server.tool(...) 或 server.unregister(\"toolName\")
  • 工具缓存：annotations: { cache: true } 参数可让工具元数据跨标签持久化
  • 安全边界：切勿暴露敏感后端接口；MCP 工具在页面上下文执行，遵循同源策略

仓库结构

WebMCP/├── examples/ # 示例项目（vanilla-ts, react-shop, vue-demo…）├── packages/ # 核心库（@mcp-b/transports, sdk…）├── extension/ # Chrome 扩展源码└── web/  # 文档与演示站点

猫头虎fork仓库：https://github.com/MaoTouHU/WebMCP

开发、贡献与路线图

  • 开发

    git clone https://github.com/MaoTouHU/WebMCP.gitcd WebMCPpnpm installpnpm dev

猫头虎fork仓库：https://github.com/MaoTouHU/WebMCP

  • 未来计划

    • Firefox/Safari 扩展
    • 完整 MCP 规范支持（Elicitation、Streaming）
    • 本地 Host 上游合并

结语

通过 WebMCP（MCP-B），您只需极少的前端改动，便可让 AI 助手 “看懂” 并 “操作” 您的网站，走出视觉自动化的瓶颈，实现真正的结构化、可靠、高效的人机协作。立即动手，50 行代码，AI 助手即刻上线！

✨ 猫头虎精品博文

在这里插入图片描述

网络标签：

相关问题