Development tooling MCP server with process management, proxy, and frontend diagnostics
The io.github.standardbeagle/devtool-mcp Model Context Protocol (MCP) server is a development tooling server focused on process management, proxying, and frontend diagnostics. Its purpose is to support AI-assisted development workflows with browser-related debugging and instrumentation capabilities, positioned as an MCP-compatible tool.
π οΈ Key Features
Process management
Reverse proxy
Frontend instrumentation and diagnostics
Browser debugging
π Use Cases
Debugging browser behavior in development
Running or coordinating development processes
Using AI agents with tooling for project detection and developer tools workflows
β‘ Developer Benefits
MCP compatibility
Explicit tooling scope: developer-tools, process-management, proxy, and frontend diagnostics
Technologies and ecosystem topics include golang, mcp, and reverse-proxy
β οΈ Limitations
The provided description and excerpt do not list specific MCP tools or command interfaces.
agnt is a new kind of tool designed for the age of AI-assisted development. It acts as a bridge between your AI coding agent and the browser, extending what's possible during vibe coding sessions.
When you're in the flow with Claude Code, Cursor, or other AI coding tools, agnt lets your agent:
See what you see - Screenshots, DOM inspection, and visual debugging
Hear from you directly - Send messages from the browser to your agent
Sketch ideas together - Draw wireframes directly on your UI
Debug in real-time - Capture errors, network traffic, and performance metrics
Test on any device - Tunnel to phones and BrowserStack with full instrumentation
Extend its thinking window - Structured data uses fewer tokens than your descriptions
Demo
Three rounds of blind terminal automation can't fix a button that's half off-screen. One pass with eyes on the live page can β full demo (1:40).
Sketch Demo
Draw wireframes directly on your running app, then send them to your AI agent
The Vision: Extending Your Agent's Capabilities
Traditional AI coding assistants are blind to what's happening in the browser. They can write code, but they can't:
See the visual result of their changes
Know when JavaScript errors occur
Understand layout issues you're experiencing
Receive feedback without you typing it out
agnt changes this. It creates a bidirectional channel between your browser and your AI agent:
One-shot: agnt skills β install the agnt agent skills and register the
MCP server in a single command. It uses Vercel's open skills CLI
to fetch the skills, then wires up MCP:
bash
agnt skills # install for Claude Code + register the MCP server
agnt skills --agent cursor # install the skills for a different agent
Under the hood it runs npx -y skills add standardbeagle-tools/agnt --all -a claude-code, then claude mcp add agnt -s user -- agnt mcp (for other agents
it prints the MCP config to add). Requires Node.js (npx) on PATH.
As PTY Wrapper (Enhanced Terminal)
Wrap your AI tool for overlay features:
bash
agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider
This adds a terminal overlay menu (Ctrl+P) and enables the browser-to-terminal message bridge.
First-Run Setup (auto-configures a new project)
The first time you run agnt run claude in a project that has no .agnt.kdl,
agnt drives a one-time setup run before your coding session:
bash
cd my-new-project # no .agnt.kdl yet
agnt run claude
Most projects never reach the setup phase: agnt first tries a deterministic
auto-config and writes .agnt.kdl itself when the project shape is
unambiguous. Recognised out of the box:
Shape
Marker
Dev script and proxy
Node web app
package.json with a dev/start script
that script, proxy via URL detection
Go (Wails)
wails.json
wails dev
.NET web project
*.csproj with the Web SDK at the root, or under src/* / */
dotnet watch run (per project, port from launchSettings.json)
docker-compose
compose.yaml / docker-compose.yml
docker compose up, one proxy per service that publishes a host port
hugo server (1313), bundle exec jekyll serve (4000), mkdocs serve (8000)
Static site
index.html at the root
stdlib file server (8000)
Detection accumulates: a .NET solution with a compose file gets dotnet
test/build plus the compose topology. Test, lint, and build commands for Go,
Node, Python, Ruby, PHP, Elixir, and .NET are registered as on-demand scripts.
Known ports are written as fallback-port so the proxy exists before the first
request. Edit the generated file freely; changes apply live.
Only when auto-config cannot decide does the setup phase run:
Setup phase β Claude launches in setup mode and configures the project:
it detects the stack, registers your dev-server
script(s) and a reverse proxy, and writes a .agnt.kdl. If the
agnt:setup-project skill isn't installed, Claude tells you the exact
install step (/plugin marketplace add standardbeagle/agnt then
/plugin install agnt).
Relaunch β when setup exits, agnt relaunches Claude into a normal coding
session with autostart enabled, replaying your original arguments. Your dev
servers and proxy come up automatically.
bash
# Pass a task through β it's replayed verbatim into the relaunched session:
agnt run claude -- "add a /healthz endpoint"
If you decline setup (no .agnt.kdl gets written), agnt records a timestamped
marker and won't nudge again until the re-nudge window elapses (default 7 days,
configurable via setup { renudge-ttl-days 7 } in .agnt.kdl). A successful
setup is remembered permanently.
Setup also works for other agents β each gets install instructions tailored to
its own skill/command mechanism (see
docs/agent-support-matrix.md).
agnt init β configure without launching a session
Prefer to set the project up on its own? agnt init runs only the setup phase
(no relaunch) and exits once .agnt.kdl is written:
bash
agnt init # configure with claude
agnt init gemini # configure with a different agent
A successful agnt init records the permanent marker too, so a later
agnt run skips straight to the coding session.
Channel Mode (Beta β Claude Code only)
Beta / Experimental: Channel mode requires a forked MCP SDK and a development flag in Claude Code. Behavior and schema may change.
Claude Code v2.1.80+ can receive real-time browser errors, diagnostics, and user interactions as push events in context -- without the PTY wrapper. Add channel { enabled true } to .agnt.kdl and launch with claude --dangerously-load-development-channels server:agnt. See the Channel Mode section in CLAUDE.md for full schema, event format, and the channel_reply tool for sending messages back to the browser overlay.
Core Features
1. Browser Superpowers
Start a proxy and your agent gains eyes into the browser:
Tunnel management: cloudflare/ngrok for mobile testing
daemon
Manage background daemon service
watch
Stream daemon events via agnt monitor
channel_reply
Send messages to developer's browser overlay (channel mode only)
Browser API (50+ Functions)
The proxy injects window.__devtool with powerful diagnostics:
Element Inspection
javascript
__devtool.inspect('#element') // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element') // Visibility check
Visual Debugging
javascript
__devtool.highlight('.items') // Highlight elements
__devtool.mutations.highlightRecent() // Show recent DOM changes
__devtool.screenshot('name') // Capture screenshot
Accessibility
javascript
__devtool.auditAccessibility() // Full a11y audit with score
__devtool.getContrast('#text') // Color contrast check
__devtool.getTabOrder() // Tab navigation order
Interactions
javascript
__devtool.interactions.getLastClick() // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement() // Interactive picker
Sketch Mode
javascript
__devtool.sketch.open() // Enter sketch mode
__devtool.sketch.save() // Save and send to agent
__devtool.sketch.toJSON() // Export sketch data
Responsive Mode
javascript
__devtool.responsive.open() // Open the interactive width workbench
__devtool.responsive.setWidth(414) // Drive the frame to a width (320β1920)
__devtool.responsive.getState() // Read current width + detected layout shifts