S
SkillNav

DevTool MCP

平台与服务

by standardbeagle

面向开发流程的 MCP server，提供进程管理、代理转发与前端诊断等工具能力。

3GitHub

什么是 DevTool MCP？

面向开发流程的 MCP server，提供进程管理、代理转发与前端诊断等工具能力。

README

agnt

Give your AI coding agent browser superpowers.

Go Version MCP npm PyPI License

What is agnt?

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

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:

code
┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   Your Browser  │ ←──► │      agnt       │ ←──► │   AI Agent      │
│                 │      │                 │      │                 │
│  - See changes  │      │  - Proxy traffic│      │  - Receives     │
│  - Send notes   │      │  - Capture errors│     │    context      │
│  - Draw sketches│      │  - Inject tools │      │  - Acts on      │
│  - Click to log │      │  - Route messages│     │    feedback     │
└─────────────────┘      └─────────────────┘      └─────────────────┘

Quick Start

Installation

npm (recommended):

bash
npm install -g @standardbeagle/agnt

pip/uv:

bash
pip install agnt
# or
uv pip install agnt

From source:

bash
git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-local

As MCP Server (Claude Code, Cursor, etc.)

Add to your MCP configuration:

json
{
  "mcpServers": {
    "agnt": {
      "command": "agnt",
      "args": ["mcp"]
    }
  }
}

Or install as a Claude Code plugin:

bash
/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agnt

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.

Core Features

1. Browser Superpowers

Start a proxy and your agent gains eyes into the browser:

code
proxy {action: "start", id: "app", target_url: "http://localhost:3000"}

Now your agent can:

javascript
// Take screenshots
proxy {action: "exec", id: "app", code: "__devtool.screenshot('current-state')"}

// Inspect any element
proxy {action: "exec", id: "app", code: "__devtool.inspect('#submit-button')"}

// Audit accessibility
proxy {action: "exec", id: "app", code: "__devtool.auditAccessibility()"}

// Check what the user clicked
proxy {action: "exec", id: "app", code: "__devtool.interactions.getLastClickContext()"}

2. The Floating Indicator

Every proxied page gets a small floating bug icon. Click it to:

  • Send messages directly to your AI agent
  • Take screenshots of specific areas
  • Select elements to log their details
  • Open sketch mode for wireframing

No more alt-tabbing to describe what you see - just click and send.

3. Sketch Mode

Press the sketch button and draw directly on your UI:

  • Rectangles, circles, arrows, and freehand drawing
  • Wireframe elements: buttons, inputs, sticky notes
  • Save and send to your agent with one click

Perfect for saying "I want a button here" or "this layout is wrong" without typing a word.

4. Real-Time Error Capture

JavaScript errors are automatically captured and available to your agent:

code
proxylog {proxy_id: "app", types: ["error"]}
→ {message: "TypeError: Cannot read property 'map' of undefined",
   stack: "at ProductList (products.js:42)",
   timestamp: "..."}

Your agent sees errors as they happen, not when you remember to mention them.

5. Extending the Thinking Window

Structured data consumes fewer tokens than natural language descriptions:

  • Error summaries - proxylog {types: ["error"]} vs. "I'm seeing a TypeError on line 42 that says..."
  • Click context - interactions.getLastClickContext() vs. "I clicked the blue button in the header..."
  • DOM state - inspect('#element') vs. "there's a div with some nested spans and..."
  • Consolidated stack traces - Pre-processed React error walls into actionable summaries
  • Status at a glance - Structured JSON your agent can parse efficiently

Instead of dumping 100 lines of nested React errors into the context, agnt consolidates verbose output into concise, actionable data.

MCP Tools

ToolDescription
detectAuto-detect project type and available scripts
runExecute scripts or commands (background/foreground)
procManage processes: status, output, stop, list
proxyReverse proxy: start, stop, exec, status
proxylogQuery logs: http, error, screenshot, sketch, panel_message
currentpageView active page sessions with grouped resources
tunnelTunnel management: cloudflare/ngrok for mobile testing
daemonManage background daemon service

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

Configuration

Create .agnt.kdl in your project root to auto-start scripts, proxies, and configure browser notifications:

kdl
// Scripts to run via daemon process manager
scripts {
    dev {
        run "npm run dev"           // Shell command (recommended)
        autostart true
        url-matchers "(Local|Network):\\s*{url}"
    }

    api {
        command "go"                // Or use command + args
        args "run" "./cmd/server"
        autostart true
        env {
            GIN_MODE "debug"
        }
        cwd "./backend"
    }
}

// Reverse proxies with traffic logging
proxies {
    frontend {
        script "dev"               // Link to script for URL auto-detection
    }

    backend {
        target "http://localhost:8080"
        autostart true
        max-log-size 2000
    }
}

// Browser notifications when AI responds
hooks {
    on-response {
        toast true                 // Show toast notification
        indicator true             // Flash bug indicator
        sound false                // Play notification sound
    }
}

// Toast appearance
toast {
    duration 4000
    position "bottom-right"        // top-right, top-left, bottom-right, bottom-left
    max-visible 3
}

Run /setup-project in Claude Code to interactively generate this configuration.

Framework-specific URL matchers:

Frameworkurl-matchers
Next.js / Vite / React"(Local|Network):\\s*{url}"
Wails"DevServer URL:\\s*{url}"
Astro"Local\\s+{url}"
Jekyll"Server address:\\s*{url}"
Hugo"Web Server.*available at {url}"

Architecture

agnt uses a daemon architecture for persistent state:

code
┌─────────────────────┐       ┌─────────────────────────────────────┐
│  AI Agent           │       │              agnt                   │
│  (Claude Code, etc.)│◄─────►│                                     │
│                     │ MCP   │  ┌────────────────┐                 │
└─────────────────────┘       │  │  MCP Server    │                 │
                              │  └───────┬────────┘                 │
                              │          │ socket                   │
                              │          ▼                          │
┌─────────────────────┐       │  ┌────────────────────────────────┐ │
│  Browser            │◄──────┼──│        Daemon                  │ │
│                     │ proxy │  │  ProcessManager │ ProxyManager │ │
│  __devtool API      │       │  └────────────────────────────────┘ │
│  Floating Indicator │       └─────────────────────────────────────┘
│  Sketch Mode        │
└─────────────────────┘

Key design decisions:

  • Lock-free concurrency with sync.Map and atomics
  • Bounded memory with ring buffers
  • Processes and proxies survive client disconnections
  • Zero-dependency frontend JavaScript

Documentation

Full Documentation →

bash
# Run docs locally
cd docs-site
npm install && npm start

Use Cases

  • Vibe coding - Stay in flow while your agent sees everything
  • Visual debugging - Show don't tell - sketch what's wrong
  • Mobile testing - Tunnel your dev server for real device testing with Cloudflare/ngrok + BrowserStack integration
  • Accessibility testing - Automated a11y audits during development
  • Error tracking - Catch frontend errors before users do
  • UI reviews - Annotate designs directly on the live app
  • Remote collaboration - Share visual context with your agent

Requirements

  • Node.js 18+ or Go 1.24+
  • MCP-compatible AI assistant

Migrating from devtool-mcp

agnt is the new name for devtool-mcp. Existing users:

bash
# npm
npm uninstall -g @standardbeagle/devtool-mcp
npm install -g @standardbeagle/agnt

# pip
pip uninstall devtool-mcp
pip install agnt

Update your MCP config to use agnt command with ["mcp"] args.

License

MIT

Contributing

Contributions welcome! See the documentation for architecture details.

常见问题

DevTool MCP 是什么？

面向开发流程的 MCP server，提供进程管理、代理转发与前端诊断等工具能力。

相关 Skills

MCP构建

by anthropics

Universal
热门

聚焦高质量 MCP Server 开发，覆盖协议研究、工具设计、错误处理与传输选型，适合用 FastMCP 或 MCP SDK 对接外部 API、封装服务能力。

✎ 想让 LLM 稳定调用外部 API，就用 MCP构建：从 Python 到 Node 都有成熟指引，帮你更快做出高质量 MCP 服务器。

平台与服务
未扫描114.1k

Slack动图

by anthropics

Universal
热门

面向Slack的动图制作Skill，内置emoji/消息GIF的尺寸、帧率和色彩约束、校验与优化流程，适合把创意或上传图片快速做成可直接发送的Slack动画。

✎ 帮你快速做出适配 Slack 的动图，内置约束规则和校验工具，少踩上传与播放坑，做表情包和演示都更省心。

平台与服务
未扫描114.1k

MCP服务构建器

by alirezarezvani

Universal
热门

从 OpenAPI 一键生成 Python/TypeScript MCP server 脚手架，并校验 tool schema、命名规范与版本兼容性，适合把现有 REST API 快速发布成可生产演进的 MCP 服务。

✎ 帮你快速搭建 MCP 服务与后端 API，脚手架完善、扩展顺手，尤其适合想高效验证服务能力的开发者。

平台与服务
未扫描10.2k

相关 MCP Server

Slack 消息

编辑精选

by Anthropic

热门

Slack 是让 AI 助手直接读写你的 Slack 频道和消息的 MCP 服务器。

✎ 这个服务器解决了团队协作中需要 AI 实时获取 Slack 信息的痛点，特别适合开发团队让 Claude 帮忙汇总频道讨论或发送通知。不过，它目前只是参考实现，文档有限，不建议在生产环境直接使用——更适合开发者学习 MCP 如何集成第三方服务。

平台与服务
83.4k

io.github.netdata/mcp-server

编辑精选

by netdata

热门

io.github.netdata/mcp-server 是让 AI 助手实时监控服务器指标和日志的 MCP 服务器。

✎ 这个工具解决了运维人员需要手动检查系统状态的痛点，最适合 DevOps 团队让 Claude 自动分析性能数据。不过，它依赖 NetData 的现有部署，如果你没用过这个监控平台，得先花时间配置。

平台与服务
78.4k

Scrapling MCP Server

编辑精选

by d4vinci

热门

Scrapling MCP Server 是专为现代网页设计的智能爬虫工具，支持绕过 Cloudflare 等反爬机制。

✎ 这个工具解决了爬取动态网页和反爬网站时的头疼问题，特别适合需要批量采集电商价格或新闻数据的开发者。不过，它依赖外部浏览器引擎，资源消耗较大，不适合轻量级任务。

平台与服务
35.4k

评论