agnt

Give your AI coding agent browser superpowers.

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

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:

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   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):

npm install -g @standardbeagle/agnt

pip/uv:

pip install agnt
# or
uv pip install agnt

From source:

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:

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

Or install as a Claude Code plugin:

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

As PTY Wrapper (Enhanced Terminal)

Wrap your AI tool for overlay features:

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:

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

Now your agent can:

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

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.