01
Select real UI
Click one or many elements in the running application and keep the visual target attached to React ownership.
React developer tooling
Agentic React
Agentic React: Give coding agents the exact React context.
Select real UI in the browser and capture component names, selectors, source locations, snippets, owner traces, and local MCP tools—so agents edit the right code without guessing.
Selection workflow
Move from pixels to owned React source.
The toolkit overlays real applications, traces selected components, and packages that context for an agent. Every frame comes from the official playground.
Slide 1 of 5: Work in the real application
01 / 05
Work in the real application
Start from the interface you are already reviewing in local development.
Use left and right arrow keys while this carousel is focused.
Why it matters
Remove ambiguity before the first edit.
Agentic React turns visual intent into source-aware evidence an agent can act on without searching the whole application by description.
02
Capture source context
Collect component names, stable selectors, source locations, nearby code, and owner traces.
03
Send agent-ready evidence
Copy structured text or JSON, or expose the selection through a local MCP endpoint.
Developer workflow
Point at the interface. Trace it to source. Keep the edit scoped.
The browser runtime understands the live React tree. Bundler adapters add local source lookup and MCP transport while keeping the bridge in development tooling.
- 01
Install one adapter
Choose the package that matches the application bundler.
- 02
Select the UI
Use the in-browser overlay to capture the component or set of components you mean.
- 03
Pass context to the agent
Send exact source-aware context through copy, JSON, or the local MCP bridge.
Choose an adapter
Install for the bundler already in your app.
Each adapter includes the core browser runtime and adds its local development bridge.
Vite
pnpm install @agentic-react/vite -DWebpack
pnpm install @agentic-react/webpack -DNext.js
pnpm install @agentic-react/next -DCommunity notes
What source-aware selection unlocks.
Use arrow keys to browse
Endorsement 1 of 4 from chukeng
“Agentic React replaces 'that thing on the page' with an exact component, selector, and source location. My coding agent starts from evidence instead of guessing.”
01 / 04
Next step
Stop asking agents to guess which component you mean.
Install the adapter for your stack and hand the next UI edit exact React context.