### Start Expo Dev Server

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/examples/expo-app/README.md

Navigate to the example app directory and start the Expo development server. This command initiates the app's build and runtime environment.

```sh
cd examples/expo-app
bun start
```

--------------------------------

### Install Dependencies

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/examples/expo-app/README.md

Run this command in the 'examples/expo-app' directory to install project dependencies using Bun.

```sh
cd examples/expo-app
bun install
```

--------------------------------

### React Native Setup

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands for starting the devtools daemon and handling physical device port forwarding.

```sh
agent-react-devtools start
npx react-native start
```

```sh
adb reverse tcp:8097 tcp:8097
```

--------------------------------

### Quick Start Profiling

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Basic commands to start, stop, and view slow components during a profiling session.

```bash
agent-react-devtools profile start
# Trigger the slow interaction (type, click, navigate)
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
```

--------------------------------

### Install and Run agent-react-devtools

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Install the package globally or execute it directly using npx.

```sh
npm install -g agent-react-devtools
```

```sh
npx agent-react-devtools start
```

--------------------------------

### Inspected Component Data Example

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Example output showing props, state, and hooks for a specific component.

```text
@c3 [fn] TodoList
props:
  items: [{"id":1,"text":"Buy milk"},{"id":2,"text":"Walk dog"}]
  onDelete: ƒ
state:
  filter: "all"
hooks:
  useState: "all"
  useMemo: [...]
  useCallback: ƒ
```

--------------------------------

### Install agent-react-devtools Globally

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Install the CLI tool globally using npm for system-wide access.

```bash
npm install -g agent-react-devtools
```

--------------------------------

### Start agent-react-devtools Daemon with Custom Port

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Starts the daemon and specifies a custom port for the WebSocket connection.

```bash
agent-react-devtools start --port 9000
```

--------------------------------

### Start Profiling Session

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Starts a profiling session to capture performance data. An optional name can be provided to label the session.

```bash
# Start profiling (optionally name the session)
agent-react-devtools profile start
```

```bash
agent-react-devtools profile start "typing in search"
```

--------------------------------

### Manual Agent Instructions

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Example content for project-level agent instruction files.

```markdown
## React Debugging

This project uses agent-react-devtools to inspect the running React app.

- `agent-react-devtools start` — start the daemon
- `agent-react-devtools status` — check if the app is connected
- `agent-react-devtools get tree` — see the component hierarchy
- `agent-react-devtools get tree @c5` — see subtree from a specific component
- `agent-react-devtools get component @c1` — inspect a specific component
- `agent-react-devtools find <Name>` — search for components
- `agent-react-devtools errors` — list components with errors or warnings
- `agent-react-devtools profile start` / `profile stop` / `profile slow` — diagnose render performance
```

--------------------------------

### Configure React Native and Expo

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Setup instructions for connecting React Native or Expo applications to the DevTools daemon.

```bash
agent-react-devtools start

# Start React Native
npx react-native start
# or for Expo
npx expo start

# For physical Android devices, forward the port
adb reverse tcp:8097 tcp:8097

# For custom port, set environment variable
REACT_DEVTOOLS_PORT=9000 npx react-native start

# Verify connection
agent-react-devtools status
```

--------------------------------

### Start agent-react-devtools and React Native packager

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

Commands to start the agent-react-devtools server and the React Native development server. These are necessary for connecting the devtools to your React Native app.

```bash
agent-react-devtools start
npx react-native start
# or: npx expo start
```

--------------------------------

### Start the agent-react-devtools daemon

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Starts the background daemon which listens for WebSocket connections from React apps and IPC connections from the CLI. This command is rarely needed explicitly as the daemon auto-starts with other commands.

```bash
agent-react-devtools start [--port N]
```

--------------------------------

### Component Tree Output Example

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Visual representation of the component hierarchy using stable labels.

```text
@c1 [fn] App
├─ @c2 [fn] Header
├─ @c3 [fn] TodoList
│  ├─ @c4 [fn] TodoItem key=1
│  └─ @c5 [fn] TodoItem key=2
└─ @c6 [host] div
```

--------------------------------

### Profile Rendering Performance

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Start and stop performance profiling to identify slow components.

```sh
agent-react-devtools profile start
# ... interact with the app ...
agent-react-devtools profile stop
agent-react-devtools profile slow
```

--------------------------------

### Manage Daemon Status

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Start the background daemon and check its current connection status.

```sh
agent-react-devtools start
agent-react-devtools status
```

--------------------------------

### Install Agent React DevTools via Claude Code

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Commands to add and install the plugin using the Claude Code CLI.

```bash
/plugin marketplace add callstackincubator/agent-react-devtools
/plugin install agent-react-devtools@piotrski
```

--------------------------------

### Run agent-react-devtools with npx

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Execute CLI commands without global installation using npx.

```bash
npx agent-react-devtools start
```

```bash
npx agent-react-devtools status
```

--------------------------------

### Wait and Get Component Tree in Scripts

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Combines waiting for an app connection with fetching the component tree. This is useful for ensuring the app is ready before inspecting its structure.

```bash
agent-react-devtools wait --connected --timeout 10 && agent-react-devtools get tree
```

--------------------------------

### Start a profiling session

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Initiates a profiling session to record performance data. Only one session can be active at a time. An optional name can be provided for identification.

```bash
agent-react-devtools profile start [name]
```

--------------------------------

### Add AI coding assistant skill

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Install the agent-react-devtools skill for supported AI coding assistants.

```bash
npx skills add callstackincubator/agent-react-devtools
```

--------------------------------

### Profiling Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands for starting, stopping, and reporting on profiling sessions to diagnose performance issues.

```APIDOC
## Profiling Commands

### Start Profiling

```sh
agent-react-devtools profile start [name]
```

### Stop Profiling

```sh
agent-react-devtools profile stop
```

### Render Report for Component

```sh
agent-react-devtools profile report <@c1 | id>
```

### Slowest Components by Average Duration

```sh
agent-react-devtools profile slow [--limit N]
```

### Most Re-rendered Components

```sh
agent-react-devtools profile rerenders [--limit N]
```

### Commit Timeline

```sh
agent-react-devtools profile timeline [--limit N]
```

### Single Commit Detail

```sh
agent-react-devtools profile commit <N | #N> [--limit N]
```

### Export Profiling Data

```sh
agent-react-devtools profile export <file>
```

### Compare Profiling Exports

```sh
agent-react-devtools profile diff <before.json> <after.json> [--limit N] [--threshold N]
```
```

--------------------------------

### Start agent-react-devtools Daemon

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/examples/expo-app/README.md

Start the agent-react-devtools daemon in a separate terminal. This process is necessary for the DevTools to connect to your React Native application.

```sh
agent-react-devtools start
```

--------------------------------

### AI Coding Assistant Skill Setup

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands to add the agent-react-devtools skill to your AI coding assistant.

```sh
npx skills add callstackincubator/agent-react-devtools
```

```sh
/plugin marketplace add callstackincubator/agent-react-devtools
/plugin install agent-react-devtools@piotrski
```

--------------------------------

### Profile Specific Interactions

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Commands to start and stop a named profiling session for a specific user interaction.

```bash
agent-react-devtools profile start "typing in search"
```

```bash
agent-react-devtools profile stop
```

--------------------------------

### Get detailed render report for a component

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Provides a detailed render report for a specific component, including its render count, average and total duration, all render causes, and changed keys. Accepts a component label or ID.

```bash
agent-react-devtools profile report <@cN | id>
```

--------------------------------

### Next.js App Router Setup for agent-react-devtools

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

For Next.js App Router, create a client component wrapper to include the devtools connection script, as the layout is a Server Component. Import this wrapper at the top of your `layout.tsx`.

```typescript
// app/devtools.tsx
'use client';
import 'agent-react-devtools/connect';
export default function DevTools() { return null; }
```

```typescript
// app/layout.tsx
import './devtools';  // Add this import at the top

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

```

--------------------------------

### Profiling Sessions

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Manages profiling sessions to capture React render performance data. Allows starting, stopping, and naming profiling sessions.

```APIDOC
## Profiling Commands

### Description
Manages profiling sessions to capture render performance data.

### Methods
- **start** [session_name] - Starts a profiling session. Optionally provide a name.
- **stop** - Stops the current profiling session and displays a summary.

### Example
```bash
agent-react-devtools profile start
agent-react-devtools profile start "typing in search"
agent-react-devtools profile stop
```
```

--------------------------------

### Get Full Component Tree

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Retrieves the complete component hierarchy of the connected React application. Host components are filtered out by default.

```bash
agent-react-devtools get tree
```

--------------------------------

### Get Detailed Component Render Report

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Provides a deep dive into a specific component's render performance, including total renders, duration, causes, and changed keys.

```APIDOC
## GET /api/profile/report/:component_id

### Description
Provides a detailed render performance report for a specific component.

### Method
GET

### Endpoint
/api/profile/report/:component_id

### Parameters
#### Path Parameters
- **component_id** (string) - Required - The label or numeric React fiber ID of the component (e.g., @c5).

### Example
```bash
agent-react-devtools profile report @c5
```
```

--------------------------------

### Browse Commit Timeline with Limit and Offset

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Displays a chronological list of React commits, allowing control over the number of commits shown (limit) and the starting point (offset). Useful for navigating large commit histories.

```bash
# Limit and paginate
agent-react-devtools profile timeline --limit 10
agent-react-devtools profile timeline --limit 10 --offset 20
```

--------------------------------

### Get Component Tree Including Host Components

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Retrieves the React component tree and includes host components (like div, span). Use this to see the full DOM structure as represented by React.

```bash
agent-react-devtools get tree --all
```

--------------------------------

### Get Detailed Component Render Report

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Provides an in-depth report for a specific component's render performance. Includes total renders, average and maximum duration, causes of renders, and details on changed props, state, or hooks.

```bash
# Get detailed render report for a component
agent-react-devtools profile report @c5
```

--------------------------------

### Get details for a specific commit

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Retrieves detailed information for a specific commit by its index. Shows per-component self/total duration, render causes, and changed keys. Supports limiting the output.

```bash
agent-react-devtools profile commit <N | #N> [--limit N]
```

--------------------------------

### Get component hierarchy tree

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Prints the component hierarchy as an indented tree, showing labels, type tags, display names, and keys. Use `--depth N` to limit the tree depth, which is recommended for large applications.

```bash
agent-react-devtools get tree [--depth N]
```

--------------------------------

### Configure Custom DevTools Port

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/examples/expo-app/README.md

To use a custom port for React DevTools, set the 'REACT_DEVTOOLS_PORT' environment variable before starting both the agent-react-devtools daemon and the Expo app.

```sh
export REACT_DEVTOOLS_PORT=YOUR_PORT_NUMBER
```

--------------------------------

### Get Component Tree with Max Lines Limit

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Retrieves the React component tree, capping the total number of output lines. This is helpful for managing large trees or when dealing with performance constraints.

```bash
agent-react-devtools get tree --max-lines 50
```

--------------------------------

### Get Component Tree

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Retrieves the component tree of the React application with options to control depth, include host components, and limit output lines. It also supports viewing a subtree from a specific component.

```APIDOC
## GET /api/tree

### Description
Retrieves the component tree of the React application.

### Method
GET

### Endpoint
/api/tree

### Query Parameters
- **depth** (integer) - Optional - Limits the depth of the component tree.
- **all** (boolean) - Optional - Includes host components (e.g., div, span).
- **max-lines** (integer) - Optional - Sets a hard cap on the number of output lines.

### Example
```bash
agent-react-devtools get tree --depth 3
agent-react-devtools get tree --all
agent-react-devtools get tree --max-lines 50
agent-react-devtools get tree @c5 --depth 2
```
```

--------------------------------

### Project Initialization Command

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Auto-detects the framework in the current directory and sets up the devtools connection. Use the dry-run flag to preview changes.

```bash
agent-react-devtools init [--dry-run]
```

--------------------------------

### Preview agent-react-devtools initialization

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

Use the `--dry-run` flag to see what changes the `init` command would make without actually modifying any files.

```bash
npx agent-react-devtools init --dry-run
```

--------------------------------

### Framework Initialization

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands to auto-configure or revert framework-specific settings.

```sh
npx agent-react-devtools init
```

```sh
npx agent-react-devtools uninit
```

--------------------------------

### CLI Command: init

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Initializes and configures the devtools connection for the current project.

```APIDOC
## init [--dry-run]

### Description
Auto-detect the framework in the current directory and configure the devtools connection. Supports Vite, Next.js, CRA, and Expo/React Native.

### Parameters
#### Options
- **--dry-run** (flag) - Optional - Preview changes without writing files.
```

--------------------------------

### Development Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Standard commands for building and testing the project.

```sh
bun install        # Install dependencies
bun run build      # Build
bun run test       # Run tests
bun run typecheck  # Type check
```

--------------------------------

### Integrate with agent-browser

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Launches the browser in headed mode to ensure the devtools connection script executes correctly.

```bash
agent-browser --session devtools --headed open http://localhost:5173/
agent-react-devtools status  # Should show 1 connected app
```

--------------------------------

### Identify Performance Bottlenecks

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Commands to list the slowest components and those with the highest re-render counts.

```bash
agent-react-devtools profile slow --limit 5
```

```bash
agent-react-devtools profile rerenders --limit 5
```

--------------------------------

### Establish Baseline State

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Commands to verify application connectivity and inspect the component tree structure.

```bash
agent-react-devtools status          # Confirm app is connected
agent-react-devtools count           # How many components are mounted
agent-react-devtools get tree --depth 3  # Understand the structure
```

--------------------------------

### Connecting Your App

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Instructions for integrating agent-react-devtools into your application for debugging and profiling.

```APIDOC
## Connecting Your App

### Quick Setup

Run the init command to auto-configure your framework:

```sh
npx agent-react-devtools init
```

To undo changes:

```sh
npx agent-react-devtools uninit
```

### One-line Import

Add this import to your entry point (e.g., `src/main.tsx`):

```ts
import "agent-react-devtools/connect";
```

### Vite Plugin

For Vite apps, use the plugin in `vite.config.ts`:

```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { reactDevtools } from "agent-react-devtools/vite";

export default defineConfig({
  plugins: [reactDevtools(), react()],
});
```

Options:

```ts
reactDevtools({ port: 8097, host: "localhost" });
```

### React Native

React Native apps connect automatically. Ensure the devtools server is running:

```sh
agent-react-devtools start
npx react-native start
```

For physical devices, forward the port:

```sh
adb reverse tcp:8097 tcp:8097
```

For Expo, connection is automatic with the Expo dev client.

To use a custom port, set the `REACT_DEVTOOLS_PORT` environment variable.
```

--------------------------------

### Entry Point Import

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Add this import to the top of your application entry point to enable automatic connection.

```ts
import "agent-react-devtools/connect";
```

--------------------------------

### Initialize agent-react-devtools

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

Run this command in your React app's root directory to automatically configure agent-react-devtools. It detects your framework and applies necessary settings.

```bash
cd your-react-app
npx agent-react-devtools init
```

--------------------------------

### Using with AI Coding Assistants

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Instructions on how to add agent-react-devtools skills to AI coding assistants.

```APIDOC
## Using with AI Coding Assistants

### Add Skill

```sh
npx skills add callstackincubator/agent-react-devtools
```

### Claude Code Plugin

Install via the Claude Code plugin marketplace:

```
/plugin marketplace add callstackincubator/agent-react-devtools
/plugin install agent-react-devtools@piotrski
```

### Manual Setup

If your assistant does not auto-load skills, add the following to your agent instructions (e.g., `AGENTS.md`):

```markdown
## React Debugging

This project uses agent-react-devtools to inspect the running React app.

- `agent-react-devtools start` — start the daemon
- `agent-react-devtools status` — check if the app is connected
- `agent-react-devtools get tree` — see the component hierarchy
- `agent-react-devtools get tree @c5` — see subtree from a specific component
- `agent-react-devtools get component @c1` — inspect a specific component
- `agent-react-devtools find <Name>` — search for components
- `agent-react-devtools errors` — list components with errors or warnings
- `agent-react-devtools profile start` / `profile stop` / `profile slow` — diagnose render performance
```
```

--------------------------------

### Wait for Conditions

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Block execution until the app connects or a specific component appears.

```sh
agent-react-devtools wait --connected [--timeout 30]          # Block until an app connects
agent-react-devtools wait --component App [--timeout 30]      # Block until a component appears
```

--------------------------------

### Find Components by Name

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Search for components matching a specific display name.

```sh
agent-react-devtools find TodoItem
```

--------------------------------

### Inspect Component Details

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Retrieve props, state, and hooks for a specific component.

```sh
agent-react-devtools get component @c6
```

--------------------------------

### Profile Performance

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Commands to record, analyze, and export performance data for React components.

```bash
agent-react-devtools profile start              # Start recording
agent-react-devtools profile stop               # Stop and collect data
agent-react-devtools profile slow               # Slowest components by avg render time
agent-react-devtools profile slow --limit 10    # Top 10
agent-react-devtools profile rerenders          # Most re-rendered components
agent-react-devtools profile report @c5         # Detailed report for one component
agent-react-devtools profile timeline --limit 10                        # First 10 commits (use --limit; uncapped can dump 300+ lines)
agent-react-devtools profile timeline --limit 10 --offset 10           # Next 10 (pagination)
agent-react-devtools profile timeline --sort duration --limit 5        # Top 5 most expensive commits
agent-react-devtools profile timeline --sort timeline --limit 5        # Explicit chronological order (same as default)
agent-react-devtools profile commit 3           # Detail for commit #3
agent-react-devtools profile export profile.json # Export as React DevTools Profiler JSON
agent-react-devtools profile diff before.json after.json  # Compare two exports
```

--------------------------------

### Complete performance debugging workflow

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

End-to-end workflow for profiling, diagnosing, and verifying performance fixes.

```bash
# 1. Start daemon and verify app connection
agent-react-devtools start
agent-react-devtools wait --connected --timeout 10
agent-react-devtools status

# 2. Establish baseline understanding
agent-react-devtools count
agent-react-devtools get tree --depth 3

# 3. Profile the slow interaction
agent-react-devtools profile start "slow form submission"
# ... user submits the form ...
agent-react-devtools profile stop

# 4. Identify bottlenecks
agent-react-devtools profile slow --limit 5
agent-react-devtools profile rerenders --limit 5

# 5. Drill into specific components
agent-react-devtools profile report @c12
agent-react-devtools get component @c12

# 6. Find the most expensive commits
agent-react-devtools profile timeline --sort duration --limit 3
agent-react-devtools profile commit 42

# 7. Export for visual analysis or comparison
agent-react-devtools profile export baseline.json

# 8. After making fixes, verify improvement
agent-react-devtools profile start "after fix"
# ... same interaction ...
agent-react-devtools profile stop
agent-react-devtools profile export after-fix.json
agent-react-devtools profile diff baseline.json after-fix.json
```

--------------------------------

### Inspect commit details

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Drill into a specific commit to view a per-component breakdown of performance.

```bash
agent-react-devtools profile commit 42
```

```bash
agent-react-devtools profile commit #42 --limit 10
```

--------------------------------

### Inspect React Components

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Commands for navigating the component tree and retrieving specific component details.

```bash
agent-react-devtools get tree           # Full component hierarchy (labels: @c1, @c2, ...)
agent-react-devtools get tree --depth 3 # Limit depth
agent-react-devtools get component @c5  # Props, state, hooks for a specific component
agent-react-devtools find Button        # Search by display name (fuzzy)
agent-react-devtools find Button --exact # Exact match
agent-react-devtools count              # Count by type: fn, cls, host, memo, ...
agent-react-devtools errors             # List components with errors or warnings
```

--------------------------------

### Verify performance fixes

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Compares render metrics before and after applying changes to confirm performance improvements.

```bash
agent-react-devtools profile start
# Repeat the interaction
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
# Compare render counts and durations to the previous run
```

--------------------------------

### Compare Profiling Sessions

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Export two sessions and use the diff command to identify regressions or improvements.

```bash
# Before the change
agent-react-devtools profile start "before"
# ... interact with the app ...
agent-react-devtools profile stop
agent-react-devtools profile export before.json

# After the change
agent-react-devtools profile start "after"
# ... same interaction ...
agent-react-devtools profile stop
agent-react-devtools profile export after.json

# Compare
agent-react-devtools profile diff before.json after.json
```

--------------------------------

### Search Components with Keys

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Finds components by name, including those with specific keys. This is useful for targeting unique instances of components like list items.

```bash
# Search for components with keys
agent-react-devtools find TodoItem
```

--------------------------------

### Browse Commit Timeline (Default)

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Displays a chronological list of React commits, showing the time taken and number of components affected for each commit. Defaults to showing the first 20 commits.

```bash
# Default: first 20 commits
agent-react-devtools profile timeline
```

--------------------------------

### Integrate with agent-browser

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Automate browser interactions while debugging; headed mode is required.

```bash
agent-react-devtools start

# Open app in headed browser (required - headless won't work)
agent-browser --session devtools --headed open http://localhost:5173/

# Verify connection
agent-react-devtools status

# Profile an automated interaction
agent-react-devtools profile start
agent-browser --session devtools click "#submit-button"
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
```

--------------------------------

### Prepend connect script for Create React App

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

For Create React App projects, prepend this import statement to your `src/index.tsx` file to enable agent-react-devtools.

```typescript
import 'agent-react-devtools/connect';
```

--------------------------------

### Browse Component Tree

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Retrieve the component hierarchy with a specified depth.

```sh
agent-react-devtools get tree --depth 3
```

--------------------------------

### CLI Profiling Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands for managing profiling sessions and analyzing component performance.

```sh
agent-react-devtools profile start [name]           # Begin a profiling session
agent-react-devtools profile stop                    # Stop and collect data
agent-react-devtools profile report <@c1 | id>      # Render report for a component
agent-react-devtools profile slow [--limit N]        # Slowest components by avg duration
agent-react-devtools profile rerenders [--limit N]   # Most re-rendered components
agent-react-devtools profile timeline [--limit N]    # Commit timeline
agent-react-devtools profile commit <N | #N> [--limit N]  # Single commit detail
agent-react-devtools profile export <file>               # Export as React DevTools Profiler JSON
agent-react-devtools profile diff <before.json> <after.json> [--limit N] [--threshold N]  # Compare two exports
```

--------------------------------

### Using with agent-browser

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Guidelines for using agent-react-devtools with agent-browser, emphasizing the need for headed mode.

```APIDOC
## Using with agent-browser

When using `agent-browser` for profiling, **you must use headed mode**.

```sh
agent-browser --session devtools --headed open http://localhost:5173/
agent-react-devtools status  # Should show "Apps: 1 connected"
```
```

--------------------------------

### Find Slowest Components by Average Render Time

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Ranks components based on their average render duration, highlighting performance bottlenecks. Includes details on render count, max duration, and causes of renders.

```bash
# Find slowest components
agent-react-devtools profile slow
```

--------------------------------

### Find components by display name

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Searches for components based on their display name. By default, it performs a case-insensitive substring match, but the `--exact` flag enables exact matching. Returns a list of matching components with their labels, types, and keys.

```bash
agent-react-devtools find <name> [--exact]
```

--------------------------------

### Exact Search Components by Name

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Finds components by name using exact matching. This ensures that only components with the precise name are returned.

```bash
# Exact match only
agent-react-devtools find Button --exact
```

--------------------------------

### Inspect App with agent-react-devtools

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/examples/expo-app/README.md

Use these commands to check the status of the agent-react-devtools connection and retrieve the component tree of the running application.

```sh
agent-react-devtools status
agent-react-devtools get tree
```

--------------------------------

### Rank components by average render duration

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Ranks components based on their average render duration, from slowest to fastest. Useful for identifying performance bottlenecks. Includes an optional limit for the number of components displayed.

```bash
agent-react-devtools profile slow [--limit N]
```

--------------------------------

### Find Components by Name

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Searches for components by their display name using fuzzy or exact matching. Supports searching for components with specific keys.

```APIDOC
## GET /api/find

### Description
Searches for components by display name.

### Method
GET

### Endpoint
/api/find

### Query Parameters
- **name** (string) - Required - The name of the component to search for.
- **exact** (boolean) - Optional - If true, performs an exact match.

### Example
```bash
agent-react-devtools find Button
agent-react-devtools find Button --exact
agent-react-devtools find TodoItem
```
```

--------------------------------

### Fuzzy Search Components by Name

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Finds components by name using fuzzy matching, which is case-insensitive and performs substring matching. Useful for quickly locating components when the exact name is unknown.

```bash
# Fuzzy search (case-insensitive substring match)
agent-react-devtools find Button
```

--------------------------------

### Inspect Component by Label

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Retrieves detailed information about a specific component, identified by its label (e.g., @c6). Displays props, state, and hook data.

```bash
# Inspect by label
agent-react-devtools get component @c6
```

--------------------------------

### Inspect Component with State and Hooks

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Retrieves detailed information for a component that utilizes state and multiple hooks. Shows props, state values, and hook details.

```bash
# Example with state and multiple hooks
agent-react-devtools get component @c5
```

--------------------------------

### Find components and inspect state

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Locates a specific component by name and retrieves its current state or props.

```bash
agent-react-devtools find SearchBar
agent-react-devtools get component @c12
```

--------------------------------

### Verify Fixes

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Re-profile an interaction after applying a fix to confirm performance improvements.

```bash
agent-react-devtools profile start "after fix"
# Same interaction
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
```

--------------------------------

### Changed Keys Output Format

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

This format displays the specific props, state, or hooks that triggered a re-render during profiling.

```text
changed: props: onClick, className  state: count  hooks: #0
```

--------------------------------

### Agent Browser Integration

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Use headed mode when driving the app with agent-browser to ensure devtools connectivity.

```sh
agent-browser --session devtools --headed open http://localhost:5173/
agent-react-devtools status  # Should show "Apps: 1 connected"
```

--------------------------------

### Inspect Component State and Props

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

View the current props and hooks of a component to debug unstable references.

```bash
agent-react-devtools get component @c12
```

--------------------------------

### CLI Command: profile diff

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Compares two exported profiling sessions to identify performance regressions, improvements, and component changes.

```APIDOC
## profile diff <before.json> <after.json> [--limit N] [--threshold N]

### Description
Compare two exported profiling sessions and show regressed, improved, new, and removed components. Does not require the daemon to be running.

### Parameters
#### Path Parameters
- **before.json** (file) - Required - Path to the initial profiling session file.
- **after.json** (file) - Required - Path to the subsequent profiling session file.

#### Options
- **--limit N** (number) - Optional - Cap the number of components shown per category.
- **--threshold N** (number) - Optional - Changes below this percentage are not reported (Default: 5%).
```

--------------------------------

### Wait for connection after reload

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Ensures the application is fully connected before executing further commands to avoid querying empty state.

```bash
agent-react-devtools wait --connected --timeout 10
agent-react-devtools get tree
```

--------------------------------

### Manual Connect Import for agent-react-devtools

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Add this import as the very first line in your application's entry point (`src/main.tsx` or `src/index.tsx`) to manually connect to the devtools daemon. This method works with any bundler or framework.

```typescript
// src/main.tsx or src/index.tsx
import 'agent-react-devtools/connect';  // Must be first import

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

```

--------------------------------

### Development Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Common commands for developing the agent-react-devtools project.

```APIDOC
## Development

```sh
bun install        # Install dependencies
bun run build      # Build
bun run test       # Run tests
bun run typecheck  # Type check
```
```

--------------------------------

### Count components by type

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Counts the number of components categorized by their type (e.g., function, class, host). The output provides a summary of component types and their counts.

```bash
agent-react-devtools count
```

--------------------------------

### View Subtree

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Inspect a specific subtree rooted at a given component ID.

```sh
agent-react-devtools get tree @c5 --depth 2
```

--------------------------------

### Manage Daemon Connection

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Commands to control the background daemon process and wait for application connectivity.

```bash
agent-react-devtools start              # Start daemon (auto-starts on first command)
agent-react-devtools stop               # Stop daemon
agent-react-devtools status             # Check connection, component count, last event
agent-react-devtools wait --connected   # Block until a React app connects
agent-react-devtools wait --component App # Block until a component appears
```

--------------------------------

### Troubleshooting agent-react-devtools connection

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

This section provides steps to troubleshoot if the agent-react-devtools connection status shows 'Apps: 0 connected'. It covers checking development mode, console errors, port conflicts, and specific requirements for agent-browser.

```text
1. Check the app is running in dev mode
2. Check the console for WebSocket connection errors
3. Ensure no other DevTools instance is using port 8097
4. If using `agent-browser`, make sure you're using **headed mode** (`--headed`) — headless Chromium does not properly execute the devtools connect script
```

--------------------------------

### Rank components by render count

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Ranks components based on the number of times they have re-rendered, from most to least. This helps identify components that might be re-rendering unnecessarily. Includes an optional limit for the number of components displayed.

```bash
agent-react-devtools profile rerenders [--limit N]
```

--------------------------------

### Run agent-browser in headed mode for devtools

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

When using agent-browser with agent-react-devtools, it is mandatory to run in headed mode. This command demonstrates how to launch agent-browser with the `--headed` flag to ensure proper execution of the devtools connect script.

```bash
# Headed mode is required for devtools to connect
agent-browser --session devtools --headed open http://localhost:5173/

# Verify connection
agent-react-devtools status
```

--------------------------------

### Profiling

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Commands to profile React component rendering performance, analyze re-renders, and export data.

```APIDOC
## Profiling

### profile start
- **Description**: Start a profiling session.

### profile stop
- **Description**: Stop profiling and collect data.

### profile slow
- **Description**: Rank components by average render duration.
- **Parameters**:
  - **--limit** (number) - Optional - Number of results to show.

### profile rerenders
- **Description**: Rank components by render count.

### profile report
- **Description**: Detailed render report for a single component.
- **Parameters**:
  - **id** (string/number) - Required - Component label or ID.

### profile timeline
- **Description**: Chronological list of React commits.

### profile export
- **Description**: Export profiling data as a JSON file.
- **Parameters**:
  - **file** (string) - Required - Path to save the JSON file.
```

--------------------------------

### Daemon Management

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands to control the persistent background daemon that manages the connection to the React application.

```APIDOC
## Daemon Commands

### Description
Manage the lifecycle and status of the background daemon.

### Commands
- `start [--port 8097]` - Start the daemon on the specified port.
- `stop` - Stop the running daemon.
- `status` - Check the connection status and uptime of the daemon.
```

--------------------------------

### Component Inspection Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands for querying component data and hierarchy.

```sh
agent-react-devtools get tree [@c1 | id] [--depth N] [--all] [--max-lines N]  # Component hierarchy (subtree)
agent-react-devtools get component <@c1 | id>      # Props, state, hooks
agent-react-devtools find <name> [--exact]          # Search by display name
agent-react-devtools count                          # Component count by type
agent-react-devtools errors                         # Components with errors/warnings
```

--------------------------------

### Stop Profiling Session and View Summary

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Stops the current profiling session and displays a summary of the captured performance data, including duration, commit count, and top rendering components.

```bash
# Stop profiling and see summary
agent-react-devtools profile stop
```

--------------------------------

### Profiling Session Comparison Command

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Use this command to compare two exported profiling JSON files. It identifies performance regressions and improvements based on a configurable threshold.

```bash
agent-react-devtools profile diff <before.json> <after.json> [--limit N] [--threshold N]
```

--------------------------------

### Wait for React App Connection

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Blocks execution until a React app connects to the daemon. Useful for automation scripts. A default timeout of 30 seconds is applied.

```bash
agent-react-devtools wait --connected
```

--------------------------------

### Drill Into Component Reports

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/profiling-guide.md

Retrieve a detailed render report for a specific component to identify causes of re-renders.

```bash
agent-react-devtools profile report @c12
```

--------------------------------

### Count Components

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Provides a summary count of all components in the application, categorized by type (function, host, memo, class).

```APIDOC
## GET /api/count

### Description
Counts the number of components in the application, categorized by type.

### Method
GET

### Endpoint
/api/count

### Example
```bash
agent-react-devtools count
```
```

--------------------------------

### Daemon Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands for controlling the background daemon process.

```sh
agent-react-devtools start [--port 8097]   # Start daemon
agent-react-devtools stop                   # Stop daemon
agent-react-devtools status                 # Connection status
```

--------------------------------

### Vite Plugin Configuration

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Configure the Vite plugin in your config file or customize connection options.

```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@js/plugin-react";
import { reactDevtools } from "agent-react-devtools/vite";

export default defineConfig({
  plugins: [reactDevtools(), react()],
});
```

```ts
reactDevtools({ port: 8097, host: "localhost" });
```

--------------------------------

### List components with errors or warnings

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Lists all components that have reported non-zero error or warning counts. React tracks console errors and warnings per component, and this command surfaces them, indicating potential issues.

```bash
agent-react-devtools errors
```

```text
@c5 [fn] Form ⚠2 ✗1
@c8 [fn] Input ✗3
```

--------------------------------

### Find Slowest Components

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Ranks components by their average render duration to identify performance bottlenecks. Supports limiting the number of results.

```APIDOC
## GET /api/profile/slow

### Description
Finds and ranks components by their average render duration.

### Method
GET

### Endpoint
/api/profile/slow

### Query Parameters
- **limit** (integer) - Optional - Limits the number of results returned.

### Example
```bash
agent-react-devtools profile slow
agent-react-devtools profile slow --limit 5
```
```

--------------------------------

### Check agent-react-devtools connection status

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

This command verifies if the agent-react-devtools daemon is running and if any applications are connected. It provides information about the daemon's port and the number of connected apps and components.

```bash
agent-react-devtools status
```

--------------------------------

### Limit Most Re-rendered Components Results

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Finds the most re-rendered components and limits the number of results displayed. Helps in prioritizing optimization efforts for components with high render counts.

```bash
agent-react-devtools profile rerenders --limit 10
```

--------------------------------

### Daemon Management

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Commands to control the background daemon process that facilitates communication between the CLI and the React application.

```APIDOC
## Daemon Management

### start
- **Description**: Start the background daemon. Default port: 8097.
- **Parameters**:
  - **--port** (number) - Optional - Port number for the daemon.

### stop
- **Description**: Stop the daemon process.

### status
- **Description**: Show daemon status including port, connected apps, component count, and uptime.

### wait
- **Description**: Block until a specific condition is met.
- **Parameters**:
  - **--connected** (flag) - Optional - Wait until at least one React app connects.
  - **--component** (string) - Optional - Wait until a component with the given display name appears.
  - **--timeout** (number) - Optional - Timeout in seconds (default: 30s).
```

--------------------------------

### List Component Errors

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Display components currently reporting errors or warnings.

```sh
agent-react-devtools errors
```

--------------------------------

### Inspect a single component's details

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Provides detailed information about a specific component, including its props, state, and hooks. Accepts a component label (e.g., `@c5`) or a numeric React fiber ID.

```bash
agent-react-devtools get component <@cN | id>
```

--------------------------------

### Browse timeline in chunks

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Retrieves commit history in paginated segments to manage large amounts of profiling data.

```bash
agent-react-devtools profile timeline --limit 20               # commits 0–19
agent-react-devtools profile timeline --limit 20 --offset 20   # commits 20–39
agent-react-devtools profile timeline --offset 30 --limit 10   # skip warm-up, show 30–39
```

--------------------------------

### Wait for React App Connection with Custom Timeout

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Blocks execution until a React app connects, with a specified timeout duration in seconds.

```bash
agent-react-devtools wait --connected --timeout 10
```

--------------------------------

### Browse Commit Timeline

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Displays a chronological list of React commits, with options for pagination and limiting the number of results.

```APIDOC
## GET /api/profile/timeline

### Description
Retrieves a chronological list of React commits.

### Method
GET

### Endpoint
/api/profile/timeline

### Query Parameters
- **limit** (integer) - Optional - The number of commits to return per page.
- **offset** (integer) - Optional - The starting offset for pagination.

### Example
```bash
agent-react-devtools profile timeline
agent-react-devtools profile timeline --limit 10
agent-react-devtools profile timeline --limit 10 --offset 20
```
```

--------------------------------

### Expected agent-react-devtools status output

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

This is the expected output when the agent-react-devtools daemon is running correctly and at least one application is connected.

```text
Daemon: running (port 8097)
Apps: 1 connected, 42 components
```

--------------------------------

### Limit Slowest Components Results

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Finds the slowest components by average render time and limits the number of results displayed. Useful for focusing on the top N performance issues.

```bash
# Limit results
agent-react-devtools profile slow --limit 5
```

--------------------------------

### Diagnose slow interactions

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/SKILL.md

Captures performance data during user interactions to identify components with high render times or excessive re-renders.

```bash
agent-react-devtools profile start
# User interacts with the app (or use agent-browser to drive the UI)
agent-react-devtools profile stop
agent-react-devtools profile slow --limit 5
agent-react-devtools profile rerenders --limit 5
```

--------------------------------

### Wait Commands

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/README.md

Commands to block execution until specific conditions are met, useful for automation scripts.

```APIDOC
## Wait

### Description
Block execution until a specific condition is met or a timeout occurs.

### Commands
- `wait --connected [--timeout 30]` - Block until an app connects.
- `wait --component <name> [--timeout 30]` - Block until a specific component appears.
```

--------------------------------

### Forward DevTools Port for Physical Devices

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/examples/expo-app/README.md

When using a physical device, forward the DevTools port over USB using ADB. This ensures the DevTools can communicate with the app running on the device.

```sh
adb reverse tcp:8097 tcp:8097
```

--------------------------------

### View chronological commit timeline

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Displays a chronological list of React commits during a profiling session, showing index, duration, and component count for each. Supports limiting the number of entries, sorting by duration, and offsetting to page through results.

```bash
agent-react-devtools profile timeline [--limit N] [--offset N] [--sort duration|timeline]
```

--------------------------------

### Find Most Re-rendered Components

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Ranks components by their total render count, identifying components that are re-rendering excessively. Details include causes and changed props/state/hooks.

```bash
# Find most re-rendered components
agent-react-devtools profile rerenders
```

--------------------------------

### Wait for React app connection

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Blocks execution until at least one React app connects via WebSocket. If an app is already connected, it resolves immediately. Includes an optional timeout; exits non-zero on timeout.

```bash
agent-react-devtools wait --connected [--timeout S]
```

--------------------------------

### List Components with Errors or Warnings

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Lists components that have associated React console errors or warnings. These issues are also annotated in the component tree output.

```APIDOC
## GET /api/errors

### Description
Lists components with associated React console errors or warnings.

### Method
GET

### Endpoint
/api/errors

### Example
```bash
agent-react-devtools errors
```
```

--------------------------------

### Create client component for Next.js App Router

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/setup.md

This React component imports the agent-react-devtools connect script. It should be added to your Next.js app and imported into your root layout for the devtools to function.

```tsx
'use client';
import 'agent-react-devtools/connect';
export default function DevTools() { return null; }
```

--------------------------------

### Wait for specific component to appear

Source: https://github.com/callstackincubator/agent-react-devtools/blob/main/packages/agent-react-devtools/skills/react-devtools/references/commands.md

Blocks execution until a component with the specified display name appears in the component tree. This is useful after a reload to ensure a specific UI part has rendered. Supports exact name matching and has an optional timeout.

```bash
agent-react-devtools wait --component <name> [--timeout S]
```

--------------------------------

### Find Most Re-rendered Components

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Ranks components by their render count to identify excessive re-rendering. Supports limiting the number of results.

```APIDOC
## GET /api/profile/rerenders

### Description
Finds and ranks components by their render count.

### Method
GET

### Endpoint
/api/profile/rerenders

### Query Parameters
- **limit** (integer) - Optional - Limits the number of results returned.

### Example
```bash
agent-react-devtools profile rerenders
agent-react-devtools profile rerenders --limit 10
```
```

--------------------------------

### Inspect Component Details

Source: https://context7.com/callstackincubator/agent-react-devtools/llms.txt

Provides detailed information about a specific component, including its props, state, and hooks. Inspection can be done by component label or by numeric React fiber ID.

```APIDOC
## GET /api/component/:id

### Description
Retrieves detailed information about a specific component, including props, state, and hooks.

### Method
GET

### Endpoint
/api/component/:id

### Parameters
#### Path Parameters
- **id** (string) - Required - The label or numeric React fiber ID of the component (e.g., @c6, 123).

### Example
```bash
agent-react-devtools get component @c6
agent-react-devtools get component 123
```
```