MCP开发工具

Requirements

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

Installation

npm (recommended):

npm install -g @standardbeagle/agnt

pip/uv: ```bash pip install agnt

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:

cd my-new-project        # no .agnt.kdl yet
agnt run claude

What happens:

1. Setup phase — Claude launches in setup mode and configures the project: it detects the stack (Go / Node / Python / …), 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). 2. 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

Quick 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

Demo

Draw wireframes directly on your running app, then send them to your AI agent

`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:

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.

Configuration

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

// 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:

Browser API (50+ Functions)

The proxy injects window.__devtool with powerful diagnostics:

Element Inspection

__devtool.inspect('#element')     // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element')   // Visibility check

Visual Debugging

__devtool.highlight('.items')           // Highlight elements
__devtool.mutations.highlightRecent()   // Show recent DOM changes
__devtool.screenshot('name')            // Capture screenshot

Accessibility

__devtool.auditAccessibility()    // Full a11y audit with score
__devtool.getContrast('#text')    // Color contrast check
__devtool.getTabOrder()           // Tab navigation order

Interactions

__devtool.interactions.getLastClick()        // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement()                    // Interactive picker

Sketch Mode

__devtool.sketch.open()    // Enter sketch mode
__devtool.sketch.save()    // Save and send to agent
__devtool.sketch.toJSON()  // Export sketch data