agent-react-devtools CLI
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
- 251 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- A background daemon listens on port 8097 and receives data from the running app over WebSocket, including component props and state
- The `init` command edits the project's entry point and config: Vite, Next.js, Create React App or Metro
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/agent-react-devtoolsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- A background daemon listens on port 8097 and receives data from the running app over WebSocket, including component props and state
- The `init` command edits the project's entry point and config: Vite, Next.js, Create React App or Metro
This is third-party code. Review the repository files before installing.
What it does
agent-react-devtools connects to a running React or React Native app over the React DevTools protocol and returns data in a compact format built for language models. A background daemon outlives individual CLI calls, so the agent keeps its connection between commands. The `get tree` command gives the component tree with `@c1`, `@c2` labels and optional depth, `get component` shows the props, state and hooks of one component, `find` searches by name, and `errors` lists components with errors and warnings. Profiling starts with `profile start`, stops with `profile stop`, and is then read with `profile slow` (slowest components), `rerenders` (most frequent re-renders) and `timeline`. The result can be exported as React DevTools Profiler JSON, and two runs compared with `profile diff`. The `react-devtools` skill triggers on phrases such as "why does this re-render" and "find slow components".
Who it is for. For React and React Native developers whose agents need to debug a running interface rather than only read source.
Good fit when
- The interface is slow and the agent must find the slowest components and render causes: `profile slow` shows average and max time and what changed
- You need to see which props and hooks reached a specific component such as `TodoItem`, with no code edits or `console.log`
- A form fails with warnings: `errors` lists components with errors and warnings, and the tree marks them with badges
- You want to compare performance before and after a fix: `profile export` and `profile diff` set two runs side by side
- A Vite, Next.js or Create React App project needs a quick hookup: `npx agent-react-devtools init` patches the entry point or config
Not a fit when
- The app is not React: the tool reads the component tree over the React DevTools protocol
- You need debugging of network, console and the page as a whole: the tool shows components and renders, not browser tabs
- You need a stable tool with no surprises: the author calls the project early development and experimental
- You do not want the tool to change your entry point and config: `init` makes edits, and `uninit` reverts them
Example request
The app lags when I type in the search box. Start profiling, find the slowest components and tell me why they re-renderLimitations
The project is in early development, and the author considers it experimental. The `init` command itself patches the entry point or config for Vite, Next.js and Create React App; for React Native and Expo it configures Metro, but only for typical CommonJS setups. ESM, TypeScript, JSON or `package.json` configs and custom `--config` paths need manual setup. `npx agent-react-devtools uninit` reverts the edits.
From React Native 0.87 there is no automatic code-free connection, so the documented setup is required. Host components such as `div` are hidden by default and `--all` brings them back. If no app is attached, `errors` exits with code 1 and the message `No React app is attached`.
How to disable. Run `npx agent-react-devtools uninit` to revert the entry point and config edits. Stop the daemon with `agent-react-devtools stop` and remove the package with `npm uninstall -g agent-react-devtools`.
FAQ
How do I install agent-react-devtools in Claude Code?
Install the CLI with `npm install -g agent-react-devtools` and add the skill with `npx skills add callstackincubator/agent-react-devtools`. Through Claude Code plugins, use `/plugin marketplace add callstackincubator/agent-react-devtools` and `/plugin install agent-react-devtools@piotrski`.
How do I connect my Vite app?
Run `npx agent-react-devtools init` in the project root, or add the `reactDevtools()` plugin from `agent-react-devtools/vite` to `vite.config.ts` before `react()`. The plugin runs in dev mode only, not in production builds.
What does the one-line import do?
Putting `import "agent-react-devtools/connect"` first in the entry point removes the Vite hook stub, initializes `react-devtools-core` and connects over WebSocket. If the daemon is not running, the app is not blocked and carries on after 2 seconds.
Which port does the daemon use?
8097 by default, changeable with `--port`. `agent-react-devtools status` shows whether an app is connected, how many components it has and when the last event happened.
Which agents are supported?
The skill works with Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Goose, OpenCode and Windsurf. For Codex the repository root has an `AGENTS.md` that registers the `react-devtools` skill.
Discussion
No questions or reviews yet.
Related
CLI toolsA CLI that scans React code without a model for state, performance, security and accessibility, gives a 0–100 score and installs a skill for agents
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Console, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension
Vercel skills for agents
Agent Skills
Vercel skills: React and Next.js performance, UI checks by guidelines, React Native, component composition, and deployment
Bitovi's plugin marketplace: specs and feature delivery, Figma and React, Playwright QA, tRPC and Prisma
README in short
The description starts with a note that the project is in early development and a feature list. A quick start follows: starting the daemon, the tree, inspecting a component, search and profiling with sample output. It then covers a command reference, ways to connect Vite, Next.js, Create React App and React Native apps, use with `agent-browser` and assistants, and a sample block for `AGENTS.md` or `CLAUDE.md`.