Buoy-gg/buoy

What it solves

Buoy는 React Native 또는 Flutter 애플리케이션 내부에 직접 위치하는 포괄적인 개발자 도구 모음을 제공합니다. 외부 디버거, 케이블 또는 Flipper와 같은 오래된 도구의 필요성을 제거하여, 개발자가 물리적 기기, 시뮬레이터, 그리고 심지어 프로덕션 빌드에서도 네트워크 요청, 상태(state), 성능을 검사할 수 있게 해줍니다.

How it works

Buoy는 단일 컴포넌트(<FloatingDevTools />)를 통해 앱에 통합되어 기기 위에 플로팅 메뉴를 생성합니다. localhost broker를 사용하여 앱의 내부 상태와 도구를 데스크톱 애플리케이션 및 MCP (Model Context Protocol) 서버로 미러링합니다. 이를 통해 AI 에이전트(Claude 또는 Cursor와 같은)가 스크린샷이나 픽셀 좌표에 의존하지 않고 실시간 상태를 읽고, UI 핸들러를 트리거하고, 벤치마크를 실행함으로써 실행 중인 앱과 상호작용할 수 있게 합니다.

Who it’s for

다양한 환경(dev, staging, production)에서 앱의 런타임 동작에 대한 깊은 가시성을 확보해야 하는 React Native 또는 Flutter 사용자 모바일 개발자, 그리고 AI 에이전트가 모바일 애플리케이션의 디버깅 및 최적화를 도울 수 있도록 하고자 하는 개발자들을 위한 도구입니다.

Highlights

• AI Agent Integration: MCP를 사용하여 에이전트가 실시간 앱 상태를 읽고, 실제 JS UI 핸들러를 탭하고, 물리적 기기에서 성능 벤치마크를 실행할 수 있게 합니다.
• On-Device Debugging: 케이블이나 데스크톱 앱 없이 작동하는 플로팅 메뉴로, QA 및 지원 팀에서도 쉽게 사용할 수 있습니다.
• Extensive Toolset: 네트워크 트래픽, 스토리지(AsyncStorage, MMKV), 상태 관리(Redux, Zustand, Jotai), 라우팅, 그리고 성능(FPS, CPU, memory)을 모니터링하기 위한 19가지 도구를 포함합니다.
• Production Ready: 내부 사용자를 위해 조건부로 렌더링하거나, 기기에서 UI를 표시하지 않고 데스크톱/MCP로 데이터를 동기화하기 위해 headless mode로 실행할 수 있습니다.
• Cross-Platform: React Native와 Flutter를 지원합니다.