-
Notifications
You must be signed in to change notification settings - Fork 8
docs: update README with full feature docs #3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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] | ||
|
|
||
| # MCP server (stdio transport) | ||
| agent-react-devtools serve-mcp | ||
|
Comment on lines
+58
to
+59
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The README advertises an MCP server and a 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 | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The README lists a suite of
profilesubcommands, but the CLI and IPC types do not define any profile commands (onlyget-tree,get-component,find, andcountare supported inpackages/agent-react-devtools/src/cli.tsandpackages/agent-react-devtools/src/types.ts). Users following the README will get “Unknown command” for anyagent-react-devtools profile ...invocation; either implement these subcommands or update the docs to match the current capabilities.Useful? React with 👍 / 👎.