Recently, we released agent-device, a CLI designed to give AI agents physical control over a device. It provided a way for agents to run end-to-end testing by simulating human interactions, which opened up new approaches to automated QA.
But as we tested the limits of these agents, the constraints became clear.
Controlling a device and reading the UI tree is useful, but to run proper QA, an agent needs to see what is happening under the hood. Developers rely on DevTools to build, debug, and understand applications. AI agents shouldn't be expected to debug blindly.
Today, we are announcing Agent React DevTools.
Why we are building DevTools for Agents
When engineers test an app, they look beyond the screen. They inspect state, monitor network requests, check the navigation stack, and profile performance.
Right now, AI agents rely mostly on visual UI trees. While this works for interaction and basic accessibility testing, it falls short for deep debugging. If a button doesn't render because a TanStack Query hasn't resolved, an agent looking at the UI tree only knows that the app is stuck. It doesn't have the context to determine why.
To make AI agents effective at debugging complex React and React Native applications, we need to expose internal state and component architecture directly to them in a lightweight, machine-readable format.
What is Agent React DevTools?
Agent React DevTools is a CLI designed to interface directly with React DevTools.
Instead of just looking at the accessibility or UI tree (like agent-device does), Agent React DevTools gives agents direct access to the React DevTools. Agents can inspect a live snapshot of the React Component Tree, read profiling data, and analyze renders, commits, and performance hotspots.
Instead of manually copying flame charts while chasing unnecessary re-renders or other performance bottlenecks, your agent can work directly with the same React tooling developers already use.
If you are running React or React Native and need direct access to core React state and the component hierarchy, this is the tool to use.
How to get started?
Setting up access for your agents is straightforward.
To start exploring the core component tree with Agent React DevTools, the easiest way is to add it directly to your agent as a skill:
npx skills add callstackincubator/agent-react-devtoolsThis gives your agent the immediate ability to connect to your running React or React Native application and inspect its internals.
If you prefer to run it manually as a standalone CLI or need other integration methods, you can find all the details in the repository.
Looking for third-party plugins?
While the core React tree is crucial, modern React Native apps rely on a broader ecosystem. When an agent needs to debug a TanStack Query, inspect MMKV, or understand the routing stack in React Navigation, the core component tree isn't enough.
This is where Rozenite comes in. Rozenite gives you access to third-party plugins to extend React Native DevTools. With the recent introduction of Rozenite for Agents, you can now expose those same plugins to your AI agents.
If your QA process requires agents to interact with third-party plugins and frameworks today, Rozenite for Agents provides the extended context they need.
What's next?
We are currently working on integrating third-party plugin support from Rozenite directly into Agent DevTools. Soon, plugins installed via Rozenite will become automatically discoverable by your agents through the unified Agent DevTools CLI.
We’ve spent the last decade building tools for React Native developers. As AI-driven QA becomes more prominent, we are building the infrastructure agents need to do that same work effectively.
We encourage you to try the tools, check out the repositories, and let us know how you are using them in your workflows.
Learn more about AI
Here's everything we published recently on this topic.
