SkillTip

browser-echo

by instructa✓ Verified

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

322
Stars
13
Forks
TypeScript
Language
8/23/2026
Added
View on GitHubDownload ZIP

⚠️ Third-Party Software Notice

This skill is third-party open-source software developed and hosted independently on GitHub. SkillTip is an informational directory and does not control or maintain the underlying repository. Any security checks displayed are automated and limited in scope. Review the source code before installing.

Read the Terms of Service

AI Agents

Installation

Add to your Claude Code skills directory:

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

Getting Started

Guides for using skills like browser-echo.

Security Report

Verified

Last scanned: —

{
  "status": "PASSED",
  "issues": []
}

README.md

Browser Echo MCP

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:

FrameworkQuick Setup
TanStack / ViteInstallation Guide
Nuxt 3/4Installation Guide
Next.js (App Router)Installation Guide
Vue + ViteInstallation Guide
React + ViteInstallation Guide
Vue (non-Vite)Installation Guide
React (non-Vite)Installation Guide
CoreInstallation 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)

Browser Echo

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

The MCP doesn't show any logs
  1. Make sure you have installed framework support → See Install Framework Package above
  2. Ensure your development server is running before starting the MCP server
  3. 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
No logs appear (framework setup issues)
  • 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>
Getting 404 errors on log endpoints
  • 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
Too many/noisy logs
  • Limit to ['warn','error'] and use stackMode: 'condensed'
Seeing duplicate logs in browser
  • Set preserveConsole: false in 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:

  1. 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.

  2. 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

  3. Verify project isolation: Ensure each MCP server was started from within its own project directory (not from a shared parent).

  4. 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

Links

Courses

See my other projects:

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

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 322 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.

Comments (0)

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

Related Skills

Browse all AI Agents skills →

ECC

by affaan-m

10

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

⭐ 242,219⑂ 36,702JavaScript
AI Agentsai-agentsanthropicclaude-code
View details →
15

An agentic skills framework & software development methodology that works.

⭐ 234,966⑂ 20,863Shell
AI Agentsai-agentsbrainstorming
View details →
13

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

⭐ 185,940⑂ 28,768JavaScript
AI Agentsai-agentsanthropicclaude-code
View details →

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

⭐ 128,868⑂ 8,826Rust
AI Agentsclaude-codeai-tools
View details →

claude-code

by anthropics

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

⭐ 120,031⑂ 19,897Shell
AI Agents
View details →

Developers Also Liked

Based on votes and bookmarks from developers who liked this skill

ECC

by affaan-m

10

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

⭐ 242,219⑂ 36,702JavaScript
AI Agentsai-agentsanthropicclaude-code
View details →
15

An agentic skills framework & software development methodology that works.

⭐ 234,966⑂ 20,863Shell
AI Agentsai-agentsbrainstorming
View details →

n8n

by n8n-io

12

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

⭐ 201,881⑂ 60,308TypeScript
MCP Serversapisai-tools
View details →
13

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

⭐ 185,940⑂ 28,768JavaScript
AI Agentsai-agentsanthropicclaude-code
View details →

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

⭐ 128,868⑂ 8,826Rust
AI Agentsclaude-codeai-tools
View details →