feedthrough/feedthrough

**Debug with AI — from inside your app.**
Feedthrough injects a lightweight debug bridge into any running web page, then exposes everything
— DOM state, console logs, network requests, and user interactions — as MCP tools. Any
MCP-compatible AI agent can inspect and drive the page conversationally, in real time.
---
The name
Many physics and chemistry experiments run inside a sealed vacuum chamber, with all the air
pumped out so nothing contaminates the experiment. The catch: you still need to control
instruments inside the chamber and read their measurements, and the smallest air leak ruins
the run. A feedthrough is the part that solves this — a specially engineered connector that
carries electrical signals through the chamber wall while keeping the vacuum perfectly intact.
You can't reach inside, but the feedthrough lets you observe and control what's happening in
there anyway.
The parallel is exact: Feedthrough extracts runtime debug data from inside a running web app
without disturbing it, and sends control signals back in — clicks, keystrokes, DOM queries —
without breaking the execution environment.
---
Why Feedthrough?
Every other browser MCP tool is an **external observer** — it controls the browser from outside
via Puppeteer or CDP and only works in Chrome. Feedthrough is an **embedded agent**. It runs
*inside* the page, so it sees:
- Framework internals (React component trees, Redux store, custom globals)
- Any browser, not just Chrome
- Your existing dev workflow — no separate controlled browser to launch
- Cypress's own browser context during test runs
---
Packages
| Package | Description |
|---|---|
| @feedthrough/core | In-browser bridge — intercepts console, fetch, XHR; handles commands |
| @feedthrough/mcp | MCP server — bridges any MCP client to the browser via WebSocket |
| @feedthrough/cypress | Cypress adapter — auto-injects the bridge before each test page load |
| @feedthrough/playwright | Playwright adapter — injects the bridge via page.addInitScript() |
| @feedthrough/vite | Vite plugin for apps with a static index.html |
| @feedthrough/webpack | Webpack plugin — adds bridge as a global entry point |
| @feedthrough/nextjs | Next.js adapter — wraps next.config.ts with withFeedthrough() |
| @feedthrough/nuxt | Nuxt 3 module |
| @feedthrough/sveltekit | SvelteKit adapter — injects via the handle hook |
| @feedthrough/remix | Remix adapter — injects via a Vite dev server middleware |
---
Framework support
| Framework | Adapter | Notes |
|---|---|---|
| Vite + React / Vue / Solid / Preact | @feedthrough/vite | Static index.html — plugin uses transformIndexHtml |
| Next.js | @feedthrough/nextjs | Wraps the webpack config; dev only |
| Nuxt 3 | @feedthrough/nuxt | Registers as a Nuxt module; dev only |
| SvelteKit | @feedthrough/sveltekit | handle hook with transformPageChunk; dev only |
| Remix | @feedthrough/remix | Vite dev server middleware; dev only |
| Webpack apps | @feedthrough/webpack | Global entry point; guards against production mode |
| Cypress | @feedthrough/cypress | window:before:load hook |
| Playwright | @feedthrough/playwright | page.addInitScript() |
---
Quick start
1. Start the MCP server
The server listens for browser connections on ws://127.0.0.1:8765 and exposes MCP tools on
stdio. Override the port with FEEDTHROUGH_PORT=9000. If the port is already taken, the server
steps up to the next free one rather than refusing to start — see
Running several sessions at once.
2. Add it to your MCP client config
3. Inject the bridge into your page
**Vite + React / Vue / Solid / Preact:**
**Next.js:**
**Nuxt 3:**
**SvelteKit:**
**Remix:**
**Webpack:**
**Cypress:**
**Playwright:**
**Or manually (any bundler):**
4. Open your page and start asking
Once the bridge connects you'll see [feedthrough] tab connected in the MCP server output.
For the simplest experience, keep a single tab open. Multiple tabs can connect at the same time