BUOY Devtools

Devtools that live in your app. And answer to your agent.

Buoy ships inside your React Native app. Every request, state change, render, and frame — live on the device, on your desktop, and in Claude or Cursor. In dev, staging, and production.

Zero config — install → tools appear in the floating menu
Three surfaces — phone, desktop, and AI agent share one live session
Modular — every tool is its own package; install only what you need

📚 Full Documentation · 🚀 Quick Start Guide

BUOY Demo

One live app. Three ways in.

Every tool runs inside your app. Tap the floating menu, open the desktop dashboard, or point your agent at it — same data, same session.

📱 On your phone — Drop in one component and a floating dev menu appears inside your app — on any device, in any environment. No desktop app, no cable, no config.
🖥️ On your desktop — Buoy Desktop mirrors the on-device tools to a real window on macOS, Windows & Linux — with a live performance HUD and remote control over the device. (Desktop docs)
🤖 Through your agent — The Buoy MCP server connects Claude Code, Cursor, or any MCP editor to the running app. Your agent sees what the app is doing at runtime — and can actually change it.

Quick Start

1. Install

npm install @buoy-gg/core
# or: yarn add / pnpm add / bun add

2. Add to Your App

import { FloatingDevTools } from "@buoy-gg/core";

export default function App() {
  return (
    <>
      {/* Your app */}
      <FloatingDevTools />
    </>
  );
}

That's it — installed tools automatically appear in the floating menu. Free in development builds; add a licenseKey prop to unlock Pro (production builds, Buoy Desktop, and the MCP server):

<FloatingDevTools licenseKey="YOUR_LICENSE_KEY" />

Available Tools

Tool	Package	What It Does
Network	`@buoy-gg/network`	Every request, response, timing, and error — streamed live
Storage	`@buoy-gg/storage`	Browse and edit AsyncStorage, MMKV & SecureStore, with change history
Env	`@buoy-gg/env`	Environment variables, validated with type checking
Query	`@buoy-gg/react-query`	TanStack Query cache inspection, refetch & mutation testing
Routes	`@buoy-gg/route-events`	Navigation events, the live stack, and jump-to-any-screen
Renders	`@buoy-gg/debug-borders`	See re-renders as they happen — counts, causes, culprits
Highlight Updates	`@buoy-gg/highlight-updates`	Visual overlays on every render, with the cause: mount, state, props, or parent
Bench	`@buoy-gg/perf-monitor`	FPS, CPU, memory & jank — record runs and compare them
Events	`@buoy-gg/events`	One timeline across every tool, with LLM-ready export
Console	`@buoy-gg/console`	A Chrome-DevTools console for every log on the device
Redux	`@buoy-gg/redux`	Inspect store state and dispatch actions from any surface
Zustand	`@buoy-gg/zustand`	Store state, diffs, jump-to-state and reset
Jotai	`@buoy-gg/jotai`	Atom values, diffs, and full event history
Impersonate	`@buoy-gg/impersonate`	Switch users, roles, and feature flags without rebuilding
Overlay	`@buoy-gg/image-overlay`	Pin design mockups over the app, pixel-perfect

Install any tool and it auto-appears in the menu:

npm i @buoy-gg/{core,network,storage,env,react-query,route-events,debug-borders,highlight-updates,perf-monitor,events,console,redux,zustand,jotai,impersonate,image-overlay}

Full tool docs + screenshots: buoy.gg docs

🤖 AI / MCP — your agent debugs the live app

npx -y @buoy-gg/mcp@latest init

One command wires the Buoy MCP server into Claude Code, Cursor, and VS Code. Your agent gets real, structured tool calls into the running app — not screenshot-and-guess:

Read the live runtime — get_events streams network requests, state changes, renders, routes, and storage writes as compact, token-friendly summaries
Inspect & change state — read and dispatch Redux, set Zustand and Jotai state, invalidate React Query, edit storage, navigate
Drive the UI — describe_screen + tap_element walk the live React tree and press real handlers; works on physical devices, no pixel coordinates
Benchmark — run_benchmark_batch runs Bench cases on a real device and returns a ranked comparison
See components — screenshot_component returns a tight crop of any component by testID (iOS Simulator)

It also installs the buoy-optimize skill — a guided performance wizard that benchmarks variants on the real device and applies the winner. One real run took a Skia LED display from 28 stuttering lights to over 12,000 with no lag.

📚 AI / MCP docs · Pro feature

🖥️ Buoy Desktop

Every tool, full screen. Buoy Desktop mirrors the on-device tools to a native dashboard for macOS, Windows & Linux — full-screen panels for Network, Storage, Console, and all your state tools, plus a live FPS · CPU · memory HUD, multi-device switching, remote actions, and a component screenshot tool.

➡️ Get Buoy Desktop · 📚 Desktop docs · Pro feature

Why BUOY?

	BUOY	Flipper	Reactotron	RN Debugger
On-device (no desktop app required)	✅	❌	❌	❌
Works in production	✅	❌	❌	❌
AI agent control (MCP)	✅	❌	❌	❌
QA/support can use it	✅	❌	❌	❌
Zero config setup	✅	❌	❌	❌

Safe in Production

You control who sees it. BUOY's tools run inside your app's process — a tiny broker on your machine mirrors them to the desktop app and hands them to your MCP client. Localhost only; nothing leaves your machine.

<>
  {/* Your app */}
  {isInternalUser && <FloatingDevTools />}
</>

Pricing

Free forever in development builds. Pro adds production builds, Buoy Desktop, and the MCP server — 14-day trial, no credit card. And every weekend, Pro unlocks free for everyone.

💳 buoy.gg/pricing

Contributing

Bugs / feature requests: GitHub Issues
PRs welcome

License

See Terms of Service for usage terms.

💙 Credits

Big thanks to galaxies.dev — their content helped me get up to speed with React Native early on, and I strongly recommend it as a resource for anyone making the jump from web to mobile.