Genie React
Inspect your running React app, find a cause, and verify a fix.
Genie gives a coding agent access to the React app that is running now. It can inspect component state, explain renders, read Query and Router state, and record an interaction across those domains.
Pair Genie with a browser or device driver. The driver clicks, types, and checks the screen. Genie reads what happened inside the app. A useful check needs both the expected UI and runtime evidence.
Get your first result
Once the intended session is ready, give your agent a concrete task:
Use Genie to find why Checkout renders when I type in search. Fix it, then repeat the interaction and verify checkout still works.
The agent workflow explains how to discover tools, target the right session, and collect evidence. CLI output covers JSON, scripting, and differences between current source and published packages.
Choose a task
| What you need to know | Follow this guide |
|---|---|
| Why did this component render? | Render optimization |
| Is the delay in a request or React rendering? | Interaction timeline |
| Did fresh Query data reach the UI? | Query updates |
| Do loading and error screens work? | Loading and errors |
| Did the fix help across repeated runs? | Performance comparison |
| Can the agent use our fixtures or login helpers? | App tools |
Genie labels incomplete coverage and uncertain causes. Read those labels before treating an empty result as a clean bill of health or a smaller timing as proof of an improvement.
Use the tool reference for individual calls and the case studies for recorded examples with their limits.