[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-MiguelsPizza--WebMCP":3,"tool-MiguelsPizza--WebMCP":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":80,"owner_email":81,"owner_twitter":82,"owner_website":83,"owner_url":84,"languages":85,"stars":110,"forks":111,"last_commit_at":112,"license":113,"difficulty_score":23,"env_os":114,"env_gpu":115,"env_ram":114,"env_deps":116,"category_tags":124,"github_topics":125,"view_count":10,"oss_zip_url":82,"oss_zip_packed_at":82,"status":16,"created_at":129,"updated_at":130,"faqs":131,"releases":161},371,"MiguelsPizza\u002FWebMCP","WebMCP","Bringing the power of MCP to the web","WebMCP 致力于将模型上下文协议（MCP）带入浏览器环境，让网页本身成为 AI 智能体的可操作服务器。通过 WebMCP，网站可以将现有的 API、表单或状态数据转化为结构化的工具，供大语言模型直接调用。这解决了传统 AI 助手难以深度交互网页内容、无法理解本地会话状态的痛点。\n\nWebMCP 特别适合前端开发者和 AI 应用构建者，他们希望在不复杂配置的情况下，为网站添加 AI 自动化能力。其技术亮点在于提供了多种传输方式，包括同标签页的 postMessage 通信和浏览器扩展的运行时消息传递，确保 AI 操作能尊重用户的身份认证（如 Session Cookie）并限定作用域。\n\n值得注意的是，WebMCP 协议正积极向 W3C 标准演进，社区工作已转移至新的仓库。开发者可通过官方文档获取最新集成指南。无论是使用原生 TypeScript、React 还是简单的 Script 标签，都能快速实现 AI 与网页功能的无缝对接，开启浏览器端 AI 交互的新可能。","> [!IMPORTANT]\n> 🚨 The WebMCP API has been accepted as a W3C deliverable and is transitioning to official web standard development. The community and all related work has moved to the [WebMCP explainer repository](https:\u002F\u002Fgithub.com\u002Fwebmachinelearning\u002Fwebmcp). Please join us there! 🚨\n\n> [!IMPORTANT]\n> 📝 Repository Status: The MCP-B extension is no longer open source. This repository represents an older version of the codebase and is maintained for historical reference only. All open source content (transports, etc.) have been ported to the [WebMCP Github Org](https:\u002F\u002Fgithub.com\u002FWebMCP-org).\n\n\n\n# WebMCP:\n\n[![Chrome Web Store](https:\u002F\u002Fimg.shields.io\u002Fchrome-web-store\u002Fv\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?style=flat-square&label=Chrome%20Extension)](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa)\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-b\u002Ftransports?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-b\u002Ftransports)\n[![License: AGPL v3](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-AGPL%20v3-blue.svg?style=flat-square)](https:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fagpl-3.0)\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002FMiguelsPizza\u002FWebMCP\u002Fci.yml?style=flat-square)](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Factions)\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FMiguelsPizza\u002FWebMCP?style=flat-square)](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fstargazers)\n\n[🚀 Quick Start](#quick-start) • [✨ Live Demo](#live-demo) • [📚 Documentation](https:\u002F\u002Fmcp-b.ai) • [🤝 Contributing](#contributing)\n\n## Join Our Community\n\n[![Join Our Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FJoin%20Our%20Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.gg\u002Fa9fBR6Bw)\n\n\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMiguelsPizza_WebMCP_readme_7a95aa19775e.png)\n\n## The protocol\n\nWebMCP is the underlying protocol which MCP-B implements. It is a protocol which exposes function in your browser javascript to LLM's as MCP tools.\n\nFor a more indepth understanding, refer here: https:\u002F\u002Fmcp-b.ai\u002Fblogs\n\n## Live Demo\n\nSee MCP-B in action right away:\n\n### Examples\n\nCheck out our examples repository: **[MCP-B Examples](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)**\n\nThe examples repository contains:\n- **Vanilla TypeScript Demo**: A simple todo app where MCP tools allow AI to manage tasks\n- **React Demo**: Modern React application with MCP-B integration\n- **Script Tag Demo**: The simplest integration - add MCP-B to any website using just a script tag\n\n### Community Examples\n\n- **[Vue ](https:\u002F\u002Fgithub.com\u002Fbestian\u002Fvue-MCP-B-demo)** example By [Besian](https:\u002F\u002Fgithub.com\u002Fbestian)\n- **[Nuxt 3](https:\u002F\u002Fgithub.com\u002Fmikechao\u002Fnuxt3-mcp-b-demo)** example by [Mike Chao](https:\u002F\u002Fgithub.com\u002Fmikechao\u002F)\n\nThese demos highlight how MCP-B integrates into websites without needing complex setups. Install the [MCP-B Chrome Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en) to interact with the tools via the extension's chat interface or tool inspector.\n\n## What is MCP-B?\n\nMCP-B extends the Model Context Protocol (MCP) with browser-specific transports, allowing your website to act as an MCP server. Websites expose existing functionality (e.g., APIs, forms, or state) as structured tools that AI agents can call directly.\n\nKey components:\n\n- **Tab Transports**: Use `postMessage` for communication between your website's MCP server and clients in the same tab.\n- **Extension Transports**: Use Chrome's runtime messaging for communication with browser extensions.\n\nThis setup enables AI to interact with your site deterministically, respecting user authentication (e.g., session cookies) and scoping tools to specific pages or user states.\n\n## Quick Start\n\nGet MCP-B running on your website in minutes. This guide focuses on adding an MCP server to expose tools, using the examples as a blueprint.\n\n### Prerequisites\n\n- **Node.js 22.12+** (check with `node --version`)\n- **pnpm 10+** (install via `npm install -g pnpm`)\n- A website with JavaScript (vanilla, React, etc.)\n- [MCP-B Chrome Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en) installed for testing\n\n### Development Setup (Repository Contributors)\n\nIf you want to contribute to MCP-B or run the examples locally:\n\n1. **Clone and install:**\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git\n   cd WebMCP\n   pnpm install\n   pnpm build:shared  # Build internal shared packages\n   ```\n\n   Note: Some postinstall scripts may fail initially - this is normal.\n\n2. **Configure your development extension ID (optional):**\n\n   ```bash\n   # If your extension ID differs from the default\n   cp apps\u002Fnative-server\u002F.env.example apps\u002Fnative-server\u002F.env\n   # Edit apps\u002Fnative-server\u002F.env with your extension ID\n   ```\n3. **Configure extension model provider and model name:**\n   ```bash\n   # Create a .dev.vars file in apps\u002Fbackend from the example\n   cp apps\u002Fbackend\u002F.dev.vars.example apps\u002Fbackend\u002F.dev.vars\n   # Edit apps\u002Fextension\u002F.env with Open AI or Anthropic API Keys\n   # ANTHROPIC_API_KEY=\"your_claude_api_key_here\"\n   ```\n\n4. **Start development:**\n\n   ```bash\n   pnpm dev\n   ```\n\n   This automatically:\n\n   - Builds all packages and native server\n   - Registers native messaging host for both production and dev extension IDs\n   - Starts WXT with persistent browser profile\n   - Launches extension in Chrome with hot reload\n   - Starts documentation website and all package watchers\n\n5. **Find your extension ID (if needed):**\n\n   - Open Chrome at `chrome:\u002F\u002Fextensions\u002F`\n   - Enable \"Developer mode\"\n   - Find your MCP-B extension and copy the ID\n   - Update `apps\u002Fnative-server\u002F.env` with `DEV_EXTENSION_ID=your-extension-id`\n   - Restart `pnpm dev`\n\n6. **Run examples** - See the [MCP-B Examples Repository](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples) for example applications.\n\n### Adding MCP-B to Your Existing Website\n\nFor adding MCP-B to your own project (recommended for most users):\n\n#### Step 1: Install Dependencies\n\n```bash\nnpm install @mcp-b\u002Ftransports @modelcontextprotocol\u002Fsdk zod\n```\n\n#### Step 2: Add an MCP Server to Your Website\n\nCreate a single MCP server instance and connect it via Tab Transport. Expose tools that wrap your existing logic.\n\nExample (vanilla JS\u002FTypeScript):\n\n```typescript\nimport { TabServerTransport } from \"@mcp-b\u002Ftransports\";\nimport { McpServer } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js\";\nimport { z } from \"zod\";\n\n\u002F\u002F Create the server (one per site)\nconst server = new McpServer({\n  name: \"my-website\",\n  version: \"1.0.0\",\n});\n\n\u002F\u002F Expose a tool (wrap your app's logic)\nserver.tool(\"getPageInfo\", \"Get current page info\", {}, async () => {\n  return {\n    content: [\n      {\n        type: \"text\",\n        text: JSON.stringify({\n          title: document.title,\n          url: window.location.href,\n        }),\n      },\n    ],\n  };\n});\n\n\u002F\u002F Connect the transport\nawait server.connect(new TabServerTransport({ allowedOrigins: [\"*\"] })); \u002F\u002F Adjust origins for security\n```\n\n- **What this does**: The server listens for clients (e.g., the extension injects one). Tools like `getPageInfo` become callable by AI.\n- **Tips**: Use Zod for input schemas. Add visual feedback (e.g., notifications) so users see AI actions.\n\n#### Step 3: Test It\n\n1. Run your site (e.g., via a dev server).\n2. Visit the page in Chrome with the MCP-B extension installed.\n3. Open the extension popup:\n   - Go to the \"Tools\" tab to see your exposed tools.\n   - Use the chat interface to ask AI to call them (e.g., \"Get the page info\").\n   - Or manually invoke via the inspector.\n\n#### Step 4: Explore Examples\n\nCheck out the **[MCP-B Examples Repository](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)** for ready-to-run starters:\n\n- **vanilla-ts**: Basic todo app. Tools: `createTodo`, `getTodos`, etc. Demonstrates dynamic tool registration and UI updates.\n- **react**: Modern React application with hooks and state management integration.\n- **script-tag**: Simple MCP-B integration using just a script tag - no build tools required.\n\nCopy patterns from these examples to your site. Focus on wrapping client-side functions—e.g., use `fetch` with `credentials: 'same-origin'` for authenticated calls.\n\nFor more, see the [documentation](https:\u002F\u002Fmcp-b.ai).\n\n## Using the Extension\n\nThe MCP-B extension acts as a client that discovers and routes calls to your website's MCP tools. Users can interact via a chat interface or tool inspector.\n\n### Option 1: Download from Chrome Web Store\n\nInstall the official release: [MCP-B Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en).\n\nOnce installed:\n\n1. Visit your MCP-enabled website.\n2. Open the extension popup (click the icon in the toolbar).\n3. Use the chat to query AI (e.g., \"Add item to cart\") or the inspector to list\u002Fcall tools manually.\n\n### Option 2: Build from Source (Dev Build)\n\nFor the latest features or custom modifications:\n\n1. Clone the repo: `git clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git`.\n2. Install: `cd WebMCP && pnpm install && pnpm build:shared`.\n3. Build the extension: `pnpm --filter @mcp-b\u002Fextension build`.\n4. Load in Chrome: Go to `chrome:\u002F\u002Fextensions\u002F`, enable Developer Mode, and load `.\u002Fapps\u002Fextension\u002F.output\u002Fchrome-mv3` unpacked.\n\nRun in dev mode for hot reloading: `pnpm --filter @mcp-b\u002Fextension dev`.\n\n## Hooking Up the Native Server\n\nTo connect MCP-B to local MCP clients (e.g., Claude Desktop, Cursor) via a native server, bridging the browser to local processes:\n\n> IMPORTANT: You will need to disable the chrome webstore version of the extension if you have it downloaded.\n> Failure to do so will cause port clashing when the dev and prod extension run\n\n1. Install globally: `npm install -g @mcp-b\u002Fnative-server`.\n2. Run the host: `@mcp-b\u002Fnative-server` (starts a server on port 12306 by default).\n\nAdd this configuration to your MCP client (e.g., in Claude's config or Cursor's `.cursor\u002Fmcp.json`):\n\n```json\n{\n  \"type\": \"streamable-http\",\n  \"url\": \"http:\u002F\u002F127.0.0.1:12306\u002Fmcp\",\n  \"note\": \"For Streamable HTTP connections, add this URL directly in your MCP Client\"\n}\n```\n\n- **What this does**: The native server proxies requests from local clients to the browser extension, allowing tools from your website to be called from desktop apps.\n- **Note**: The native server is based on [mcp-chrome](https:\u002F\u002Fgithub.com\u002Fhangwin\u002Fmcp-chrome) by [hangwin](https:\u002F\u002Fgithub.com\u002Fhangwin). Ensure the extension is running and tabs with your site are open.\n\nTest by running a local client (e.g., MCP Inspector) pointed at the URL, then calling tools from your site.\n\n## Advanced Usage\n\n- **Dynamic Tools**: Register\u002Funregister tools based on page or user state (e.g., admin-only tools in React components).\n- **Tool Caching**: Annotate tools with `{ annotations: { cache: true } }` to persist across tabs.\n- **Security**: Tools run in your page's context—only expose what you'd allow via UI. Use MCP's elicitation for sensitive ops (support coming soon).\n\n## Repository Structure\n\n```\nWebMCP\u002F\n├── apps\u002F                    # Application packages\n│   ├── extension\u002F          # Browser extension\n│   ├── backend\u002F            # Backend server (Cloudflare Workers)\n│   └── native-server\u002F      # Native messaging host\n├── shared\u002F                 # Internal shared packages\n│   └── utils\u002F             # Shared utility functions\n└── e2e-tests\u002F             # End-to-end tests\n```\n\n### Related Repositories\n\n- **[NPM Packages](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fnpm-packages)** - Core npm packages (@mcp-b\u002Ftransports, @mcp-b\u002Fmcp-react-hooks, etc.)\n- **[Examples](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)** - Starter projects and demos\n- **[Web Demo](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fweb)** - Full-stack demo site with documentation\n- **[WebMCP Userscripts](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fwebmcp-userscripts)** - Tampermonkey scripts that inject MCP-B servers into popular websites\n\n## Troubleshooting\n\n### Common Setup Issues\n\n**Git clone times out:**\n\n```bash\n# If the initial clone fails, complete it manually:\ngit clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git\ncd WebMCP\ngit pull origin main\n```\n\n**Native server postinstall errors:**\n\n```bash\n# These errors during pnpm install are normal and can be ignored:\n# \"Cannot find module '\u002Fpath\u002Fto\u002Fapps\u002Fnative-server\u002Fdist\u002Fscripts\u002Fpostinstall.js'\"\n# The packages will still build correctly.\n```\n\n**Example won't start:** See the [MCP-B Examples Repository](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples) for proper setup instructions.\n\n**Import resolution errors:**\n\nFor monorepo development:\n\n```bash\n# Ensure the workspace is properly built:\npnpm build:shared  # Build internal shared packages\npnpm build:apps     # Build all applications\n# Or run from the root with workspace support:\npnpm dev\n```\n\nFor examples: See the [MCP-B Examples Repository](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples).\n\n**Port conflicts:**\n\n- Main dev server runs on port 5173-5174\n- Extension dev server runs on port 3000\n- Native host runs on port 12306\n\n### Extension Issues\n\n**Extension not detecting tools:**\n\n1. Ensure the extension is installed and enabled\n2. Refresh the page after starting your MCP server\n3. Check the extension popup \"Tools\" tab\n4. Look for console errors in browser DevTools\n\n**Tools not working:**\n\n1. Verify your `TabServerTransport` configuration\n2. Check that `allowedOrigins` includes your domain\n3. Ensure tools are properly registered before transport connection\n\n## Development\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git\ncd WebMCP\npnpm install\npnpm build:shared  # Build internal shared packages first\npnpm dev  # Runs all in dev mode\n```\n\n## Contributing\n\nContributions welcome! Focus on transports, examples, or docs. See [CONTRIBUTING.md](.\u002FCONTRIBUTING.md).\n\n## Security & Trust\n\n- Respects browser sandbox and same-origin policy.\n- No data collection; runs locally.\n- Audit tool calls via the extension.\n\n## Roadmap\n\n- Firefox\u002FSafari support.\n- Full MCP spec (beyond tools).\n- Native host upstreaming.\n\n## Tutorial video\n\n[![Watch the video](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMiguelsPizza_WebMCP_readme_811b20573501.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Obw7WE36D6s)\n\n> MCP-B lets your website become an MCP server, exposing functionality as tools that AI agents can call directly—using the browser's existing authentication and security model.\n\n\n## License\n\nAGPL-3.0 - see [LICENSE](.\u002FLICENSE).\n\nCreated by Alexander Nahas ([@miguelsPizza](https:\u002F\u002Fgithub.com\u002FmiguelsPizza)). Reach out: alexnahasdev@gmail.com.\n\n[Website](https:\u002F\u002Fmcp-b.ai) • [GitHub](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP)\n","> [!IMPORTANT]\n> 🚨 WebMCP API 已被接受为 W3C 交付成果，并正在过渡到官方 Web 标准开发。社区及所有相关工作已移至 [WebMCP explainer repository](https:\u002F\u002Fgithub.com\u002Fwebmachinelearning\u002Fwebmcp)。请在那里加入我们！🚨\n\n> [!IMPORTANT]\n> 📝 仓库状态：MCP-B 扩展不再开源。此仓库代表代码库的旧版本，仅用于历史参考。所有开源内容（传输层等）已移植到 [WebMCP Github Org](https:\u002F\u002Fgithub.com\u002FWebMCP-org)。\n\n\n\n# WebMCP:\n\n[![Chrome Web Store](https:\u002F\u002Fimg.shields.io\u002Fchrome-web-store\u002Fv\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?style=flat-square&label=Chrome%20Extension)](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa)\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-b\u002Ftransports?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-b\u002Ftransports)\n[![License: AGPL v3](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-AGPL%20v3-blue.svg?style=flat-square)](https:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fagpl-3.0)\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002FMiguelsPizza\u002FWebMCP\u002Fci.yml?style=flat-square)](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Factions)\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FMiguelsPizza\u002FWebMCP?style=flat-square)](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fstargazers)\n\n[🚀 快速开始](#quick-start) • [✨ 实时演示](#live-demo) • [📚 文档](https:\u002F\u002Fmcp-b.ai) • [🤝 贡献](#contributing)\n\n## 加入我们的社区\n\n[![Join Our Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FJoin%20Our%20Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.gg\u002Fa9fBR6Bw)\n\n\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMiguelsPizza_WebMCP_readme_7a95aa19775e.png)\n\n## 协议\n\nWebMCP 是 MCP-B 实现的底层协议。它是一个将浏览器 JavaScript 中的函数暴露给大型语言模型 (LLM) 作为 MCP 工具的协议。\n\n欲深入了解，请参考此处：https:\u002F\u002Fmcp-b.ai\u002Fblogs\n\n## 实时演示\n\n立即查看 MCP-B 的实际运行效果：\n\n### 示例\n\n查看我们的示例仓库：**[MCP-B 示例](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)**\n\n该示例仓库包含：\n- **原生 TypeScript 演示**：一个简单的待办事项应用，其中 MCP 工具允许 AI 管理任务\n- **React 演示**：集成了 MCP-B 的现代 React 应用程序\n- **脚本标签演示**：最简单的集成方式——仅使用一个脚本标签即可将 MCP-B 添加到任何网站\n\n### 社区示例\n\n- **[Vue ](https:\u002F\u002Fgithub.com\u002Fbestian\u002Fvue-MCP-B-demo)** 示例 由 [Besian](https:\u002F\u002Fgithub.com\u002Fbestian) 提供\n- **[Nuxt 3](https:\u002F\u002Fgithub.com\u002Fmikechao\u002Fnuxt3-mcp-b-demo)** 示例 由 [Mike Chao](https:\u002F\u002Fgithub.com\u002Fmikechao\u002F) 提供\n\n这些演示突出了 MCP-B 如何集成到网站中而无需复杂的设置。安装 [MCP-B Chrome 扩展](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en) 以通过扩展的聊天界面或工具检查器与工具进行交互。\n\n## 什么是 MCP-B？\n\nMCP-B 使用针对浏览器的传输层 (Transports) 扩展了模型上下文协议 (Model Context Protocol, MCP)，允许您的网站充当 MCP 服务器。网站将现有功能（例如 API、表单或状态）暴露为结构化工具，AI 代理可以直接调用它们。\n\n关键组件：\n\n- **标签页传输层 (Tab Transports)**：使用 `postMessage` 在同一标签页内您的网站 MCP 服务器和客户端之间进行通信。\n- **扩展传输层 (Extension Transports)**：使用 Chrome 的运行时消息传递与浏览器扩展进行通信。\n\n此设置使 AI 能够确定性地与您的站点交互，尊重用户身份验证（例如会话 Cookie），并将工具范围限定在特定页面或用户状态。\n\n## 快速开始\n\n几分钟内即可让您的网站运行 MCP-B。本指南侧重于添加 MCP 服务器以暴露工具，并以示例为蓝图。\n\n### 前置条件\n\n- **Node.js 22.12+** (使用 `node --version` 检查)\n- **pnpm 10+** (通过 `npm install -g pnpm` 安装)\n- 带有 JavaScript 的网站（原生、React 等）\n- 已安装 [MCP-B Chrome 扩展](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en) 用于测试\n\n### 开发环境设置（仓库贡献者）\n\n如果您想为 MCP-B 做贡献或在本地运行示例：\n\n1. **克隆并安装：**\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git\n   cd WebMCP\n   pnpm install\n   pnpm build:shared  # Build internal shared packages\n   ```\n\n   注意：某些 postinstall 脚本最初可能会失败——这是正常的。\n\n2. **配置您的开发扩展 ID（可选）：**\n\n   ```bash\n   # If your extension ID differs from the default\n   cp apps\u002Fnative-server\u002F.env.example apps\u002Fnative-server\u002F.env\n   # Edit apps\u002Fnative-server\u002F.env with your extension ID\n   ```\n3. **配置扩展模型提供者和模型名称：**\n   ```bash\n   # Create a .dev.vars file in apps\u002Fbackend from the example\n   cp apps\u002Fbackend\u002F.dev.vars.example apps\u002Fbackend\u002F.dev.vars\n   # Edit apps\u002Fextension\u002F.env with Open AI or Anthropic API Keys\n   # ANTHROPIC_API_KEY=\"your_claude_api_key_here\"\n   ```\n\n4. **启动开发：**\n\n   ```bash\n   pnpm dev\n   ```\n\n   这将自动：\n\n   - 构建所有包和本地服务器\n   - 为生产环境和开发环境扩展 ID 注册原生消息传递主机\n   - 启动带有持久化浏览器配置的 WXT\n   - 在 Chrome 中启动扩展并启用热重载\n   - 启动文档网站和所有包监听器\n\n5. **查找您的扩展 ID（如果需要）：**\n\n   - 在 `chrome:\u002F\u002Fextensions\u002F` 打开 Chrome\n   - 启用“开发者模式”\n   - 找到您的 MCP-B 扩展并复制 ID\n   - 使用 `DEV_EXTENSION_ID=your-extension-id` 更新 `apps\u002Fnative-server\u002F.env`\n   - 重启 `pnpm dev`\n\n6. **运行示例** - 参见 [MCP-B 示例仓库](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples) 获取示例应用程序。\n\n### 将 MCP-B 添加到您的现有网站\n\n要将 MCP-B 添加到您自己的项目中（推荐给大多数用户）：\n\n#### 步骤 1：安装依赖项\n\n```bash\nnpm install @mcp-b\u002Ftransports @modelcontextprotocol\u002Fsdk zod\n```\n\n#### 步骤 2：向您的网站添加 MCP 服务器\n\n创建一个单一的 MCP（模型上下文协议）服务器实例，并通过 Tab Transport（标签传输）连接它。暴露封装您现有逻辑的工具。\n\n示例（原生 JavaScript\u002FTypeScript）：\n\n```typescript\nimport { TabServerTransport } from \"@mcp-b\u002Ftransports\";\nimport { McpServer } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js\";\nimport { z } from \"zod\";\n\n\u002F\u002F Create the server (one per site)\nconst server = new McpServer({\n  name: \"my-website\",\n  version: \"1.0.0\",\n});\n\n\u002F\u002F Expose a tool (wrap your app's logic)\nserver.tool(\"getPageInfo\", \"Get current page info\", {}, async () => {\n  return {\n    content: [\n      {\n        type: \"text\",\n        text: JSON.stringify({\n          title: document.title,\n          url: window.location.href,\n        }),\n      },\n    ],\n  };\n});\n\n\u002F\u002F Connect the transport\nawait server.connect(new TabServerTransport({ allowedOrigins: [\"*\"] })); \u002F\u002F Adjust origins for security\n```\n\n- **作用**：服务器监听客户端（例如，扩展会注入一个）。像 `getPageInfo` 这样的工具可由 AI 调用。\n- **提示**：使用 Zod 进行输入模式定义。添加视觉反馈（例如通知），以便用户看到 AI 操作。\n\n#### 步骤 3：测试它\n\n1. 运行您的站点（例如，通过开发服务器）。\n2. 在安装了 MCP-B 扩展程序的 Chrome 中访问该页面。\n3. 打开扩展程序弹出窗口：\n   - 转到“工具”选项卡以查看您暴露的工具。\n   - 使用聊天界面要求 AI 调用它们（例如，“获取页面信息”）。\n   - 或通过检查器手动调用。\n\n#### 步骤 4：探索示例\n\n查看 **[MCP-B 示例仓库](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)** 以获取现成的启动项目：\n\n- **vanilla-ts**：基础待办事项应用。工具：`createTodo`、`getTodos` 等。演示动态工具注册和 UI 更新。\n- **react**：集成了 hooks 和状态管理的现代 React 应用程序。\n- **script-tag**：仅使用脚本标签即可实现的简单 MCP-B 集成——无需构建工具。\n\n从这些示例中复制模式到您的站点。专注于封装客户端函数——例如，对于认证调用，使用带有 `credentials: 'same-origin'` 的 `fetch`。\n\n更多详情，请参阅 [文档](https:\u002F\u002Fmcp-b.ai)。\n\n## 使用扩展程序\n\nMCP-B 扩展程序充当客户端，发现并将调用路由到您网站的 MCP 工具。用户可以通过聊天界面或工具检查器进行交互。\n\n### 选项 1：从 Chrome 应用商店下载\n\n安装官方版本：[MCP-B 扩展程序](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en)。\n\n安装后：\n\n1. 访问您的 MCP 启用网站。\n2. 打开扩展程序弹出窗口（点击工具栏中的图标）。\n3. 使用聊天查询 AI（例如，“将商品添加到购物车”）或使用检查器列出\u002F手动调用工具。\n\n### 选项 2：从源代码构建（开发版）\n\n用于获取最新功能或自定义修改：\n\n1. 克隆仓库：`git clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git`。\n2. 安装：`cd WebMCP && pnpm install && pnpm build:shared`。\n3. 构建扩展程序：`pnpm --filter @mcp-b\u002Fextension build`。\n4. 在 Chrome 中加载：转到 `chrome:\u002F\u002Fextensions\u002F`，启用开发者模式，并加载 `.\u002Fapps\u002Fextension\u002F.output\u002Fchrome-mv3` 解压文件。\n\n以开发模式运行以实现热重载：`pnpm --filter @mcp-b\u002Fextension dev`。\n\n## 连接本地服务器\n\n要通过本地服务器将 MCP-B 连接到本地 MCP 客户端（例如 Claude Desktop、Cursor），桥接浏览器和本地进程：\n\n> **重要提示**：如果您已下载了 Chrome 应用商店版本的扩展程序，您将需要禁用它。\n> 如果不这样做，当开发和生产扩展程序运行时会导致端口冲突。\n\n1. 全局安装：`npm install -g @mcp-b\u002Fnative-server`。\n2. 运行主机：`@mcp-b\u002Fnative-server`（默认情况下在 12306 端口启动服务器）。\n\n将此配置添加到您的 MCP 客户端（例如，在 Claude 的配置或 Cursor 的 `.cursor\u002Fmcp.json` 中）：\n\n```json\n{\n  \"type\": \"streamable-http\",\n  \"url\": \"http:\u002F\u002F127.0.0.1:12306\u002Fmcp\",\n  \"note\": \"For Streamable HTTP connections, add this URL directly in your MCP Client\"\n}\n```\n\n- **作用**：本地服务器将来自本地客户端的请求代理到浏览器扩展程序，允许从桌面应用程序调用您网站上的工具。\n- **注意**：本地服务器基于 [hangwin](https:\u002F\u002Fgithub.com\u002Fhangwin) 的 [mcp-chrome](https:\u002F\u002Fgithub.com\u002Fhangwin\u002Fmcp-chrome)。确保扩展程序正在运行且打开了包含您站点的标签页。\n\n通过运行指向该 URL 的本地客户端（例如 MCP Inspector），然后调用您站点的工具进行测试。\n\n## 高级用法\n\n- **动态工具**：根据页面或用户状态注册\u002F注销工具（例如，React 组件中的仅限管理员工具）。\n- **工具缓存**：注释工具 `{ annotations: { cache: true } }` 以跨标签页持久化。\n- **安全性**：工具在您的页面上下文中运行——只暴露您允许 UI 的内容。使用 MCP 的 elicitation（询问）处理敏感操作（支持即将推出）。\n\n## 仓库结构\n\n```\nWebMCP\u002F\n├── apps\u002F                    # Application packages\n│   ├── extension\u002F          # Browser extension\n│   ├── backend\u002F            # Backend server (Cloudflare Workers)\n│   └── native-server\u002F      # Native messaging host\n├── shared\u002F                 # Internal shared packages\n│   └── utils\u002F             # Shared utility functions\n└── e2e-tests\u002F             # End-to-end tests\n```\n\n### 相关仓库\n\n- **[NPM Packages](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fnpm-packages)** - 核心 npm 包 (@mcp-b\u002Ftransports, @mcp-b\u002Fmcp-react-hooks 等)\n- **[Examples](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)** - 启动项目和演示\n- **[Web Demo](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fweb)** - 带有文档的全栈演示站点\n- **[WebMCP Userscripts](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fwebmcp-userscripts)** - 将 MCP-B 服务器注入流行网站的 Tampermonkey 脚本\n\n## 故障排除\n\n### 常见设置问题\n\n**Git 克隆超时：**\n\n```bash\n# If the initial clone fails, complete it manually:\ngit clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git\ncd WebMCP\ngit pull origin main\n```\n\n**本地服务器 postinstall 错误：**\n\n```bash\n# These errors during pnpm install are normal and can be ignored:\n# \"Cannot find module '\u002Fpath\u002Fto\u002Fapps\u002Fnative-server\u002Fdist\u002Fscripts\u002Fpostinstall.js'\"\n# The packages will still build correctly.\n```\n\n**示例无法启动：** 请查看 [MCP-B 示例仓库](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples) 以获取正确的设置说明。\n\n**导入解析错误：**\n\n对于 Monorepo（单体仓库）开发：\n\n```bash\n# Ensure the workspace is properly built:\npnpm build:shared  # Build internal shared packages\npnpm build:apps     # Build all applications\n```\n\n# 或者从根目录运行，支持工作区：\n```\npnpm dev\n```\n\n示例：请参阅 [MCP-B 示例仓库](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples)。\n\n**端口冲突：**\n\n- 主开发服务器运行在端口 5173-5174\n- 扩展开发服务器运行在端口 3000\n- 原生主机运行在端口 12306\n\n### 扩展问题\n\n**扩展未检测到工具：**\n\n1. 确保扩展已安装并启用\n2. 启动您的 MCP（模型上下文协议）服务器后刷新页面\n3. 检查扩展弹出窗口的“工具”标签页\n4. 在浏览器开发者工具 (DevTools) 中查找控制台错误\n\n**工具无法工作：**\n\n1. 验证您的 `TabServerTransport` 配置\n2. 检查 `allowedOrigins` 是否包含您的域名\n3. 确保在传输连接之前正确注册了工具\n\n## 开发\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP.git\ncd WebMCP\npnpm install\npnpm build:shared  # Build internal shared packages first\npnpm dev  # Runs all in dev mode\n```\n\n## 贡献\n\n欢迎贡献！重点关注传输层、示例或文档。请查看 [CONTRIBUTING.md](.\u002FCONTRIBUTING.md)。\n\n## 安全与信任\n\n- 尊重浏览器沙箱 (browser sandbox) 和同源策略 (same-origin policy)。\n- 无数据收集；本地运行。\n- 通过扩展审计工具调用。\n\n## 路线图\n\n- Firefox\u002FSafari 支持。\n- 完整的 MCP 规范（超越工具）。\n- 原生主机功能合并至上游项目。\n\n## 教程视频\n\n[![Watch the video](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMiguelsPizza_WebMCP_readme_811b20573501.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Obw7WE36D6s)\n\n> MCP-B 允许您的网站成为 MCP 服务器，将功能暴露为 AI 代理可以直接调用的工具——利用浏览器现有的认证和安全模型。\n\n\n## 许可证\n\nAGPL-3.0 - 参见 [LICENSE](.\u002FLICENSE)。\n\n由 Alexander Nahas 创建 ([@miguelsPizza](https:\u002F\u002Fgithub.com\u002FmiguelsPizza))。联系方式：alexnahasdev@gmail.com。\n\n[网站](https:\u002F\u002Fmcp-b.ai) • [GitHub](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP)","# WebMCP 快速上手指南\n\nWebMCP 是一种底层协议，通过 MCP-B 实现，可将浏览器中的 JavaScript 功能暴露为大语言模型的 MCP 工具。这使得 AI 能够直接调用网站现有的功能（如 API、表单或状态）。\n\n> **注意**：相关开源内容已迁移至 [WebMCP Github Org](https:\u002F\u002Fgithub.com\u002FWebMCP-org)，本指南基于当前可用的 NPM 包进行集成。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n- **Node.js**: 版本 22.12+ (可通过 `node --version` 检查)\n- **包管理器**: pnpm 10+ (可通过 `npm install -g pnpm` 安装)\n- **浏览器**: Google Chrome\n- **扩展程序**: 安装 [MCP-B Chrome Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa) 用于测试\n\n## 安装步骤\n\n将 MCP-B 集成到您的现有网站项目中，首先安装必要的依赖包：\n\n```bash\nnpm install @mcp-b\u002Ftransports @modelcontextprotocol\u002Fsdk zod\n```\n\n## 基本使用\n\n创建一个 MCP 服务器实例，并通过 Tab Transport 连接，暴露您网站的逻辑作为 AI 可调用的工具。\n\n### 1. 创建服务器并注册工具\n\n在您的网站入口文件（如 `index.ts` 或 `main.tsx`）中添加以下代码：\n\n```typescript\nimport { TabServerTransport } from \"@mcp-b\u002Ftransports\";\nimport { McpServer } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js\";\nimport { z } from \"zod\";\n\n\u002F\u002F 创建服务器（每个站点一个实例）\nconst server = new McpServer({\n  name: \"my-website\",\n  version: \"1.0.0\",\n});\n\n\u002F\u002F 暴露工具（封装您的应用逻辑）\nserver.tool(\"getPageInfo\", \"Get current page info\", {}, async () => {\n  return {\n    content: [\n      {\n        type: \"text\",\n        text: JSON.stringify({\n          title: document.title,\n          url: window.location.href,\n        }),\n      },\n    ],\n  };\n});\n\n\u002F\u002F 连接传输层\nawait server.connect(new TabServerTransport({ allowedOrigins: [\"*\"] })); \u002F\u002F 根据安全需求调整 origins\n```\n\n### 2. 运行与测试\n\n1. 启动您的网站开发服务器。\n2. 在 Chrome 中访问该页面，确保已安装 MCP-B 扩展。\n3. 打开扩展程序的弹出窗口：\n   - 切换到 **\"Tools\"** 标签页查看已暴露的工具。\n   - 使用聊天界面让 AI 调用工具（例如输入：\"Get the page info\"）。\n   - 或通过 Inspector 手动调用工具。\n\n## 进阶参考\n\n- **更多示例**: 查看 [MCP-B Examples Repository](https:\u002F\u002Fgithub.com\u002FWebMCP-org\u002Fexamples) 获取 React、Vue 等框架的集成模板。\n- **本地客户端连接**: 如需连接 Claude Desktop 等本地 MCP 客户端，可安装全局原生服务器 `npm install -g @mcp-b\u002Fnative-server` 并配置 URL 指向 `http:\u002F\u002F127.0.0.1:12306\u002Fmcp`。","某电商客服团队在使用自研的后台管理系统处理复杂用户投诉时，需要频繁查询订单详情并修改物流状态。\n\n### 没有 WebMCP 时\n- 客服需手动在聊天窗口和 CRM 系统间反复切换，复制粘贴订单号，极易因疲劳导致操作失误。\n- 内置 AI 助手无法直接访问页面 DOM 或 API，只能提供通用话术，无法执行具体的数据变更操作。\n- 敏感用户信息通过剪贴板跨应用传输存在泄露风险，且难以验证当前会话的登录权限是否有效。\n- 每次功能调用都依赖人工点击确认，导致平均通话时长显著增加，影响整体服务效率。\n\n### 使用 WebMCP 后\n- WebMCP 将 CRM 的查询与更新接口暴露为结构化 MCP 工具，AI 可直接调用函数完成数据修改而无需人工干预。\n- 浏览器上下文自动同步，AI 能实时读取当前页面状态，精准识别用户身份，无需重复输入关键信息。\n- 利用原生 Cookie 机制保持认证，确保 WebMCP 操作严格符合当前用户的权限范围，杜绝越权风险。\n- 业务流程实现半自动化，客服仅需审核 AI 生成的结果，大幅缩短单次服务耗时并降低人为错误率。\n\nWebMCP 成功让 AI 安全地直接在网页中执行任务，彻底打通了大模型与业务系统的最后一公里。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMiguelsPizza_WebMCP_811b2057.png","MiguelsPizza","Alex Nahas","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FMiguelsPizza_c8ce5ec6.jpg","Creator of MCP-B, a tooling ecosystem to help agents navigate the web. W3C WebExtensions CG contributor.","MCP-B","Seattle","alexmnahas@gmail.com",null,"https:\u002F\u002Fmcp-b.ai\u002F","https:\u002F\u002Fgithub.com\u002FMiguelsPizza",[86,90,94,98,102,106],{"name":87,"color":88,"percentage":89},"TypeScript","#3178c6",92.2,{"name":91,"color":92,"percentage":93},"JavaScript","#f1e05a",4.2,{"name":95,"color":96,"percentage":97},"CSS","#663399",1.3,{"name":99,"color":100,"percentage":101},"Shell","#89e051",1.1,{"name":103,"color":104,"percentage":105},"HTML","#e34c26",0.7,{"name":107,"color":108,"percentage":109},"Batchfile","#C1F12E",0.5,1048,75,"2026-04-01T07:59:40","NOASSERTION","未说明","不需要",{"notes":117,"python":114,"dependencies":118},"1. 核心功能基于浏览器扩展（Chrome Extension），需安装 MCP-B 扩展进行测试。\n2. 开发环境依赖 Node.js 和 pnpm，无需 Python 环境。\n3. 仓库状态提示 MCP-B 扩展已不再开源，当前库仅用于历史参考，新项目迁移至 WebMCP Github Org。\n4. 若需连接本地客户端（如 Claude Desktop），需额外安装并配置原生服务器（native-server）。\n5. 支持将网站功能暴露为 MCP 工具供 AI 调用，不涉及本地大模型推理。",[119,120,121,122,123],"Node.js 22.12+","pnpm 10+","@mcp-b\u002Ftransports","@modelcontextprotocol\u002Fsdk","zod",[14,15,13],[126,127,128],"ai","mcp","typescript","2026-03-27T02:49:30.150509","2026-04-06T05:32:21.379982",[132,137,142,147,152,157],{"id":133,"question_zh":134,"answer_zh":135,"source_url":136},1340,"构建时遇到 `wxt: command not found` 或缺少 dist 文件夹错误怎么办？","请确保已正确安装依赖。维护者指出项目文档已在 README 中清理更新，并提供了新的快速开始文档链接：https:\u002F\u002Fdocs.mcp-b.ai\u002Fquickstart。建议按照最新文档步骤操作。","https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fissues\u002F9",{"id":138,"question_zh":139,"answer_zh":140,"source_url":141},1341,"WebMCP 扩展程序支持哪些浏览器？","目前仅支持 Google Chrome。建议安装 Chrome 二进制文件以确保扩展能正常运行。","https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fissues\u002F19",{"id":143,"question_zh":144,"answer_zh":145,"source_url":146},1342,"安装 `@mcp-b\u002Fnative-host` 时提示 npm 404 错误如何解决？","该包已经发布并可以使用。如果遇到 404 错误，可能是暂时性问题，维护者确认包已上线并正在修复剩余的小问题，请稍后重试。","https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fissues\u002F16",{"id":148,"question_zh":149,"answer_zh":150,"source_url":151},1343,"无参数的工具函数无法通过聊天调用怎么办？","这是一个已知问题，目前已修复。您可以尝试直接通过按钮执行此类工具函数，或者再次尝试通过聊天输入调用。","https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fissues\u002F4",{"id":153,"question_zh":154,"answer_zh":155,"source_url":156},1344,"连接本地服务器端口 12306 失败（Connection refused）如何处理？","这通常与原生服务器有关。请检查扩展控制台中是否有其他错误，并尝试运行命令 `curl http:\u002F\u002F127.0.0.1:12306\u002Fmcp` 来验证连接状态。","https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fissues\u002F47",{"id":158,"question_zh":159,"answer_zh":160,"source_url":136},1345,"在 macOS 文件选择器中找不到隐藏配置文件怎么办？","在文件选择器中按下 `command & shift & \".\"` 组合键即可显示隐藏文件。您也可以将文件名重命名为不以点号开头的方式。",[162,167],{"id":163,"version":164,"summary_zh":165,"released_at":166},100847,"0.1.0","# @mcp-b\u002Fnative-host v1.0.0 Release Notes\r\n\r\n> See this video for instructions on getting it set up: https:\u002F\u002Fscreen.studio\u002Fshare\u002FE0Lv9lZ7\r\n\r\n**Release Date:** August 02, 2025\r\n\r\n## Overview\r\n\r\nInitial release of `@mcp-b\u002Fnative-host`, bridging the MCP-B browser extension to local MCP clients via a Streamable HTTP endpoint (default: `http:\u002F\u002F127.0.0.1:12306\u002Fmcp`). Based on [mcp-chrome](https:\u002F\u002Fgithub.com\u002Fhangwin\u002Fmcp-chrome).\r\n\r\n## Installation\r\n\r\nInstall globally:\r\n\r\n```bash\r\nnpm install -g @mcp-b\u002Fnative-host\r\n```\r\n\r\n## Setup Instructions\r\n\r\nEnsure the MCP-B extension is installed and your MCP-enabled site is open in Chrome.\r\n\r\n### For Clients Supporting Streamable HTTP (e.g., Cursor)\r\n\r\nAdd to your client's config (e.g., `.cursor\u002Fmcp.json`):\r\n\r\n```json\r\n{\r\n  \"type\": \"streamable-http\",\r\n  \"url\": \"http:\u002F\u002F127.0.0.1:12306\u002Fmcp\"\r\n}\r\n```\r\n\r\n### For Stdio-Only Clients (e.g., Claude Desktop)\r\n\r\nUse `mcp-proxy` to bridge Streamable HTTP to stdio.\r\n\r\n1. Install `mcp-proxy` (via `uv` or `pipx`):\r\n\r\n   ```bash\r\n   uv tool install mcp-proxy\r\n   ```\r\n\r\n2. Find full path: `which mcp-proxy` (e.g., `\u002FUsers\u002Fyourusername\u002F.local\u002Fbin\u002Fmcp-proxy`).\r\n\r\n3. Add to Claude's config (Settings > Developer > Edit Config):\r\n\r\n   ```json\r\n   {\r\n     \"mcpServers\": {\r\n       \"mcp-b-proxy\": {\r\n         \"command\": \"\u002Fpath\u002Fto\u002Fmcp-proxy\",\r\n         \"args\": [\r\n           \"http:\u002F\u002F127.0.0.1:12306\u002Fmcp\",\r\n           \"--transport=streamablehttp\"\r\n         ],\r\n         \"env\": {}\r\n       }\r\n     }\r\n   }\r\n   ```\r\n\r\n## Usage Notes\r\n\r\n- Disable Web Store extension during dev to avoid port clashes.\r\n- Test with MCP Inspector; tools are domain-prefixed.\r\n\r\n## What's Next\r\n\r\nCustom ports, enhanced logging, and multi-browser support.\r\n\r\nReport issues on [GitHub](https:\u002F\u002Fgithub.com\u002FMiguelsPizza\u002FWebMCP\u002Fissues). Join [Discord](https:\u002F\u002Fdiscord.gg\u002Fa9fBR6Bw).\r\n\r\n","2025-08-03T04:39:58",{"id":168,"version":169,"summary_zh":170,"released_at":171},100848,"0.0.1","# 🚀 New Feature: Script Tag Integration (`@mcp-b\u002Fglobal`)\r\n\r\n**Add MCP support to any website with just one script tag!**\r\n\r\nWe've added the easiest way ever to integrate MCP-B into your website. No build tools, no complex setup—just drop in a script tag and your site becomes MCP-B.\r\n\r\n## ✨ What's New\r\n\r\n- **Zero-config setup**: Works instantly in any modern browser\r\n- **CDN-ready**: Available via unpkg for immediate use\r\n- **Global API**: Automatically exposes `window.mcp` for tool registration\r\n- **Complete example**: Interactive todo app demo included\r\n\r\n## 🎯 Quick Start\r\n\r\n```html\r\n\u003C!-- Add this to any HTML page -->\r\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@mcp-b\u002Fglobal@latest\">\u003C\u002Fscript>\r\n\r\n\u003Cscript>\r\n    \r\n  window.mcp.registerTool(\"getPageInfo\", {\r\n    title: \"Get Page Info\",\r\n    description: \"Returns current page details\"\r\n  }, async () => ({\r\n    content: [{ type: \"text\", text: JSON.stringify({\r\n      title: document.title,\r\n      url: location.href\r\n    })}]\r\n  }));\r\n}\r\n\u003C\u002Fscript>\r\n```\r\n\r\n## 🎮 Try the Demo\r\n\r\nCheck out `\u002Fexamples\u002Fscript-tag\u002F` for a complete working example with:\r\n- Todo management tools\r\n- Calculator functionality  \r\n- Real-time AI integration\r\n- Visual feedback for tool calls\r\n\r\nPerfect for prototypes, MVPs, or adding AI to existing sites without refactoring!\r\n\r\n**Install the [MCP-B Extension](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fmcp-b\u002Fdaohopfhkdelnpemnhlekblhnikhdhfa) and try saying: \"Add a todo: Buy groceries\" or \"What's 15 * 23?\"**","2025-07-26T19:52:59"]