instructa/browser-echo

何を解決するか

Browser Echo は、開発者や AI コーディングアシスタントが、console.log のようなクライアントサイドのブラウザログを、サーバーのターミナルや MCP サーバーで直接表示できるようにします。これにより、開発中にコードエディタとブラウザの開発者ツールの間を頻繁に切り替える必要がなくなります。

動作方法

クライアントサイドのパッチを使用して、標準の console.* メソッドをラップし、ログをキャプチャします。これらのログはブラウザから開発サーバーに転送され、ターミナルにストリーミングされます。Vite ベースのフレームワーク、Next.js、Nuxt、React、Vue など、さまざまなフレームワーク用の特定の統合パッケージを提供し、ログのルーティングと転送を処理します。

対象ユーザー

AI コーディングアシスタント（Cursor、Claude Code、GitHub Copilot CLI など）を使用しているウェブ開発者で、AIエージェントが実行時におけるブラウザのエラーとログを可視化できるようにして、より効果的にデバッグを行いたい方。

特徴

• AIアシスタント統合: MCP（Model Context Protocol）をサポートし、コンテキストウィンドウを汚染せずにログを AI エージェントに提供。
• 広範なフレームワーク対応: Vite ベースのフレームワーク、Next.js、Nuxt などに対応。
• 開発者体験: カラーリングされたターミナル出力、ソースヒント（ファイル:行:列）、スタックトレースを提供。
• プロダクションへの影響ゼロ: クライアントパッチと HTTP エンドポイントは開発時のみ挿入され、プロダクションバンドルには含まれません。