gitwtfhub

wtf is genie-react?

genie-sa/genie-react — explained in plain English

Analysis updated 2026-05-18

33TypeScriptAudience · developerComplexity · 3/5Setup · easy

TL;DR

A CLI tool that lets an AI coding agent inspect a live React and TanStack app: renders, effects, query state, and routing, straight from the terminal.

Mindmap

mindmap
  root((genie-react))
    What it does
      Live app inspection
      Render explanations
      Query and router state
    Tech stack
      TypeScript
      React
      TanStack
      CLI
    Use cases
      Debug re-renders
      Prove a performance fix
      Inspect query state
    Audience
      Developers
      AI coding agents

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Let an AI coding agent explain why a specific component re-rendered.

REASON 2

Profile a slow user flow before and after a code change to prove a performance fix.

REASON 3

Inspect live TanStack Query and Router state without adding manual logging.

REASON 4

Give an agent safe, read-only access to a running dev app for debugging.

What's in the stack?

TypeScriptReactTanStackNode.jsCLI

How it stacks up

genie-sa/genie-reactdavidichalfyorov-wq/openxivkentjuno/kjaudiobook-v1
Stars333333
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardhard
Complexity3/55/54/5
Audiencedeveloperresearcherdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Requires pnpm/npm and an existing Vite, TanStack Start, or Next.js dev app to attach to.

Wtf does this do

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.

Yoink these prompts

Prompt 1
Set up genie-react in my Vite app and connect an agent to inspect live renders.
Prompt 2
Use the genie-react CLI to find out why the Checkout component keeps re-rendering.
Prompt 3
Profile this user flow with genie-react before and after my optimization and compare the results.
Prompt 4
Explain how to target a specific browser tab with genie-react when I have multiple dev instances running.

Frequently asked questions

wtf is genie-react?

A CLI tool that lets an AI coding agent inspect a live React and TanStack app: renders, effects, query state, and routing, straight from the terminal.

What language is genie-react written in?

Mainly TypeScript. The stack also includes TypeScript, React, TanStack.

How hard is genie-react to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is genie-react for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.