instructa/browser-echo

해결하는 문제

Browser Echo는 개발자와 AI 코딩 어시스턴트가 console.log와 같은 클라이언트 사이드 브라우저 로그를 서버 터미널이나 MCP 서버에서 직접 볼 수 있도록 해줍니다. 이로 인해 개발 중 코드 에디터와 브라우저 개발자 도구 사이를 자주 전환할 필요가 없어집니다.

작동 방식

클라이언트 사이드 패치를 사용하여 표준 console.* 메서드를 감싸 로그를 캡처합니다. 이 로그는 브라우저에서 개발 서버로 전달된 후 터미널로 스트리밍됩니다. Vite 기반 프레임워크, Next.js, Nuxt, React, Vue 등 다양한 프레임워크용 전용 통합 패키지를 제공하여 로그의 라우팅과 전달을 처리합니다.

대상 사용자

Cursor, Claude Code, GitHub Copilot CLI와 같은 AI 코딩 어시스턴트를 사용하는 웹 개발자로서, AI 에이전트가 런타임 브라우저 에러와 로그를 시각화하여 더 효과적으로 디버깅하고자 하는 분들입니다.

주요 특징

• AI 어시스턴트 통합: MCP(Model Context Protocol)를 지원하여 컨텍스트 창을 오염시키지 않고 로그를 AI 에이전트에 제공합니다.
• 광범위한 프레임워크 지원: Vite 기반 프레임워크, Next.js, Nuxt 등과 호환됩니다.
• 개발자 경험 향상: 색상이 있는 터미널 출력, 소스 힌트(File:Line:Col), 스택 트레이스를 제공합니다.
• 프로덕션 영향 없음: 클라이언트 패치와 HTTP 엔드포인트는 개발 시에만 삽입되며, 프로덕션 번들에는 포함되지 않습니다.