Browser Echo streamlines client-side browser log streaming to development terminals, enhancing AI coding assistant workflows. It targets developers using frameworks like React, Vue, Nuxt, Next.js, and Vite, alongside AI tools such as Cursor AI and GitHub Copilot CLI, offering zero-setup terminal logging and improved debugging.

How It Works

A lightweight client-side patch wraps console methods, batching messages and using sendBeacon where possible. It includes source hints (file, line, column) and stack traces for detailed context, with colorized terminal output. An optional MCP server forwards logs for AI assistant integration. Framework-specific providers ensure patches are dev-only, avoiding production impact.

Quick Start & Requirements

Installation requires first setting up a framework-specific package, then using the Browser Echo MCP server. A running development server is mandatory. Guides are available for TanStack/Vite, Nuxt 3/4, Next.js (App Router), Vue/React (with/without Vite), and a core option.

Highlighted Details

• Seamless integration with AI coding assistants (Cursor AI, Claude Code, GitHub Copilot CLI, Gemini CLI).
• Broad framework support: React, Vue, Nuxt, Next.js, TanStack, Vite.
• Zero production impact; client patches are dev-only.
• Terminal-only logging is often faster and cheaper than MCP integration for AI assistants.

Maintenance & Community

Maintained by Kevin Kern (X/Twitter: @kregenrek, Bluesky: @kevinkern.dev). Related projects include codefetch and instructa. No explicit community channels (Discord/Slack) are listed.

Licensing & Compatibility

Released under the MIT license, permitting broad compatibility and commercial use.

Limitations & Caveats

The MCP server requires framework setup, though it's often non-essential for direct terminal output. Duplicate logs can occur without preserveConsole configuration. Multiple server instances need isolation via config files or distinct ports to prevent cross-project log interference.