Browser Echo MCP
browser-echo makes it easy for you to read client-side logs directly in your coding agent during development.
Features
🤖 AI Coding Assistant Support - Perfect for Cursor AI, Claude Code, GitHub Copilot CLI, Gemini CLI, and other code editors that read terminal output
🚀 Framework Support - React, Vue, Nuxt 3/4, Next.js, TanStack Start, Vite-based frameworks, and custom setups
Quick start
1. Install Framework Package
First, set up Browser Echo for your framework:
| Framework | Quick Setup |
|---|---|
| TanStack / Vite | Installation Guide |
| Nuxt 3/4 | Installation Guide |
| Next.js (App Router) | Installation Guide |
| Vue + Vite | Installation Guide |
| React + Vite | Installation Guide |
| Vue (non-Vite) | Installation Guide |
| React (non-Vite) | Installation Guide |
| Core | Installation Guide |
2. Use Browser Echo MCP
⚠️ IMPORTANT: You must complete step 1 (framework setup) first before MCP will work. The MCP server needs your frameworks server to forward browser logs to it.
📖 Set up Browser Echo MCP Server for AI assistant integration
Browser Echo Core (Terminal only)
Stream browser console.* logs to your dev terminal and optional file logging.
browser-echo makes it easy for you (and your AI coding assistant) to read client-side logs directly in the server terminal during development.
💡 Tip: The MCP server isn't required for most use cases. AI assistants are usually smart enough to read CLI output directly, and the terminal solution is often faster and cheaper than MCP integration. The MCP was designed to avoid polluting the context window, but in most cases the terminal output is sufficient.
- Drop‑in client patch that wraps
console.log/info/warn/error/debug - Batched posts (uses
sendBeaconwhen possible) - Source hints
(file:line:col)+ stack traces - Colorized terminal output
- Optional file logging (Vite provider only)
- Works great with AI assistants reading your terminal
- Optional network capture (opt‑in): fetch, XMLHttpRequest, WebSocket
Production
No production impact. Providers enable this across frameworks by injecting a tiny client patch and exposing a dev-only HTTP endpoint.
- Providers apply only in development and inject nothing into your production client bundles.
- If you also want to strip
console.*in prod builds, use your bundler’s strip tools (e.g. Rollup plugin) separately.
FAQ / Troubleshooting
The MCP doesn't show any logs
- Make sure you have installed framework support → See Install Framework Package above
- Ensure your development server is running before starting the MCP server
- Restart the MCP server if logs still don't appear:
- In Cursor: Settings → MCP & Integrations → toggle "browser-echo" off and on
- In Claude Code: Type
/mcp→ Choose "browser-echo" → Enter → Hit2to reconnect
No logs appear (framework setup issues)
- Vite: Ensure plugin is added and either
index.htmlexists or you import the virtual module manually - Nuxt: Confirm the module is in
modules[]and you're in dev mode - Next.js: Make sure
app/api/client-logs/route.tsis exported and<BrowserEchoScript />is rendered in<head>
Getting 404 errors on log endpoints
- Using a custom
baseor proxy? Keep the route same‑origin and not behind auth - Nuxt sometimes proxies dev servers; our module registers a Nitro route directly
Too many/noisy logs
- Limit to
['warn','error']and usestackMode: 'condensed'
Seeing duplicate logs in browser
- Set
preserveConsole: falsein your configuration
I see logs from other running projects (multiple client setup)
If you're running multiple MCP servers in different projects and seeing logs from unrelated projects, ensure each project has its own .browser-echo-mcp.json file in its root directory:
-
Check for ancestor config files: Look for
.browser-echo-mcp.jsonfiles in parent directories (e.g.,~/projects/.browser-echo-mcp.json). If found, delete them or move them to specific project roots. -
Use distinct ports: Start each MCP server with a unique port:
# In project A browser-echo-mcp --port 5179 # In project B browser-echo-mcp --port 5180 -
Verify project isolation: Ensure each MCP server was started from within its own project directory (not from a shared parent).
-
Check process CWD: If using IDE integrations or task runners, make sure each MCP server process has its
CWDset to the individual project root.
If the issue persists after following these steps, please open an issue on GitHub with details about your setup.
License
MIT
Links
- X/Twitter: @kregenrek
- Bluesky: @kevinkern.dev
Courses
- Learn Cursor AI: Ultimate Cursor Course
- Learn to build software with AI: AI Builder Hub