Getting Started
Give your AI coding agent real-time visibility into your running web app.
agent-eyes is a lightweight TypeScript library that captures console logs, network requests, DOM snapshots, runtime errors, performance metrics, and screenshots from your running web app — and streams them to your coding agent via MCP.
Architecture
Browser (agent-eyes client) → WebSocket → MCP Server ← stdio → AI AgentThe browser client collects events and streams them over WebSocket to the MCP server. Your agent connects to the MCP server via stdio and queries app state using standard MCP tools.
Quick Start
Install
npm install @everkers/agent-eyesAdd to your app
The simplest setup — just create an instance and start it:
import { AgentEyes } from '@everkers/agent-eyes';
const eyes = new AgentEyes({ mcpBridge: true });
eyes.start();Setting mcpBridge: true connects to the MCP server's WebSocket on ws://localhost:9960.
Connect your agent
Add AgentEyes to your MCP config (e.g. .kiro/settings/mcp.json or mcp.json):
{
"mcpServers": {
"agent-eyes": {
"command": "npx",
"args": ["@everkers/agent-eyes"]
}
}
}That's it. Your agent now has 11 tools to inspect your running app.
agent-eyes auto-detects production environments and becomes a complete no-op — zero overhead, zero network calls, zero DOM access. See Security for details.
Framework-specific setup
For a better DX, use the framework integrations:
- React Provider —
AgentEyesProvidercomponent - Next.js — provider setup for App Router
- Vite Plugin — auto-injects agent-eyes in dev mode