agnt

Dale superpoderes de navegador a tu agente de programación de IA.

👁 Go Version
👁 MCP
👁 npm
👁 PyPI
👁 License

¿Qué es agnt?

agnt es un nuevo tipo de herramienta diseñada para la era del desarrollo asistido por IA. Actúa como un puente entre tu agente de programación de IA y el navegador, ampliando lo que es posible durante las sesiones de "vibe coding".

Cuando estás en pleno flujo con Claude Code, Cursor u otras herramientas de programación de IA, agnt permite que tu agente:

• Vea lo que tú ves - Capturas de pantalla, inspección del DOM y depuración visual

• Te escuche directamente - Envía mensajes desde el navegador a tu agente

• Esboce ideas juntos - Dibuja wireframes directamente en tu interfaz de usuario

• Depure en tiempo real - Captura errores, tráfico de red y métricas de rendimiento

• Pruebe en cualquier dispositivo - Túnel hacia teléfonos y BrowserStack con instrumentación completa

• Extienda su ventana de pensamiento - Los datos estructurados utilizan menos tokens que tus descripciones

Demo

👁 Sketch Demo

Dibuja wireframes directamente en tu aplicación en ejecución, luego envíalos a tu agente de IA

La visión: Ampliar las capacidades de tu agente

Los asistentes de programación de IA tradicionales están ciegos a lo que sucede en el navegador. Pueden escribir código, pero no pueden:

• Ver el resultado visual de sus cambios

• Saber cuándo ocurren errores de JavaScript

• Entender los problemas de diseño que estás experimentando

• Recibir comentarios sin que tú los escribas

agnt cambia esto. Crea un canal bidireccional entre tu navegador y tu agente de IA:

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 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 │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Inicio rápido

Instalación

npm (recomendado):

npm install -g @standardbeagle/agnt

pip/uv:

pip install agnt
# or
uv pip install agnt

Desde el código fuente:

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

Como servidor MCP (Claude Code, Cursor, etc.)

Añádelo a tu configuración de MCP:

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

O instálalo como un plugin de Claude Code:

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

Como envoltorio PTY (Terminal mejorada)

Envuelve tu herramienta de IA para funciones de superposición:

agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider

Esto añade un menú de superposición de terminal (Ctrl+P) y habilita el puente de mensajes de navegador a terminal.

Modo Canal (Beta — Solo Claude Code)

Beta / Experimental: El modo canal requiere un SDK de MCP bifurcado y una bandera de desarrollo en Claude Code. El comportamiento y el esquema pueden cambiar.

Claude Code v2.1.80+ puede recibir errores del navegador, diagnósticos e interacciones del usuario en tiempo real como eventos push en contexto, sin el envoltorio PTY. Añade channel { enabled true } a .agnt.kdl y ejecútalo con claude --dangerously-load-development-channels server:agnt. Consulta la sección de Modo Canal en CLAUDE.md para ver el esquema completo, el formato de evento y la herramienta channel_reply para enviar mensajes de vuelta a la superposición del navegador.

Características principales

1. Superpoderes del navegador

Inicia un proxy y tu agente obtendrá ojos en el navegador:

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

Ahora tu agente puede:

// 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. El indicador flotante

Cada página con proxy obtiene un pequeño icono de error flotante. Haz clic en él para:

• Enviar mensajes directamente a tu agente de IA

• Tomar capturas de pantalla de áreas específicas

• Seleccionar elementos para registrar sus detalles

• Abrir el modo boceto para wireframing

No más alt-tab para describir lo que ves: solo haz clic y envía.

3. Modo boceto

Presiona el botón de boceto y dibuja directamente en tu interfaz de usuario:

• Rectángulos, círculos, flechas y dibujo a mano alzada

• Elementos de wireframe: botones, entradas, notas adhesivas

• Guarda y envía a tu agente con un solo clic

Perfecto para decir "quiero un botón aquí" o "este diseño está mal" sin escribir una palabra.

4. Captura de errores en tiempo real

Los errores de JavaScript se capturan automáticamente y están disponibles para tu agente:

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

Tu agente ve los errores a medida que ocurren, no cuando recuerdas mencionarlos.

5. Extensión de la ventana de pensamiento

Los datos estructurados consumen menos tokens que las descripciones en lenguaje natural:

• Resúmenes de errores - proxylog {types: ["error"]} vs. "Estoy viendo un TypeError en la línea 42 que dice..."

• Contexto de clic - interactions.getLastClickContext() vs. "Hice clic en el botón azul en el encabezado..."

• Estado del DOM - inspect('#element') vs. "hay un div con algunos spans anidados y..."

• Seguimientos de pila consolidados - Muros de errores de React preprocesados en resúmenes procesables

• Estado de un vistazo - JSON estructurado que tu agente puede analizar eficientemente

En lugar de volcar 100 líneas de errores de React anidados en el contexto, agnt consolida la salida verbosa en datos concisos y procesables.

Herramientas MCP

API del navegador (más de 50 funciones)

El proxy inyecta window.__devtool con diagnósticos potentes:

Inspección de elementos

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

Depuración visual

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

Accesibilidad

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

Interacciones

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

Modo boceto

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

Configuración

Crea .agnt.kdl en la raíz de tu proyecto para iniciar automáticamente scripts, proxies y configurar notificaciones del navegador:

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

Ejecuta /setup-project en Claude Code para generar esta configuración de forma interactiva.

Coincidencias de URL específicas del framework:

Arquitectura

agnt utiliza una arquitectura de demonio para el estado persistente:

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

Decisiones clave de diseño:

• Concurrencia sin bloqueos con sync.Map y atómicos

• Memoria limitada con búferes circulares

• Los procesos y proxies sobreviven a las desconexiones del cliente

• JavaScript de frontend sin dependencias

Documentación

Documentación completa →

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

Casos de uso

• Vibe coding - Mantente en el flujo mientras tu agente ve todo

• Depuración visual - Muestra, no cuentes: esboza lo que está mal

• Pruebas móviles - Túnel de tu servidor de desarrollo para pruebas en dispositivos reales con integración de Cloudflare/ngrok + BrowserStack

• Pruebas de accesibilidad - Auditorías a11y automatizadas durante el desarrollo

• Seguimiento de errores - Detecta errores de frontend antes que los usuarios

• Revisiones de UI - Anota diseños directamente en la aplicación en vivo

• Colaboración remota - Comparte contexto visual con tu agente

Requisitos

• Node.js 18+ o Go 1.24+

• Asistente de IA compatible con MCP

Migración desde devtool-mcp

agnt es el nuevo nombre de devtool-mcp. Usuarios existentes:

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

# pip
pip uninstall devtool-mcp
pip install agnt

Actualiza tu configuración de MCP para usar el comando agnt con argumentos ["mcp"].

Licencia

MIT

Contribución

¡Las contribuciones son bienvenidas! Consulta la documentación para obtener detalles sobre la arquitectura.

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers