### 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) - 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