Get the in-app menu running in under 2 minutes — then reach the same tools from your desktop or your AI agent.
npm install @buoy-gg/coreDrop FloatingDevTools at the root of your app:
import { FloatingDevTools } from "@buoy-gg/core";
export default function App() {
return (
<>
<YourApp />
<FloatingDevTools />
</>
);
}
import { FloatingDevTools } from "@buoy-gg/core";
export default function App() {
return (
<>
<YourApp />
<FloatingDevTools />
</>
);
}
A floating button appears in the corner of your app. Tap it to open the menu.
Every tool is free — no key needed. A licenseKey prop unlocks Pro: production builds, the MCP server, and unlimited capture.
Install any tool package — it automatically appears in the menu. No wiring, no config.
npm install @buoy-gg/networkThat's it. Open the menu, tap Network, and you're watching every API call in real-time.
If you use Zustand, pass your stores directly via zustandStores:
import { FloatingDevTools } from "@buoy-gg/core";
import { useAuthStore } from "./stores/auth";
import { useCartStore } from "./stores/cart";
const stores = {
authStore: useAuthStore,
cartStore: useCartStore,
};
return (
<FloatingDevTools zustandStores={stores} />
);
import { FloatingDevTools } from "@buoy-gg/core";
import { useAuthStore } from "./stores/auth";
import { useCartStore } from "./stores/cart";
const stores = {
authStore: useAuthStore,
cartStore: useCartStore,
};
return (
<FloatingDevTools zustandStores={stores} />
);
If you use Jotai, call watchAtoms once at module scope with your store and a named map of atoms:
import { getDefaultStore } from "jotai";
import { watchAtoms } from "@buoy-gg/jotai";
import { authAtom } from "./atoms/auth";
import { cartAtom } from "./atoms/cart";
watchAtoms(getDefaultStore(), {
authAtom,
cartAtom,
});
import { getDefaultStore } from "jotai";
import { watchAtoms } from "@buoy-gg/jotai";
import { authAtom } from "./atoms/auth";
import { cartAtom } from "./atoms/cart";
watchAtoms(getDefaultStore(), {
authAtom,
cartAtom,
});
No wrappers, no middleware. Registered atoms automatically appear in the Jotai tool inside your FloatingDevTools menu.
| Package | What you get |
|---|---|
@buoy-gg/network | API request monitor with timing, headers, and errors |
@buoy-gg/storage | Browse and edit AsyncStorage, MMKV & SecureStore live |
@buoy-gg/env | Environment variable inspector with validation |
@buoy-gg/react-query | TanStack Query devtools with offline simulation |
@buoy-gg/route-events | Navigation tracking and route browser |
@buoy-gg/highlight-updates | See WHY components re-render with visual overlays |
@buoy-gg/perf-monitor | Track FPS, CPU & memory live and benchmark variants |
@buoy-gg/js-top | Live Task Manager for the JS thread — what's eating your JS FPS |
@buoy-gg/redux | Redux action monitor with state diffing and time-travel |
@buoy-gg/events | Unified timeline across all tools with LLM-ready export |
@buoy-gg/zustand | Zustand store monitor with state diffing and jump-to-state |
@buoy-gg/jotai | Jotai atom inspector with live values, diffs, and event history |
@buoy-gg/images | Every image load with cache verdicts, oversize audit, and failures |
@buoy-gg/assets | Bundled-asset inventory with sizes, duplicates, and never-loaded detection |
POLICE BOX @buoy-gg/time-machine | Snapshot & restore app state (storage, stores, query cache) as named restore points |
@buoy-gg/image-overlay | Overlay design mockups on your app for pixel-perfect comparison |
Install what you need. Skip what you don't.
Only show devtools to specific users — admins, QA, internal team members, or whoever your business needs:
import { FloatingDevTools } from "@buoy-gg/core";
export default function App() {
const { user } = useAuth();
// Only render for internal users, admins, or QA
const showDevTools =
user?.role === "admin" ||
user?.role === "qa" ||
user?.email?.endsWith("@yourcompany.com");
return (
<>
<YourApp />
{showDevTools && (
<FloatingDevTools
licenseKey="YOUR_LICENSE_KEY"
userRole={user?.role}
/>
)}
</>
);
}
import { FloatingDevTools } from "@buoy-gg/core";
export default function App() {
const { user } = useAuth();
// Only render for internal users, admins, or QA
const showDevTools =
user?.role === "admin" ||
user?.role === "qa" ||
user?.email?.endsWith("@yourcompany.com");
return (
<>
<YourApp />
{showDevTools && (
<FloatingDevTools
licenseKey="YOUR_LICENSE_KEY"
userRole={user?.role}
/>
)}
</>
);
}
Or keep it available for everyone — your QA and support teams will thank you.
The tools you just installed aren't only in the floating menu — reach the same live app two more ways:
npx -y @buoy-gg/mcp@latest init
npx -y @buoy-gg/mcp@latest init
Buoy Desktop is free to use; the MCP server is a Pro feature. Both connect to the same app you just set up — automatically, with no URLs to configure (physical devices included).