MCP server for GUI testing and feedback - gives Claude Code eyes and hands
npm install auto-feedbackAn MCP server that gives Claude Code eyes and hands for GUI development. When Claude builds a web app, Electron app, or Windows desktop application, Feedback launches the app, captures screenshots, interacts with the UI (click buttons, fill forms, navigate), captures errors and logs, and runs multi-step QA workflows with assertions — so Claude can iterate until the GUI actually works.
Claude Code currently has no way to see the visual output of GUI code it writes. This leads to blind iteration cycles where the user must describe what's wrong. Feedback closes the loop: Claude writes code, launches the app, takes a screenshot, verifies the result, and fixes issues — all autonomously.
``bash`
npm install -g auto-feedback
Then install Playwright browsers (required for web/Electron automation):
`bash`
npx playwright install chromium
Add to your Claude Code MCP settings (~/.claude/settings.json or project .claude/settings.json):
`json`
{
"mcpServers": {
"feedback": {
"command": "auto-feedback",
"args": []
}
}
}
Or if installed locally in a project:
`json`
{
"mcpServers": {
"feedback": {
"command": "npx",
"args": ["auto-feedback"]
}
}
}
Restart Claude Code after adding the configuration. You should see Feedback's 23 tools available.
Every interaction starts with creating a session. Sessions track all resources (processes, browsers, screenshots, logs) and clean up everything when ended.
- Web dev servers — Launch npm start, vite, webpack, next dev, etc. Automatically detects when the server is ready via stdout pattern matching and TCP port polling.
- Electron apps — Launch and connect Playwright for full automation.
- Windows .exe files — Launch native desktop apps and track their process.
- Web/Electron — Playwright-based screenshots with full-page or viewport modes.
- Desktop apps — Native window capture by PID.
- Auto-capture — Automatically captures screenshots after page navigation events.
- Optimized — All screenshots resized and compressed to WebP for fast MCP transport.
- Click elements — By CSS selector, text content, role, or test ID. Returns a post-click screenshot.
- Type text — Fill inputs with paste or per-keystroke typing. Auto-waits for element readiness.
- Navigate — Go to URLs, browser back/forward. Updates page tracking automatically.
- Read state — Get element text, visibility, enabled/disabled, attributes, bounding box.
- Wait for elements — Wait for elements to become visible, hidden, attached, or detached.
- Console logs — Browser console output (log, error, warn) per session.
- Runtime errors — Uncaught exceptions and page crashes.
- Network traffic — HTTP requests/responses with status codes and timing.
- Process output — stdout/stderr from dev servers and executables.
Execute multi-step sequences with per-step screenshots and log capture:
`
run_workflow: [
{ action: "navigate", url: "http://localhost:3000" },
{ action: "click", selector: "#login-button" },
{ action: "type", selector: "#email", text: "user@example.com" },
{ action: "type", selector: "#password", text: "password123" },
{ action: "click", selector: "role=button[name='Sign In']" },
{ action: "assert", selector: ".welcome-message", assertType: "text-contains", expected: "Welcome" }
]
Each step captures a screenshot and log deltas. Failed steps stop the workflow with diagnostic context.
13 assertion types for verifying application behavior:
| Assertion | What it checks |
|-----------|---------------|
| exists | Element is in the DOM |not-exists
| | Element is not in the DOM |visible
| | Element is visible |hidden
| | Element is hidden or absent |text-equals
| | Element text matches exactly |text-contains
| | Element text contains substring |has-attribute
| | Element has the named attribute |attribute-equals
| | Attribute matches expected value |enabled
| | Element is enabled |disabled
| | Element is disabled |checked
| | Checkbox/radio is checked |not-checked
| | Checkbox/radio is not checked |value-equals
| | Input value matches expected |
| # | Tool | Purpose |
|---|------|---------|
| 1 | get_version | Server version and capabilities |create_session
| 2 | | Start a new testing session |list_sessions
| 3 | | List active sessions |end_session
| 4 | | End session and clean up resources |check_port
| 5 | | Check if a port is available |launch_web_server
| 6 | | Start a web dev server |launch_electron
| 7 | | Launch an Electron app |launch_windows_exe
| 8 | | Launch a Windows executable |stop_process
| 9 | | Stop all processes in a session |screenshot_web
| 10 | | Screenshot a web page by URL |screenshot_electron
| 11 | | Screenshot an Electron app |screenshot_desktop
| 12 | | Screenshot a desktop app window |get_screenshot
| 13 | | Get latest auto-captured screenshot |click_element
| 14 | | Click an element on the page |type_text
| 15 | | Type into an input field |navigate
| 16 | | Navigate to URL or back/forward |get_element_state
| 17 | | Read element properties |wait_for_element
| 18 | | Wait for element state change |get_console_logs
| 19 | | Get browser console output |get_errors
| 20 | | Get runtime errors and crashes |get_network_logs
| 21 | | Get HTTP request/response logs |get_process_output
| 22 | | Get process stdout/stderr |run_workflow
| 23 | | Execute multi-step QA workflow |
`
create_session
-> launch_web_server (npm run dev on port 3000)
-> screenshot_web (http://localhost:3000)
-> click_element (#submit-button)
-> type_text (#search-input, "hello world")
-> run_workflow (multi-step test with assertions)
-> get_console_logs (check for errors)
-> stop_process (clean up)
-> end_session
- Node.js >= 18.0.0
- Playwright Chromium — installed via npx playwright install chromium`
- Windows — required for desktop app screenshots and .exe launching (web/Electron work on all platforms)
- TypeScript/Node.js with ESM
- MCP SDK for Claude Code integration
- Playwright for web and Electron automation
- Sharp for screenshot optimization (WebP)
- node-screenshots for native desktop capture
MIT