Browser Echo MCP

When integrated with Vite, browser-echo provides the following terminal-based logging capabilities:

• Real-time streaming: Console logs are sent to the terminal as they occur in the browser.
• Colored output: Logs include color-coded indicators for different log levels (e.g., info, warn, error).
• Stack traces: Error logs include full stack traces in the terminal.
• Async support: Works correctly with asynchronous operations.
• Grouped logs: Supports grouped console messages.

When running Browser Echo MCP in a local development environment, be aware of the following default security settings:

• CORS: Headers are permissive (Access-Control-Allow-Origin: *).
• Binding: The server binds to 127.0.0.1 by default to restrict access to the local machine.

Warning: If you expose the server over a network, you must implement additional authentication or a proxy to secure it.

Choosing the right package depends on your build tool and framework:

• Use @browser-echo/vite: If you are using Vue + Vite. This is the recommended approach as it includes dev middleware automatically.
• Use @browser-echo/nuxt: If you are using Nuxt.
• Use @browser-echo/vue: If you are using Vue with a custom bundler (non-Vite) and want manual control over initialization.

While @browser-echo/core provides the client-side logic, you should use a framework-specific provider to handle the integration and server-side routing. Common providers include:

• @browser-echo/vite: For Vite-based projects (React, Vue, TanStack Start).
• @browser-echo/next: For Next.js App Router.
• @browser-echo/nuxt: For Nuxt 3/4.
• @browser-echo/react: For React (non-Vite).
• @browser-echo/vue: For Vue (non-Vite).

Choose the correct package based on your project setup:

• Use @browser-echo/react: For React projects not using Vite (e.g., custom Webpack setups) where you want manual control.
• Use @browser-echo/vite: For React projects using Vite. This is the recommended approach as it includes dev middleware automatically.
• Use @browser-echo/next: For Next.js projects.
• Use @browser-echo/vue: For Vue projects.

The stackMode option determines how much stack trace information is sent to your terminal:

• full: Sends the complete filtered stack trace.
• condensed (default): Sends only the top application frame (reduces noise).
• none: Does not send any stack frames.

To use the React provider in non-Vite environments, mount the BrowserEchoProvider at your application root. It is recommended to wrap it in a check for process.env.NODE_ENV === 'development' to ensure it does not run in production.

Note: This package only handles the client-side log collection. You must also implement a server-side endpoint (e.g., in Express) to receive the POST requests sent by the provider.

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserEchoProvider } from '@browser-echo/react';
import App from './App';

function Root() {
  return (
    <>
      {process.env.NODE_ENV === 'development' && <BrowserEchoProvider />}
      <App />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);

If you prefer not to use the automatic setup command, follow these two steps:

1. Add the early script: Render <BrowserEchoScript /> in your root layout's <head>.
2. Add the route handler: Create a route file at your target path (e.g., app/api/client-logs/route.ts) and export the necessary members from @browser-echo/next/route.

// app/layout.tsx
import BrowserEchoScript from '@browser-echo/next/BrowserEchoScript';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {process.env.NODE_ENV === 'development' && <BrowserEchoScript />}
      </head>
      <body>{children}</body>
    </html>
  );
}

// app/api/client-logs/route.ts
export { POST, runtime, dynamic } from '@browser-echo/next/route';

Once installed and configured, Browser Echo automatically streams browser console logs to your Vite dev server terminal. It supports:

• Real-time streaming of logs
• Colored output with log level indicators (info, warn, error)
• Stack traces for errors
• Grouped console messages
• Support for async operations

If you do not want to use the MCP server, you can use browser-echo Core to stream browser console.* logs directly to your development terminal. This is often faster and more cost-effective for AI assistants that can read CLI output.

Features of Core:

• Wraps console.log, console.info, console.warn, console.error, and console.debug.
• Provides source hints (file:line:col) and stack traces.
• Colorized terminal output.
• Batched posts using sendBeacon where possible.
• Optional network capture for fetch, XMLHttpRequest, and WebSocket (opt-in).
• Optional file logging (available via the Vite provider only).

Install @browser-echo/vue along with its required dependency @browser-echo/core as development dependencies. This package is intended for Vue projects that do not use Vite or Nuxt.

npm install -D @browser-echo/vue @browser-echo/core
# or
pnpm add -D @browser-echo/vue @browser-echo/core

To stream browser console logs to your terminal in a non-Vite Vue project, register the createBrowserEchoVuePlugin in your application entry point. It is highly recommended to wrap the registration in a development-only check to avoid production impact.

Note: This plugin only handles the client-side patching. You must also implement a server-side endpoint to receive and print the logs.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createBrowserEchoVuePlugin } from '@browser-echo/vue';

const app = createApp(App);

// Only in development
if (import.meta.env.DEV) {
  app.use(createBrowserEchoVuePlugin({
    route: '/__client-logs',
    include: ['warn', 'error'],
    stackMode: 'condensed',
  }));
}

app.mount('#app');