browser-echo

Name: browser-echo
Author: instructa

by instructa

Pending

⚡ Stream browser logs to terminal, zero setup, perfect for Ai Agents

319stars

14forks

TypeScript

Added 12/27/2025

View on GitHub Download ZIP

AI Agentsaibrowserclaude-codecodex-clicursor

Installation

# Add to your Claude Code skills
git clone https://github.com/instructa/browser-echo

Getting Started

Guides for using ai agents skills like browser-echo.

Caveman: Cut Claude Token Use by 65%
How agent-side prompt compression works, when to use it, and when not to.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills

README.md

Agentic AI for Beginners

Build your first AI agent from scratch - tool use, ReAct pattern, memory, deployment

41 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

ECC

by affaan-m

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

194,955

ValeDesk clanker

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 sendBeacon when 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

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 → Hit 2 to reconnect

Vite: Ensure plugin is added and either index.html exists 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.ts is exported and <BrowserEchoScript /> is rendered in <head>

Using a custom base or proxy? Keep the route same‑origin and not behind auth
Nuxt sometimes proxies dev servers; our module registers a Nitro route directly

Limit to ['warn','error'] and use stackMode: 'condensed'

Set preserveConsole: false in your configuration

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.json files 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 CWD set 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

Courses

Learn Cursor AI: Ultimate Cursor Course
Learn to build software with AI: AI Builder Hub

See my other projects:

codefetch - Turn code into Markdown for LLMs with one simple terminal command
instructa - Instructa Projects