WebMCP DevTools

Inspect, run and debug WebMCP tools in a browser side panel. Connect AI to page workflows and trace inputs, results and errors.

Bring AI into real webpage workflows—and see what every tool call actually does.  WebMCP lets websites expose structured tools for tasks such as reading data, editing a project or preparing a proposal. An AI agent can call these tools while the website validates inputs, performs the operation and displays the result in the user's existing workspace.  WebMCP DevTools helps developers inspect and test these integrations from a browser side panel.  FEATURES  • Discover tools, inspect descriptions and input schemas, filter tabs and frames, and watch registration changes. • Run tools manually using schema-based forms. Inspect results, errors and timing, with configurable timeouts and cooperative cancellation. • Test AI workflows with your own Gemini, OpenAI, Claude or DeepSeek configuration. Tool definitions refresh between rounds after navigation or dynamic registration. • Review execution records from manual calls, the AI panel and the optional MCP Bridge. • Save regression cases with expected JSON results, replay batches and detect schema changes. • Compare snapshots and export JSON, Markdown, Postman Collections or TypeScript. • Optionally connect page tools to external MCP clients through the local MCP Bridge service.  WHO IT IS FOR  Frontend developers integrating WebMCP, testers checking tool behavior, and teams adding AI interactions to existing web applications.  A music editor might expose score editing and playback. A data workspace might expose filtering, calculations and source rows. A business application might prepare a proposal for a human to approve. These capabilities must be implemented by the website; installing this extension does not add them to every page automatically.  GET STARTED  1. Open a WebMCP-enabled page and enable any browser capabilities required by the official documentation. 2. Open the extension side panel, inspect the tools and run a manual call. 3. To test AI workflows, configure your own provider, model and API key. 4. Check the actual inputs and outputs in the execution records. Source and feedback: https://github.com/2019-02-18/WebMCP-DevTools  COMPATIBILITY AND LIMITS  WebMCP is evolving and requires browser and website support. The extension supports document.modelContext and legacy navigator.modelContext integrations. It does not bypass website permissions or browser audio policies. Cancellation is cooperative and cannot undo completed actions. Websites should provide confirmation flows for consequential operations.  DATA AND PRIVACY  Debugging data, saved cases and settings stay on your device by default. Optional AI requests send conversation context, tool definitions and results to your configured provider, using your API key for authentication. Connection tests also send requests and may incur provider charges. The optional MCP Bridge shares requested data with the local service and connected clients.  English and Chinese interfaces. Light, dark and system themes. 让 AI 真正参与网页里的工作，从看清每一次工具调用开始。 WebMCP 允许网站把读取数据、编辑作品、生成方案等能力注册成结构化工具。AI 可以使用这些工具操作当前页面，网站负责校验和执行，使用者在原来的界面里查看结果、继续编辑或确认修改。 WebMCP DevTools 是为这些页面准备的开发者工具。打开浏览器侧栏，就能检查网站暴露的工具，手动测试参数，连接 AI 执行任务，并追踪实际返回的结果。 你可以用它做什么？ • 检查工具：查看工具名称、描述和输入 Schema，筛选标签页和 frame，观察工具注册、注销及变化。 • 手动验证：根据 Schema 填写参数并执行，查看输出、错误与耗时，设置超时或请求取消。 • AI 联调：配置自己的 Gemini、OpenAI、Claude 或 DeepSeek API Key，让模型使用页面工具完成任务。跨页面导航或动态注册后，后续调用会刷新可用工具定义。 • 回查过程：统一查看手动执行、AI 面板和 MCP Bridge 的执行记录，检查模型实际传入了什么，而不只看它说“完成了什么”。 • 回归测试：保存测试用例、预期 JSON 结果及工具定义，批量重放，检查 Schema 变化。 • 交付与协作：保存工具快照、比较差异，导出 JSON、Markdown、Postman Collection 或 TypeScript。 • 连接外部客户端：可选 MCP Bridge 配合本地服务，将浏览器里的工具提供给支持 MCP 的客户端。 适合谁？ 正在接入 WebMCP 的前端开发者、需要验证网页工具行为的测试人员，以及希望把 AI 接入现有网页工作流的开发团队。 例如，音乐编辑器可以提供读写曲谱和试听工具；数据工作台可以提供筛选、计算和来源行查询；业务页面可以提交候选方案，再由用户在页面确认。DevTools 帮助你检查这些能力是否被正确发现和执行。示例场景需要相应网页配合，并非插件会自动为任意网站生成这些功能。 开始使用 1. 打开支持 WebMCP 的页面，并按浏览器官方文档启用所需实验能力。 2. 打开 WebMCP DevTools 侧栏，检查工具列表并手动执行一次。 3. 如需 AI 联调，在 AI 设置中配置服务商、模型和你自己的 API Key。 4. 在执行记录中检查输入、输出和错误。 体验站：https://2019-02-18.github.io/webmcp-demo/ 源码与问题反馈：https://github.com/2019-02-18/WebMCP-DevTools 使用边界 WebMCP 仍在演进，浏览器和网站需要支持相应能力。本扩展支持 document.modelContext，并兼容旧版 navigator.modelContext。它不会绕过网站权限或浏览器自动播放规则。取消是协作式的，不能撤销已经完成的操作；有实际后果的任务应由网站设计确认流程。 数据与隐私 工具调试数据、测试用例和设置默认保存在本机。使用可选 AI 功能时，对话、工具定义和执行结果会发送到你配置的模型服务商，API Key 用于鉴权；连接测试也会产生请求和可能的费用。使用可选 MCP Bridge 时，请求的数据会提供给本地服务及连接的客户端。请勿在不可信页面或客户端中开放敏感能力。 支持中英文界面和浅色、深色、系统主题。