Command Palette

Search for a command to run...

UnylyUnyly
Весь каталог

Reactotron

БесплатноНе проверен

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

GitHubEmbed

Описание

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

README

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

from github.com/steve228uk/reactotron-mcp

Установить Reactotron в Claude Desktop, Claude Code, Cursor

Рекомендуется · одна команда, все IDE
unyly install reactotron-mcp

Ставит в Claude Desktop, Claude Code, Cursor и VS Code — сам разбирается с npx, uvx и сборкой из исходников.

Впервые? Поставь CLI: curl -fsSL https://unyly.org/install | sh

Или настроить вручную

Выполни в терминале:

claude mcp add reactotron-mcp -- npx -y reactotron-mcp

FAQ

Reactotron MCP бесплатный?

Да, Reactotron MCP бесплатный — установка в пару кликов через Unyly без оплаты.

Нужен ли API-ключ для Reactotron?

Нет, Reactotron работает без API-ключей и переменных окружения.

Reactotron — hosted или self-hosted?

Self-hosted: сервер запускается локально на твоей машине командой из раздела установки.

Как установить Reactotron в Claude Desktop, Claude Code или Cursor?

Открой Reactotron на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.

Похожие MCP

Compare Reactotron with

Не уверен что выбрать?

Найди свой стек за 60 секунд

Автор?

Embed-бейдж для README

Похожее

Все в категории ai