Feedthrough

https://feedthrough.dev
Admin
Feedthrough allows AI agents to debug any web application by injecting a lightweight bridge into...
Tokens:6,878
Snippets:55
Trust Score:2.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install MCP Server Package

Source: https://feedthrough.dev/

Install the Feedthrough MCP server package using npm. This is the initial step to integrate MCP tools into your project.

```bash
$ npm install @feedthrough/mcp
```

--------------------------------

### Setup Feedthrough in Cypress

Source: https://feedthrough.dev/

Call `setupFeedthrough()` in your Cypress support file to enable integration.

```typescript
import { setupFeedthrough } from "@feedthrough/cypress";
setupFeedthrough();
```

--------------------------------

### get_instructions()

Source: https://feedthrough.dev/tools

Returns the Feedthrough usage guide as a Markdown document. This read-only function takes no arguments and is useful for a quick refresher on Feedthrough usage.

```APIDOC
## get_instructions()

### Description
Returns the Feedthrough usage guide as a Markdown document, with sections for the recommended workflow, tool-ordering tips, and selector advice. Read-only and takes no arguments; it doesn't touch the page or require a connected browser. Call it at the start of a debugging session if you're unfamiliar with Feedthrough or want a quick refresher.

### Method
GET

### Endpoint
/mcp/instructions

### Parameters
None

### Response
#### Success Response (200)
- **documentation** (string) - The usage guide in Markdown format.
```

--------------------------------

### AI Agent Debugging Example

Source: https://feedthrough.dev/

An example of an AI agent using Feedthrough commands to diagnose an issue. It retrieves console logs and inspects an element to identify a bug.

```text
> Why is the counter showing the wrong number?

Agent: I'll check the console logs and inspect the element.

  get_console_logs()         → total: 1, 2, 3
  inspect_element("#count")  → textContent: "2, 4, 6"

  State increments by 2 but logs show +1.
  Bug on line 47: setViews(views + 2)
```

--------------------------------

### Configure MCP Client for Feedthrough

Source: https://feedthrough.dev/

Add Feedthrough to your MCP client configuration. This example shows settings for Claude Code.

```json
{
  "mcpServers": {
    "feedthrough": {
      "command": "npx",
      "args": ["@feedthrough/mcp"]
    }
  }
}
```

--------------------------------

### get_page_info()

Source: https://feedthrough.dev/tools

Returns basic page context: current URL, document title, readyState, viewport size, scroll position, and user agent. Read-only and non-destructive: it only reads page state and makes no changes. Useful to orient at the start of a session or to confirm a navigation happened.

```APIDOC
## get_page_info()

### Description
Returns basic page context: current URL, document title, readyState, viewport size, scroll position, and user agent. Read-only and non-destructive: it only reads page state and makes no changes. Useful to orient at the start of a session or to confirm a navigation happened.

### Method
GET

### Endpoint
/get_page_info
```

--------------------------------

### click(selector)

Source: https://feedthrough.dev/tools

Clicks an element by calling its native click() method. It fires a click event and runs the default activation but does not synthesize pointer events or move focus. Errors if the selector matches nothing.

```APIDOC
## click(selector)

### Description
Clicks an element by calling its native click(), firing a click event and running the default activation (follow a link, toggle a checkbox/radio, submit a form). It does not synthesize the preceding pointer/mouse sequence (pointerdown/mousedown/mouseup) or move focus, so use press_key for keyboard-driven activation. If the selector matches nothing the call returns an error; it doesn't scroll the element into view or wait for any resulting navigation, network, or re-render to settle, returning as soon as the click is dispatched. Returns the tag and id of the clicked element. Prefer IDs as selectors when possible (#submit-btn) for stable targeting.

### Method
POST

### Endpoint
/mcp/click

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the element to click, e.g. '#submit-btn' or 'button[type=submit]'. First match in document order wins.

### Request Example
{
  "selector": "#submit-btn"
}

### Response
#### Success Response (200)
- **tag** (string) - The tag name of the clicked element.
- **id** (string) - The ID of the clicked element.

#### Response Example
{
  "tag": "button",
  "id": "submit-btn"
}
```

--------------------------------

### connection_status()

Source: https://feedthrough.dev/tools

Checks whether a browser with the Feedthrough bridge is currently connected. Returns the connected flag and a list of open tabs (id, url, which is the active one). Call this first — every tool except get_instructions requires a connected browser.

```APIDOC
## connection_status()

### Description
Checks whether a browser with the Feedthrough bridge is currently connected. Returns the connected flag and a list of open tabs (id, url, which is the active one). Call this first — every tool except get_instructions requires a connected browser.

### Method
GET

### Endpoint
/connection_status
```

--------------------------------

### get_html(selector)

Source: https://feedthrough.dev/tools

Returns the outerHTML of an element, capped at 50 KB. Use this when the summarised query_dom output isn't enough and you need to see the actual markup and structure of a region. Read-only: it only reads the DOM and makes no changes, and it returns an error if the selector matches nothing.

```APIDOC
## get_html(selector)

### Description
Returns the outerHTML of an element, capped at 50 KB. Use this when the summarised query_dom output isn't enough and you need to see the actual markup and structure of a region. Read-only: it only reads the DOM and makes no changes, and it returns an error if the selector matches nothing.

### Method
GET

### Endpoint
/get_html

### Parameters
#### Query Parameters
- **selector** (string) - Required - CSS selector for the region to dump, e.g. '#app' or '.modal'. First match wins; scope it tightly since outerHTML is capped at 50 KB.
```

--------------------------------

### get_network_requests

Source: https://feedthrough.dev/tools

Returns a log of all fetch and XHR requests made since the bridge connected. Each entry includes the URL, method, status, duration, and request/response headers and bodies (bodies are truncated if over 10 KB). Useful for identifying failed requests, performance issues, or inspecting data transfer.

```APIDOC
## get_network_requests(filter?, since?)

### Description
Returns every fetch and XHR captured since the bridge connected, including URL, method, HTTP status, duration, request and response headers, and request and response bodies. Bodies are capped at 10 KB each (anything longer is truncated with a marker); binary responses (image/video/audio/font/octet-stream/pdf/zip) are summarised as a placeholder. Use this to find failed requests (4xx/5xx), wrong URLs, slow calls, or to inspect what the app actually sent or received. Use filter to narrow by URL/method and since (a ms timestamp) to see only requests that fired after an action. Read-only: it returns a passively captured log and does not issue or modify any requests.

### Inputs
#### filter (optional)
* `filter` string (optional) · Filter by URL substring or HTTP method, e.g. 'api' or 'POST'
#### since (optional)
* `since` number (optional) · Only requests with ts >= this (ms epoch). Scope to 'what fired after I did X'.
```

--------------------------------

### set_style(selector, properties)

Source: https://feedthrough.dev/tools

Sets one or more inline CSS properties on an element to preview a visual change live — shrink a label that doesn't fit, adjust padding, width, etc. This edits the running DOM only: it is NOT written to your source and resets on reload/HMR, so it's a preview the agent shows you, then persists by editing the actual CSS/component source once you're happy. Inline styles override the stylesheet and usually survive re-renders. Undo with reset_overrides.

```APIDOC
## set_style(selector, properties)

### Description
Sets one or more inline CSS properties on an element to preview a visual change live — shrink a label that doesn't fit, adjust padding, width, etc. This edits the running DOM only: it is NOT written to your source and resets on reload/HMR, so it's a preview the agent shows you, then persists by editing the actual CSS/component source once you're happy. Inline styles override the stylesheet and usually survive re-renders. Undo with reset_overrides.

### Method
POST

### Endpoint
/set_style

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the element to restyle, e.g. '#banner' or '.cta'. First match in document order wins.
- **properties** (Record<string,string>) - Required - Map of CSS property (kebab-case) to value string, applied inline, e.g. { 'font-size': '13px', 'white-space': 'nowrap' }. An empty string clears a property.
```

--------------------------------

### press_key(selector, key)

Source: https://feedthrough.dev/tools

Dispatches keydown, keypress, and keyup events on an element. Use named keys or a single character. Note it fires key handlers but does not insert text into inputs. Errors if the selector matches nothing.

```APIDOC
## press_key(selector, key)

### Description
Dispatches keydown/keypress/keyup on an element (Enter to submit a search, Escape to close a modal, Tab to move focus, ArrowUp/ArrowDown in a list). Use named keys (Enter, Escape, Tab, Backspace, Delete, ArrowUp/Down/Left/Right) or a single character. Note it fires key handlers but does not insert text into inputs, so use fill to set a value, then press_key for the submit/shortcut. Errors if the selector matches nothing, and returns without waiting for any resulting navigation or re-render.

### Method
POST

### Endpoint
/mcp/press_key

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the element that receives the key, e.g. '#search-input'. Target a focused or focusable element.
- **key** (string) - Required - A named key (Enter, Escape, Tab, Backspace, Delete, ArrowUp/Down/Left/Right, case-sensitive) or any single character ('a', '/').

### Request Example
{
  "selector": "#search-input",
  "key": "Enter"
}

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
{
  "status": "key_pressed"
}
```

--------------------------------

### Use Feedthrough Playwright Test Adapter

Source: https://feedthrough.dev/

Import test functions from the Feedthrough Playwright adapter instead of the default `@playwright/test`.

```typescript
import { test, expect } from "@feedthrough/playwright";
```

--------------------------------

### Inject Feedthrough Bridge into SvelteKit App

Source: https://feedthrough.dev/

Integrate Feedthrough into your SvelteKit application by including `feedthroughHandle` in your hooks.

```typescript
import { feedthroughHandle } from "@feedthrough/sveltekit";
import { sequence } from "@sveltejs/kit/hooks";
export const handle = sequence(feedthroughHandle);
```

--------------------------------

### get_console_logs

Source: https://feedthrough.dev/tools

Retrieves console output captured since the bridge connected, including logs, warnings, errors, and other console messages. It also captures uncaught exceptions and unhandled promise rejections. Options are available to limit results, filter by level, match content, and specify a time range.

```APIDOC
## get_console_logs(limit?, levels?, match?, since?)

### Description
Returns console output captured since the bridge connected. Covers every console method (log/warn/error/info/debug plus dir, table, assert, trace, count, countReset, time/timeEnd/timeLog, group/groupCollapsed/groupEnd, and clear). Uncaught exceptions and unhandled promise rejections are captured too (level error, method uncaught / unhandledrejection) even though the app never logged them. Each entry has a level; rich methods carry a method field, and trace/assert/uncaught entries include a stack. When the app is noisy, pass levels: ['error'] so real errors aren't buried, use match to narrow by content, and use since (a ms timestamp) to see only what happened after an action. Read-only: it returns a passively captured buffer and neither clears the console nor changes the page.

### Inputs
#### limit (optional)
* `limit` number (optional) · Cap the result to the N most-recent entries, e.g. 50. Omit to return everything captured.
#### levels (optional)
* `levels` ('log'|'warn'|'error'|'info'|'debug')[] (optional) · Restrict to these levels, e.g. ['error'] to skip noisy warn/info/debug, or ['error', 'warn'] for both. Omit for all levels.
#### match (optional)
* `match` string (optional) · Case-insensitive substring filter on the serialized message content
#### since (optional)
* `since` number (optional) · Only entries with ts >= this (ms epoch). Scope to 'what happened after I did X'.
```

--------------------------------

### Inject Feedthrough Bridge into Vite App

Source: https://feedthrough.dev/

Integrate Feedthrough into your Vite project by adding the Vite adapter plugin.

```typescript
import { feedthrough } from "@feedthrough/vite";
defineConfig({ plugins: [feedthrough()] });
```

--------------------------------

### set_text(selector, text)

Source: https://feedthrough.dev/tools

Replaces an element's text content to preview wording or label changes. Live preview only — not saved to source, resets on reload. textContent is almost always framework-controlled, so the result includes a frameworkWarning that React/Vue/etc. will likely overwrite it on the next render; persist real changes in the source. Undo with reset_overrides.

```APIDOC
## set_text(selector, text)

### Description
Replaces an element's text content to preview wording or label changes. Live preview only — not saved to source, resets on reload. textContent is almost always framework-controlled, so the result includes a frameworkWarning that React/Vue/etc. will likely overwrite it on the next render; persist real changes in the source. Undo with reset_overrides.

### Method
POST

### Endpoint
/set_text

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the element to relabel, e.g. '#title' or '.cta-label'. First match in document order wins.
- **text** (string) - Required - Replacement text, inserted as plain text (not parsed as HTML). Replaces all existing child content.
```

--------------------------------

### fill(selector, value)

Source: https://feedthrough.dev/tools

Sets the value of an input, textarea, or select element by focusing it and assigning the value. It dispatches input and change events to register the change with frameworks. Errors if the selector matches nothing.

```APIDOC
## fill(selector, value)

### Description
Sets the value of an input, textarea, or select element. Focuses it, assigns the value through the element's own native value setter, then dispatches bubbling input and change events, so React, Vue, and other frameworks that track controlled inputs register the change. The value is set in one shot rather than typed character by character, so per-keystroke handlers (keydown/keypress/keyup) do not fire; follow with press_key to send Enter or a shortcut. Errors if the selector matches nothing, and returns as soon as the events are dispatched (it doesn't wait for downstream validation or re-renders).

### Method
POST

### Endpoint
/mcp/fill

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the input, textarea, or select to fill, e.g. '#email' or 'input[name=q]'.
- **value** (string) - Required - The full value to set. Replaces the field's current contents (not appended); for a <select>, pass the target option's value.

### Request Example
{
  "selector": "#email",
  "value": "test@example.com"
}

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
{
  "status": "filled"
}
```

--------------------------------

### query_dom

Source: https://feedthrough.dev/tools

Queries the page using a CSS selector and returns a summary of all matching elements, including their tag, id, classes, and truncated text content. This is useful for counting elements, verifying rendered content, or finding appropriate selectors for `inspect_element` or `click`.

```APIDOC
## query_dom(selector)

### Description
Queries the page with a CSS selector and returns a summary of every matching element (tag, id, classes, truncated text content). Good for counting list items, checking what's rendered, or finding the right selector before calling inspect_element or click. Read-only: it only reads the DOM and never changes the page, and it returns an empty list (not an error) when nothing matches, so it's also a safe existence check.

### Inputs
#### selector
* `selector` string · CSS selector matched against the whole document, e.g. '.todo-item', '#search-input', or 'nav a'. Returns every match, so it doubles as a count or existence check.
```

--------------------------------

### inspect_element

Source: https://feedthrough.dev/tools

Returns full details about a single element, including its tag, id, classes, attributes, text content, bounding box, computed styles, visibility, accessibility information, and form state. It can also retrieve specific computed CSS properties if requested.

```APIDOC
## inspect_element(selector, properties?)

### Description
Returns full details about a single element: tag, id, classes, all attributes, text content, bounding rect (top/right/bottom/left/width/height plus page scroll and an inViewport flag), a compact ancestor path (like 'body > main > div#app > button.cta') for structural context, a curated set of computed styles (layout, box model, typography, positioning, flex/grid), an overflow block when content is clipped or overflowing (scroll vs client size plus per-axis x/y flags), a clipped block when an ancestor's overflow cuts the element off (naming the clipping ancestor and which edges), an effective-visibility check (a visible boolean, plus a hiddenReason like 'ancestor div#modal display:none' or 'opacity:0' when it isn't, accounting for ancestors), an occlusion check (a hittable boolean from a center-point hit-test, plus an occludedBy reference to whatever covers it), an a11y block (resolved role, best-effort accessible name, and key states like expanded, checked, selected, disabled, hidden, and tabindex), a pseudo block with ::before/::after content when set (icon fonts, generated text), and live form state where applicable (an input's current value, checked, disabled, readOnly, etc.). Pass properties to additionally read any specific computed CSS properties by name; they come back under a requested object. Read-only: it only reads element state and never changes the page, and it returns an error if the selector matches nothing. Note: addEventListener-registered handlers can't be read from the page; only inline on* handler attributes appear (under attributes).

### Inputs
#### selector
* `selector` string · CSS selector that should resolve to one element, e.g. '#submit-btn' or 'main .card:first-child'. If several match, the first in document order is inspected.
#### properties (optional)
* `properties` string[] (optional) · Extra computed CSS properties to read by name (kebab-case), e.g. ['transform', 'z-index', 'margin-top']. Returned under a 'requested' object.
```

--------------------------------

### Inject Feedthrough Bridge into Remix App

Source: https://feedthrough.dev/

Add the Feedthrough plugin to your Remix configuration.

```typescript
import { feedthrough } from "@feedthrough/remix";
defineConfig({ plugins: [remix(), feedthrough()] });
```

--------------------------------

### Inject Feedthrough Bridge into Next.js App

Source: https://feedthrough.dev/

Use the `withFeedthrough` higher-order function to integrate Feedthrough into your Next.js configuration.

```typescript
import { withFeedthrough } from "@feedthrough/nextjs";
export default withFeedthrough()({ /* your next config */ });
```

--------------------------------

### set_attribute(selector, name, value)

Source: https://feedthrough.dev/tools

Sets or removes an attribute on an element to preview a change (toggle disabled, swap a class, set an aria-* attribute). Pass value=null to remove it. Live preview only — not saved to source, resets on reload. If the attribute is one a framework controls (class, value, checked, disabled, …) the result includes a frameworkWarning that it may be reverted on the next render. Undo with reset_overrides.

```APIDOC
## set_attribute(selector, name, value)

### Description
Sets or removes an attribute on an element to preview a change (toggle disabled, swap a class, set an aria-* attribute). Pass value=null to remove it. Live preview only — not saved to source, resets on reload. If the attribute is one a framework controls (class, value, checked, disabled, …) the result includes a frameworkWarning that it may be reverted on the next render. Undo with reset_overrides.

### Method
POST

### Endpoint
/set_attribute

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the target element, e.g. '#menu' or 'button.cta'. First match in document order wins.
- **name** (string) - Required - Attribute name to set or remove, e.g. 'disabled', 'class', 'aria-expanded', 'hidden', or a 'data-*' attribute.
- **value** (string | null) - Required - New value as a string, or null to remove the attribute. For boolean attributes like 'disabled', any non-null string (even '') sets it.
```

--------------------------------

### Feedthrough Browser Connection Message

Source: https://feedthrough.dev/

This message indicates that the Feedthrough bridge has successfully connected to your application in the browser.

```text
[feedthrough] browser connected
```

--------------------------------

### reset_overrides()

Source: https://feedthrough.dev/tools

Undoes every set_style, set_attribute, and set_text change the bridge has applied since it connected, restoring the original values. Best effort: elements the framework has since re-created may not roll back, and a page reload always fully resets.

```APIDOC
## reset_overrides()

### Description
Undoes every set_style, set_attribute, and set_text change the bridge has applied since it connected, restoring the original values. Best effort: elements the framework has since re-created may not roll back, and a page reload always fully resets.

### Method
POST

### Endpoint
/reset_overrides
```

--------------------------------

### Inject Feedthrough Bridge into Webpack Config

Source: https://feedthrough.dev/

Add the `FeedthroughPlugin` to your webpack configuration.

```javascript
import { FeedthroughPlugin } from "@feedthrough/webpack";
export default { plugins: [new FeedthroughPlugin()] };
```

--------------------------------

### Inject Feedthrough Bridge into Nuxt App

Source: https://feedthrough.dev/

Add the Feedthrough module to your Nuxt configuration to enable the bridge.

```typescript
export default defineNuxtConfig({
  modules: ["@feedthrough/nuxt"],
});
```

--------------------------------

### hover(selector)

Source: https://feedthrough.dev/tools

Hovers over an element by dispatching synthetic mouseover and mouseenter events. This triggers JavaScript hover handlers but does not activate the CSS :hover pseudo-class. Errors if the selector matches nothing.

```APIDOC
## hover(selector)

### Description
Hovers over an element by dispatching synthetic mouseover and mouseenter events, triggering JavaScript hover handlers so tooltips, popovers, and dropdown/submenus mount into the DOM. Three things to know: it doesn't activate the CSS :hover pseudo-class, so content shown purely via :hover in CSS won't appear this way; no mouseout/mouseleave is sent, so the hovered state stays until the app tears it down; and events fire whether or not the element is visible (it isn't scrolled into view), so a successful call doesn't by itself confirm anything rendered. Errors if the selector matches nothing.

### Method
POST

### Endpoint
/mcp/hover

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the element to hover, e.g. '#menu-trigger' or '.tooltip-anchor'. Target the element that owns the hover handler (usually the trigger, not the popup).

### Request Example
{
  "selector": "#menu-trigger"
}

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
{
  "status": "hovered"
}
```
Tokens:
Raw