genie-sa/genie-react

Genie React is a developer tool that lets an AI coding agent inspect a React app while it is actually running, instead of only reading the source code. It connects to a live app in the browser and gives the agent a command line interface it can use to ask questions like why a component re-rendered, what a data query currently holds, what the app's route state is, or how slow a particular user flow is. It is meant for development only and the connection stays on localhost, so it is not something that runs in production. A person installs it with a package manager, runs an init command, and starts their development server as usual. From there, an agent driving the terminal can call commands such as asking for the component tree, listing recent renders sorted by how much time they took, checking why a component rendered again, or profiling a slow flow before and after a code change to prove whether a fix actually helped. It also supports inspecting TanStack Query data, the router's current state, and effects that were scheduled during a render, with a table of result labels like exact, inferred, or unknown so the agent knows how much to trust each answer. The tool has specific setup paths for Vite and TanStack Start projects, where a small Genie component is rendered near the root of the app, and for Next.js projects, where init adds a script and an instrumentation file to the app's root layout. It supports naming a specific browser tab so an agent can target one running instance if several are open at once, and every command can output plain JSON or newline-delimited JSON for scripting. This is aimed at developers who are already using AI coding agents like Claude Code and want to give that agent real, live visibility into a running React and TanStack application, rather than having it guess about render behavior or query state from static code alone.