A developer's desk with a monitor showing an app event timeline, a phone running an app, and a gray-blue cat watching from the corner.

Reactotron: The React Native Debugger That Lets Your AI Watch the App

The Gray Cat
The Gray Cat
 0 views

If you have ever debugged a React Native app by sprinkling console.log everywhere, squinting at a Metro terminal, and then copy-pasting the output into a chat to ask for help, Reactotron is the tool that ends that ritual. It is a free, open-source desktop app (paired with a tiny client library) that gives you a persistent, filterable window into everything your app is doing: state changes, API requests, logs, performance timings, errors, and storage mutations. And as of 2026, it does something genuinely new — it ships a built-in MCP server so your AI assistant can watch and drive the running app directly.

Built and maintained by Infinite Red (the team behind the Ignite boilerplate), Reactotron has been around since 2016. With roughly 15.5k GitHub stars and around 400k weekly downloads of reactotron-react-native, this is not a hype project — it is infrastructure that a large slice of the React Native community already has installed. What makes it worth a fresh look is that this mature tool just grew a very modern capability.

What Reactotron Actually Watches

Reactotron is a debugging companion, not a replacement for breakpoints. Where it shines is giving you a durable, scrollable history of your app's behavior instead of an ephemeral console scroll. Its core capabilities include:

  • State inspection and live editing — view Redux or mobx-state-tree state, dispatch actions, subscribe to specific state paths, and watch values change as you use the app.
  • API monitoring — a full networking timeline of requests and responses, with body previews and copy buttons for nested objects.
  • Rich logging — Reactotron.log() and display() for structured, custom log entries that read far better than raw console output.
  • Performance benchmarking — quick timers to measure how long an operation takes.
  • Global error tracking — source-mapped stack traces, including saga traces.
  • React Native niceties — overlay a design mockup on top of the running app to check pixel alignment, track AsyncStorage and MMKV mutations, and integrate with Storybook.

Crucially, Reactotron is a development-only tool. The client wraps in an if (__DEV__) guard so nothing ships to production and there is zero runtime overhead in release builds.

Getting It Running

Reactotron has two halves: the desktop app (macOS, Linux, Windows) where you view everything, and a client library you add as a dev dependency. Grab the client with your package manager of choice.

npm install --save-dev reactotron-react-native

yarn add --dev reactotron-react-native

Then download the desktop app from Infinite Red's releases page. The client connects to the desktop app over a WebSocket, so both need to be running while you develop.

Wiring Up the Client

The setup is deliberately tiny. Create a config file, configure the client, opt into the React Native plugin bundle, and connect.

// ReactotronConfig.ts
import Reactotron from "reactotron-react-native";

Reactotron
  .configure()        // host and port are optional
  .useReactNative()   // adds AsyncStorage, networking, and other RN plugins
  .connect();

export default Reactotron;

Then import it once near the top of your entry file, guarded so it never runs in production:

// index.ts
if (__DEV__) {
  require("./ReactotronConfig");
}

That is the entire integration. From here, your network calls, AsyncStorage writes, and logs start flowing into the desktop timeline automatically.

Logging That Reads Like a Report

Plain logs are fine, but Reactotron's display() lets you push structured entries that stand out in the timeline with a name, a preview, and a collapsible payload. This is far easier to scan than a wall of stringified objects.

import Reactotron from "./ReactotronConfig";

Reactotron.display({
  name: "CHECKOUT",
  preview: "Order submitted",
  value: {
    orderId: "ord_9981",
    total: 4299,
    items: 3,
  },
  important: true,
});

You can also use Reactotron.log() and Reactotron.warn() for quick messages, or wire console.log through Reactotron entirely so your existing logs land in the timeline without changes.

Custom Commands: Buttons That Drive Your App

One of Reactotron's underrated features is custom commands: you register a handler in your app, and a button appears in the desktop app that triggers it. This is perfect for seeding test data, resetting state, or jumping to a screen without tapping through the UI.

import Reactotron from "./ReactotronConfig";

Reactotron.onCustomCommand({
  command: "resetOnboarding",
  title: "Reset Onboarding",
  description: "Clears onboarding flags and returns to step one",
  handler: () => {
    store.dispatch({ type: "onboarding/reset" });
  },
});

Now a teammate (or QA) can reproduce a flow in one click instead of reinstalling the app. Combined with state subscriptions and live action dispatch, Reactotron starts to feel less like a passive viewer and more like a remote control for your dev build.

The Headline: Your AI Assistant Can Now See the App

Here is the feature that makes 2026 the year to revisit Reactotron. The desktop app now includes a built-in MCP (Model Context Protocol) server, introduced in reactotron-app 3.9.0. MCP is the open standard that lets AI tools like Claude Code and Cursor connect to external data sources. By exposing one, Reactotron lets your AI assistant read the same live timeline, state, and network log you are looking at — and even send commands back into the app.

Think about how AI debugging usually goes: you describe a bug in prose, manually copy a log here, paste a state snapshot there, and hope you included the relevant detail. With the MCP server, the assistant just reads the running app directly. It can pull the latest Redux snapshot, filter the timeline for api.response events, inspect what AsyncStorage just wrote, and correlate all of it without you playing courier.

Enabling it takes two steps. First, in Reactotron, click the MCP button in the footer bar — it is off by default, and a green dot confirms it is active. Then register the server with your AI tool. For Claude Code:

claude mcp add --transport http reactotron http://localhost:4567/mcp

The server runs on port 4567 (configurable), is bound to localhost only so it is never network-accessible, and keeps a rolling buffer of the most recent 500 events. If you have multiple apps connected, the assistant simply asks which one to debug; with one app, it auto-detects.

What the AI Can Read and Do

The MCP server exposes both observation and interaction. On the read side, the assistant can fetch the timeline (summarized, newest-first, or filtered by type), the latest cached Redux or MST state snapshot, the network log with truncated body previews, the list of connected apps, benchmarks, watched state subscriptions, and AsyncStorage mutations.

On the write side it can actually act on the running app: dispatch Redux actions, explore and replace state at any path, request fresh snapshots, trigger your custom commands, subscribe to specific state changes, clear the event buffer, and even overlay a design mockup on the device with show_overlay. That last one means you can ask your assistant to drop a Figma export onto the running screen to check alignment — a small but delightful example of closing the loop between editor and device.

Pointing an LLM at Live Data, Responsibly

Sending real app data to an AI model deserves caution, and Reactotron treats it seriously. Redaction is on by default, scrubbing matches before any MCP response leaves the server and replacing them with [REDACTED]. It catches sensitive key names like password, secret, api_key, token, and jwt, plus token-shaped values such as Bearer tokens, JWTs (eyJ...), OpenAI keys (sk-...), GitHub PATs, and AWS access IDs. Sensitive URL query params and form bodies get the same treatment.

You can tune the rules from both ends. In the desktop settings (the gear icon next to the MCP button) you can add or remove sensitive keys and state-path patterns. From the app side, you configure it inline:

Reactotron.configure({
  mcpRedaction: {
    additionalRules: ["sessionId", "deviceFingerprint"],
    removeRules: [],
    disableRedaction: false,
  },
});

Relaxing redaction uses a deliberate two-key model: the client must request it and the server must grant it, so a single careless setting cannot silently expose everything. Two honest caveats are worth internalizing. First, redaction is defense-in-depth, not a guarantee — homegrown token formats or unusual field names can slip through. Second, the desktop UI deliberately shows data unredacted; the scrubbing only applies to MCP responses. Infinite Red's own advice is the right rule of thumb: audit your app's payloads before pointing an LLM at the MCP server.

Where It Fits

Reactotron does not replace the official React Native DevTools (the Hermes-plus-Chrome-DevTools experience that became the default in RN 0.76) — plenty of teams run both. DevTools gives you breakpoints and a general console; Reactotron gives you a persistent, state-management-aware timeline, custom commands, image overlays, and now first-party MCP. Compared to Flipper, which Meta has de-emphasized, Reactotron is lighter and more focused. And against narrower tools like Redux DevTools, it covers far more ground than just action time-travel.

The pitch in one line: Reactotron is mature, MIT-licensed, dev-only infrastructure that just became one of the first established RN debuggers to let your AI assistant observe and drive the live app — with sensible guardrails baked in. If you build with React Native and you work alongside an AI assistant, this is an afternoon's setup that pays off every debugging session afterward.