Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 72 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,77 @@
# agent-react-devtools

CLI tool for AI agents to inspect React component trees and profile rendering performance. Connects to running React apps via the React DevTools protocol.
CLI tool and MCP server for AI agents to inspect React component trees and profile rendering performance. Connects to running React apps via the React DevTools protocol.

## Features

- **Component tree** — View the full React component hierarchy with types, keys, and parent/child relationships
- **Component inspection** — Inspect props, state, and hooks of any component
- **Search** — Find components by display name (fuzzy or exact match)
- **Profiling** — Start/stop profiling sessions, get per-component render reports, find slowest components, most re-rendered components, commit timelines, and per-commit breakdowns
- **MCP server** — Expose all functionality as MCP tools for AI agent integration
- **Token-efficient output** — Compact formatting designed for LLM consumption

## Architecture

```
CLI / MCP Server
|
IPC (Unix socket)
|
Daemon (persistent process)
|
WebSocket (port 8097)
|
React App (via react-devtools-core)
```

## CLI Usage

```sh
# Start the daemon
agent-react-devtools start [--port 8097]

# Check connection status
agent-react-devtools status

# View component tree
agent-react-devtools get tree [--depth N]

# Inspect a component (by label or ID)
agent-react-devtools get component @c1

# Search for components
agent-react-devtools find Button [--exact]

# Component count by type
agent-react-devtools count

# Profiling
agent-react-devtools profile start [session-name]
agent-react-devtools profile stop
agent-react-devtools profile report @c1
agent-react-devtools profile slow [--limit N]
agent-react-devtools profile rerenders [--limit N]
agent-react-devtools profile timeline [--limit N]
agent-react-devtools profile commit #3 [--limit N]
Comment on lines +49 to +56
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Remove or implement profiling CLI commands

The README lists a suite of profile subcommands, but the CLI and IPC types do not define any profile commands (only get-tree, get-component, find, and count are supported in packages/agent-react-devtools/src/cli.ts and packages/agent-react-devtools/src/types.ts). Users following the README will get “Unknown command” for any agent-react-devtools profile ... invocation; either implement these subcommands or update the docs to match the current capabilities.

Useful? React with 👍 / 👎.


# MCP server (stdio transport)
agent-react-devtools serve-mcp
Comment on lines +58 to +59
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Remove or implement the MCP server command

The README advertises an MCP server and a serve-mcp CLI command, but the CLI implementation only supports start|stop|status|get|find|count (see packages/agent-react-devtools/src/cli.ts) and there is no MCP server wiring anywhere in the package (no @modelcontextprotocol/sdk usage). As written, running agent-react-devtools serve-mcp will hit the unknown-command path and fail; either implement the MCP server entrypoint or remove the documentation to avoid a broken user flow.

Useful? React with 👍 / 👎.


# Stop the daemon
agent-react-devtools stop
```

## Connecting a React App

Add `react-devtools-core` to your app and initialize before React loads:

```ts
import { initialize, connectToDevTools } from 'react-devtools-core';

initialize();
connectToDevTools({ port: 8097 });
```

## Development

Expand Down