SuperAPI AI 工具集
合作ENAI 行业资讯收藏
全部工具AI智能体feedthrough

feedthrough

Feedthrough 是一个嵌入网页运行时的调试桥，通过 MCP 向 AI 智能体暴露 DOM 状态、控制台日志、网络请求与用户交互能力。它不依赖外部浏览器控制（如 Puppeteer/CDP），而是运行在页面内部，因此可访问框架内部信息，并兼容任意浏览器以及 Cypress/Playwright 运行环境。它允许 AI 智能体以对话方式实时检查并驱动页面。该工具仅限本地使用，需 Node.js ≥ 22 与 pnpm。

访问官网

工具介绍

用途

Feedthrough 是一个嵌入网页应用内部的调试桥，通过 MCP（Model Context Protocol）把页面运行时内部信息暴露给 AI 智能体。它解决的问题是：传统浏览器 MCP 工具都是外部观察者，通过 Puppeteer 或 CDP 从外部控制浏览器，且仅支持 Chrome；而 Feedthrough 运行在页面内部，可以观察和驱动页面，同时不破坏执行环境。

主要能力

Feedthrough 将 DOM 状态、控制台日志、网络请求和用户交互全部作为 MCP 工具暴露。任何兼容 MCP 的 AI 智能体都能以对话方式实时检查和驱动页面。由于运行在页面内部，它能访问框架内部信息，如 React 组件树、Redux store、自定义全局变量。它支持任意浏览器，而不仅是 Chrome；可融入现有开发工作流，无需启动单独受控浏览器；在测试运行期间还能使用 Cypress 自身的浏览器上下文。

它所暴露的工具包括：connection_status() 确认桥接是否连接；get_console_logs() 获取错误和应用输出；get_network_requests() 查看失败请求、错误 URL 或缺失调用；query_dom(selector) 查找元素并检查渲染内容；inspect_element(selector) 深入查看特定元素；click() / fill() 进行交互操作。

使用方式

  1. 启动 MCP 服务器：服务器在 ws://127.0.0.1:8765 监听浏览器连接，并在 stdio 上暴露 MCP 工具。可用 FEEDTHROUGH_PORT=9000 覆盖端口。若端口已被占用，服务器会顺延到下一个空闲端口，而不是拒绝启动。
  2. 将其添加到 MCP 客户端配置。
  3. 将桥接注入页面：支持 Vite + React / Vue / Solid / Preact，也可手动用于任意打包工具。
  4. 打开页面并开始提问。桥接连接后，MCP 服务器输出中会显示 [feedthrough] tab connected。建议保持单个标签页打开以避免歧义；多个标签页可同时连接，命令会路由到最近活跃的标签页。

推荐工作流：connection_status() 先确认桥接已连接；get_console_logs() 查看错误和应用输出；get_network_requests() 查找失败请求；query_dom(selector) 查找元素；inspect_element(selector) 深入特定元素；click() / fill() 交互后重新检查日志和网络。

项目记忆片段可添加到 CLAUDE.md、.cursor/rules/*.md 等文件中。

对于一次性会话，可使用示例系统提示。

适用场景

Feedthrough 适合在本地开发环境中调试 Web 应用，包括查找 UI 不可见但可通过日志、网络请求和 DOM 查询发现的问题。示例 examples/react-app 是一个包含三个故意植入 bug 的小型 React 应用，适合试用诊断工作流：连接 AI 智能体并让其找出问题，三个 bug 都可通过 get_console_logs、get_network_requests 和 query_dom 在一分钟内发现。也支持在 Cypress/Playwright 测试运行中使用。

限制与注意事项

v1 仅限本地使用，由两项防护保证：WebSocket 服务器绑定到 127.0.0.1，无法从网络中的其他机器访问；对每个传入的 WebSocket 连接检查 Origin 头，回环源（localhost、127.0.0.1、::1）始终接受，任何以允许后缀结尾的主机也接受（默认 .test），可用 FEEDTHROUGH_ALLOWED_HOST_SUFFIXES 覆盖后缀列表，其他源被拒绝。

捕获的网络请求包含请求和响应体及头信息，包括 Authorization、Cookie 及其他应用发送的头。这些数据会通过本地 WebSocket 离开页面、流经 MCP 服务器，并到达所连接的 AI 智能体。如果该智能体由云端支持，敏感值会到达提供商。因此应仅在开发机器和开发数据上运行 Feedthrough，不要将 @feedthrough/core 注入生产构建。

实时编辑 set_style / set_attribute / set_text 仅是对运行中 DOM 的预览，不会写入源代码，重新加载/HMR 后会重置。框架拥有的更改可能在下次渲染时被覆盖，工具结果会标记这一点。

运行多个会话时，每个 AI 智能体会话各自启动自己的 Feedthrough MCP 服务器，只有一个能占用 8765 端口。服务器会顺延到下一个空闲端口并告知位置。connection_status() 报告实际绑定的端口。所有构建工具适配器（vite、webpack、nextjs、nuxt、sveltekit、remix）在 Node 配置加载时读取 FEEDTHROUGH_PORT（或 FEEDTHROUGH_URL 作为完整 ws:// URL），并烘焙到注入的桥接中。若自行启动开发服务器，环境变量未设置时页面回退到 8765，可能是另一个会话的服务器。

可按项目固定端口：在 .mcp.json 和 app 配置中分别设置。每个服务器启动时选取一个可读名称（如 quiet-olive-heron）并发送给每个连接的页面，页面在浏览器控制台记录一行，存储在 window.__feedthrough.server 上，并从 get_page_info() 返回。智能体自身的名称来自 connection_status()。

环境要求

需要 Node.js ≥ 22 和 pnpm。包独立版本化，只提升实际更改的包。发布到 npm 由 CI 处理。MIT 许可。

同类工具

查看分类