WebMCP 完全指南：50行代码让你的网站原生支持MCP，打通AI与Web应用的最后一公里

WebMCP 完全指南50行代码让你的网站原生支持MCP打通AI与Web应用的最后一公里2025年6月MCP生态核心团队正式发布WebMCP开源项目这是全球首个让任意Web应用原生支持MCP协议的轻量级解决方案。无需修改后端架构无需复杂的系统集成只需在前端页面添加50行代码就能让Claude、Cline、CherryStudio等所有支持MCP的AI助手直接与你的网站进行双向交互——AI可以读取页面数据、点击按钮、填写表单、调用网站API甚至自动完成复杂的业务流程。在此之前AI与Web应用是完全割裂的两个世界用户需要手动复制网站数据给AIAI生成结果后再手动粘贴回网站不仅效率低下还极易出错。WebMCP彻底打破了这一壁垒让AI成为Web应用的原生助手实现了说一句话就能完成网站操作的科幻场景。官方开源仓库https://github.com/mcp2everything/webmcp官方文档https://webmcp.devCDN地址https://cdn.jsdelivr.net/npm/webmcplatest/dist/webmcp.min.js开源协议MIT协议个人与商业无限制免费使用一、什么是WebMCP解决了什么核心痛点WebMCP是一个轻量级的前端JavaScript库本地代理工具它在Web应用与AI助手之间建立了一条安全的双向通信通道前端侧只需引入一行CDN脚本通过简单的配置就能将网站的功能暴露为MCP工具代理侧运行在用户本地的轻量级服务负责桥接浏览器与MCP客户端Claude等AI侧所有支持MCP协议的AI助手都能自动发现并调用网站暴露的工具它彻底解决了传统AI与Web交互的三大核心痛点数据流转繁琐无需手动复制粘贴AI可以直接读取和写入网站数据开发成本极高传统方案需要开发专属API、OAuth认证和AI插件开发周期数周生态割裂每个网站都需要单独开发AI插件无法统一接入所有AI助手而WebMCP实现了零后端修改、50行代码接入任何现有网站都能在10分钟内完成MCP支持。二、六大核心特性打造Web原生AI体验1. 极致轻量50行代码快速接入无需修改任何后端代码只需在前端页面引入一行CDN脚本然后添加简单的工具配置即可压缩后仅12KB不影响网站加载速度无任何外部依赖纯原生JavaScript实现兼容所有现代浏览器Chrome、Firefox、Safari、Edge支持React、Vue、Angular等所有前端框架2. 双向实时通信完整交互闭环WebMCP支持AI与Web应用的双向实时通信AI可以调用网站暴露的任意函数执行操作并获取结果网站可以主动向AI推送状态变化和事件通知支持流式响应实时展示操作进度自动同步页面状态确保AI看到的内容与用户一致3. 细粒度安全控制零安全风险安全是WebMCP的核心设计原则所有操作都在用户的完全掌控之下工具级权限控制可以单独设置每个工具的访问权限只读/可写/需确认用户确认机制高风险操作默认需要用户手动确认才能执行沙箱隔离AI只能访问你明确暴露的工具无法访问页面其他内容完整审计日志记录所有AI操作支持回溯和审计HTTPS加密所有通信都采用TLS加密防止数据泄露4. 全平台全生态兼容支持所有MCP客户端Claude Desktop、Cline、Continue、CherryStudio、Cursor等兼容所有Web技术栈原生JS、React、Vue、Angular、Next.js、Nuxt.js等支持桌面端和移动端浏览器可以与现有MCP工具无缝集成形成完整的工作流5. 自动工具发现与描述WebMCP会自动生成符合MCP标准的工具描述AI可以直接理解每个工具的功能和参数自动生成OpenAPI风格的工具文档支持参数类型校验和默认值可以添加自然语言描述帮助AI更好地理解工具用途支持动态添加和移除工具6. 内置常用工具集开箱即用WebMCP内置了一系列通用的Web操作工具无需额外配置即可使用读取页面文本、表格、图片等内容点击按钮、链接填写表单滚动页面、切换标签页截取页面截图执行自定义JavaScript代码需用户授权三、技术原理三层桥接架构WebMCP采用三层解耦的桥接架构既保证了安全性又实现了最大的兼容性架构层级核心组件核心职责Web应用层WebMCP.js前端库嵌入目标网站暴露工具函数处理AI调用请求本地代理层WebMCP Proxy运行在用户本地桥接浏览器与MCP客户端管理安全权限AI客户端层MCP兼容AI助手调用网站暴露的工具完成用户指令完整工作流程用户在浏览器中打开支持WebMCP的网站WebMCP.js自动连接到本地运行的WebMCP ProxyProxy将网站暴露的工具注册为MCP服务AI客户端如Claude自动发现并加载这些工具用户向AI下达指令例如帮我导出这个页面的销售数据AI调用网站暴露的export_sales_data工具WebMCP.js在浏览器中执行该函数返回结果给AIAI将结果整理成自然语言反馈给用户整个过程完全自动化用户只需用自然语言下达指令无需关心底层技术细节。四、50行代码实战让你的网站支持MCP下面通过一个完整的示例手把手教你用50行代码让一个待办事项网站支持MCP。全程无需后端复制粘贴即可运行。步骤1创建HTML文件创建一个名为todo.html的文件内容如下!DOCTYPEhtmlhtmlheadtitle待办事项 - WebMCP示例/title!-- 引入WebMCP CDN脚本 --scriptsrchttps://cdn.jsdelivr.net/npm/webmcp1.0.0/dist/webmcp.min.js/script/headbodyh1我的待办事项/h1ulidtodoList/ulinputtypetextidtodoInputplaceholder输入新待办buttononclickaddTodo()添加/buttonscriptlettodos[];// 渲染待办列表functionrenderTodos(){constlistdocument.getElementById(todoList);list.innerHTMLtodos.map((todo,i)li styletext-decoration:${todo.done?line-through:none} input typecheckbox${todo.done?checked:}onchangetoggleTodo(${i})${todo.text}/li).join();}// 添加待办functionaddTodo(){constinputdocument.getElementById(todoInput);if(input.value.trim()){todos.push({text:input.value.trim(),done:false});input.value;renderTodos();}}// 切换待办状态functiontoggleTodo(index){todos[index].done!todos[index].done;renderTodos();}// 以下是WebMCP核心配置仅20行代码 WebMCP.init({name:我的待办事项,description:一个简单的待办事项管理应用,tools:[{name:get_all_todos,description:获取所有待办事项列表,handler:()todos},{name:add_new_todo,description:添加一个新的待办事项,parameters:{text:待办事项的内容},handler:(params){todos.push({text:params.text,done:false});renderTodos();return待办添加成功;}},{name:toggle_todo_status,description:切换指定待办事项的完成状态,parameters:{index:待办事项的索引从0开始},handler:(params){if(params.index0params.indextodos.length){toggleTodo(params.index);return状态切换成功;}return无效的待办索引;}}]});// 初始渲染renderTodos();/script/body/html步骤2安装并启动WebMCP ProxyWebMCP需要一个本地代理来桥接浏览器和MCP客户端执行以下命令安装# 全局安装WebMCP Proxynpminstall-gwebmcp/proxy# 启动代理服务webmcp-proxy start代理启动后会在后台运行默认监听端口8888。步骤3配置MCP客户端以Claude Desktop为例添加WebMCP服务打开Claude Desktop点击左下角「设置」→「连接器Connectors」点击「添加自定义连接器」选择「本地命令」填写连接器名称Web应用控制在「命令」中填入webmcp-proxy connect点击「添加」Claude会自动连接到WebMCP Proxy步骤4用AI控制你的网站在浏览器中打开刚才创建的todo.html文件切换到Claude Desktop输入指令“帮我添加一个买牛奶的待办事项”Claude会自动调用add_new_todo工具在你的网站中添加待办再输入“把第0个待办标记为完成”Claude会调用toggle_todo_status工具输入“列出所有待办事项”Claude会调用get_all_todos工具并返回结果整个过程完全自动化你会看到浏览器中的待办列表实时更新无需任何手动操作。五、进阶用法1. 权限控制可以为每个工具设置不同的权限级别WebMCP.init({tools:[{name:delete_todo,description:删除指定的待办事项,parameters:{index:待办事项的索引},// 高风险操作需要用户确认requireConfirmation:true,handler:(params){todos.splice(params.index,1);renderTodos();return待办删除成功;}}]});2. 主动向AI推送事件网站可以主动向AI推送状态变化和事件通知// 当有新待办添加时通知AIfunctionaddTodo(){// ... 原有逻辑WebMCP.sendEvent(todo_added,{text:input.value.trim()});}3. 与React/Vue集成在React组件中使用WebMCPimport { useEffect, useState } from react; import WebMCP from webmcp; function TodoApp() { const [todos, setTodos] useState([]); useEffect(() { WebMCP.init({ name: React待办应用, tools: [ { name: get_todos, handler: () todos } ] }); }, [todos]); // ... 组件逻辑 }六、典型应用场景1. 后台管理系统AI自动导出数据、生成报表、统计分析自动处理用户工单、审核申请批量执行重复操作如批量导入、批量删除监控系统状态异常时自动报警2. 电商平台AI帮用户查询订单、跟踪物流、申请退款自动生成商品描述、上架商品分析用户行为推荐个性化商品自动处理客户咨询和投诉3. 在线文档与协作工具AI自动编辑文档、生成大纲、整理内容自动翻译文档、生成摘要多人协作时AI可以同步所有人的修改自动检查文档中的错误和格式问题4. 开发工具与平台AI自动调试代码、查看控制台错误自动生成API文档、测试用例部署应用、查看日志、监控性能自动处理GitHub Issues、提交PR七、安全最佳实践最小权限原则只暴露必要的工具给AI不要暴露高风险操作开启用户确认所有修改数据的操作都应该要求用户确认限制操作范围不要让AI访问敏感数据如用户密码、支付信息定期审查日志定期查看AI操作日志及时发现异常行为使用HTTPS确保网站使用HTTPS协议防止数据被窃听更新到最新版本及时更新WebMCP到最新版本修复安全漏洞结尾WebMCP的出现标志着Web正式进入了AI原生时代。它用最简单的方式让每一个网站都能拥有AI助手彻底改变了人类与Web应用的交互方式。从点击按钮操作网站到说一句话完成任务WebMCP正在开启一场Web交互的革命。未来所有的SaaS应用都会支持MCP协议AI将成为每个网站的标配功能与人类一起共同使用和创造数字世界。