browser-echo

Name: browser-echo
Author: instructa

Verified

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

319stars

13forks

TypeScript

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

Security ReportVerified

Last scanned: 5/30/2026

{
  "issues": [],
  "status": "PASSED",
  "scannedAt": "2026-05-30T14:59:15.576Z",
  "npmAuditRan": true,
  "pipAuditRan": true
}

README.md

Frequently Asked Questions

What is browser-echo?

browser-echo is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by instructa. ⚡ Stream browser logs to terminal, zero setup, perfect for Ai Agents. It has 319 GitHub stars.

Is browser-echo safe to use?

Yes. browser-echo passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install browser-echo?

Clone the repository with "git clone https://github.com/instructa/browser-echo" and add it to your Claude Code skills directory (see the Installation section above).

What programming language is browser-echo written in?

browser-echo is primarily written in TypeScript. It is open-source under instructa on GitHub, so you can review or fork the full source.

Are there alternatives to browser-echo?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh browser-echo against similar tools.

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

superpowers

by obra

An agentic skills framework & software development methodology that works.

234,966

mulch harnss

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