reactotron-mcp

reactotron-mcp

Acts as a proxy between your app and Reactotron, enabling AI assistants to read logs, inspect state, monitor network requests, and trigger custom commands.

Category
Visit Server

README

reactotron-mcp

Install in VS Code Install in Cursor

An MCP (Model Context Protocol) server for Reactotron, enabling AI assistants to read logs, inspect app state, monitor network requests, and trigger custom commands in your React or React Native app.

How it works

The MCP server runs a WebSocket proxy between your app and the Reactotron desktop app:

App ──► MCP Proxy (port 9091) ──► Reactotron (port 9090)
               │
          captures everything
               │
          MCP tools (Claude/Cursor etc.)

Your app connects to the proxy instead of directly to Reactotron. The proxy forwards all traffic to Reactotron (so the desktop UI works normally) and captures every message for the MCP tools.

The proxy works in standalone mode — if Reactotron is not open, the app connection is kept alive and all messages are still captured. When Reactotron is opened later, the proxy reconnects automatically (with exponential backoff). This means you don't need to have Reactotron running before starting your app.

Requirements

  • Your app pointed at the proxy port (default 9091) instead of Reactotron directly
  • Reactotron desktop app (optional — for the visual UI)

Installation

Claude Code

claude mcp add reactotron-mcp npx reactotron-mcp

Or with Bun:

claude mcp add reactotron-mcp bunx reactotron-mcp

npx (Node)

{
  "mcpServers": {
    "reactotron": {
      "command": "npx",
      "args": ["-y", "reactotron-mcp"]
    }
  }
}

bunx (Bun)

{
  "mcpServers": {
    "reactotron": {
      "command": "bunx",
      "args": ["reactotron-mcp"]
    }
  }
}

Custom port

If Reactotron is running on a non-default port, set REACTOTRON_PORT:

{
  "mcpServers": {
    "reactotron": {
      "command": "npx",
      "args": ["-y", "reactotron-mcp"],
      "env": {
        "REACTOTRON_PORT": "9090"
      }
    }
  }
}

App setup

Point your app's Reactotron config at the proxy port instead of the default:

// Before
Reactotron.configure({ host: 'localhost' }).connect()

// After
Reactotron.configure({ host: 'localhost', port: 9091 }).connect()

Configuration

Environment variable Default Description
REACTOTRON_PROXY_PORT 9091 Port the MCP proxy listens on (apps connect here)
REACTOTRON_PORT 9090 Port the Reactotron desktop app is running on
REACTOTRON_TIMEOUT 5000 Timeout in ms for state queries

Tools

Tool Description
get_logs Read captured log messages. Filter by level (log/debug/warn/error), text search, and limit.
get_state Query the app's state tree. Browse keys at a path or read the value.
get_network View captured API requests and responses. Filter by URL, HTTP method, status code, minimum duration, and limit.
get_timeline Full chronological timeline of all Reactotron messages.
get_state_actions View completed Redux or MobX-State-Tree actions. Filter by action type substring and limit.
get_state_changes View state mutation events. Filter by state path substring and limit.
get_benchmarks View performance benchmark reports with per-step timings. Filter by title and limit.
get_displays Read custom display messages sent via reactotron.display(). Filter by name/preview text and limit.
get_errors Consolidated view of error-level logs and failed network requests (4xx/5xx) in one call.
get_images Retrieve images logged via reactotron.image(), rendered inline as native MCP image content.
get_app_info Show connected app metadata from the Reactotron handshake: name, version, platform, React/RN versions.
get_connection_status Check whether an app is connected, including app name, platform, and proxy port.
run_custom_command List or trigger custom commands registered by the app.
dispatch_action Dispatch a Redux or MobX-State-Tree action to the app.
clear_messages Clear captured messages from the in-memory buffer. Clears all buffers or a specific message type.
list_custom_commands List all custom commands currently registered by the connected app.

Resources

Resources expose the same data as tools but as readable URIs, useful for attaching live context directly to a conversation.

Resource URI Description
Logs reactotron://logs Latest 50 log messages
Network reactotron://network Latest 50 network requests
Timeline reactotron://timeline Latest 100 messages across all types
State reactotron://state{/path*} App state at a given path (e.g. reactotron://state/user/profile)
State Actions reactotron://state-actions Latest 50 Redux/MST actions
State Changes reactotron://state-changes Latest 50 state mutations
Benchmarks reactotron://benchmarks Latest 50 benchmark reports
Display Messages reactotron://displays Latest 50 reactotron.display() messages
Custom Commands reactotron://custom-commands All registered custom commands
Connection reactotron://connection Connection status and app info
Images reactotron://images Metadata list of captured images (use get_images tool to view inline)

Prompts

Prompts are reusable templates that guide the AI through common debugging workflows. Invoke them via your AI assistant's prompt/slash-command interface.

Prompt Description
debug_app Get a comprehensive debug snapshot — checks connection, logs, network, state, and recent actions.
trace_action Trace a specific Redux/MST action through its payload, state changes, logs, and network side effects. Takes an action argument (e.g. AUTH/LOGIN_SUCCESS).
diagnose_network Identify and analyse failed or errored API requests, spot patterns, and check related state.
debug_performance Analyse benchmark reports and slow network requests to identify performance bottlenecks.
debug_errors Triage all errors — error logs, failed requests, important display messages, and error state.

Development

bun install
bun run dev       # run from source
bun run build     # bundle for distribution
bun run typecheck # type-check without building

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured