Reactopia Agent
Pick Claude or Gemini, attach tools, and step through plans, calls, and approvals in one place. The Browse library still has the React pieces if you want to build your own UI.
Claude and Gemini share the same form. API execution is not wired yet.
Run preview
Open studioprovider: claude
model: claude-sonnet-4-20250514
Check status.example.com, draft a one-paragraph update, wait for approve before send.
Plan
Break down the user request into tool steps.
Tool: fetch_url
GET https://api.example.com/status → 200 OK
Reason
Summarize findings for the user.
Approval required
Send summary email to team@company.com
RejectApproveComplete
Run finished after approval.
What is in the alpha build
Shipped means you can click it today. Not shipped is listed so we do not pretend otherwise.
- Studio layout + provider switchShipped
- Sample run trace in the UIShipped
- Architecture notesShipped
- Live model API from the browserNot yet
- Saved agents and run historyNot yet
Still on the same site
Components, hooks, SVG workbench, and Discover were here first. They are not going away.
UI components
LiveReusable React + Tailwind components with MDX docs. Separator and UiButton are published; more are being added.
SVG animation tools
BetaIn-browser SVG path and text animation workbench, built with the @reactopia/svg-animator package.
Discover directory
In developmentA curated directory of websites with live link previews. Actively being built out.
Building something on top of the studio? Say what you need; we read team@reactopia.me.
Send emailYash Mahajan
Reactopia is a small devtools project from India (2024). Agent is the product direction; the repo stays public.
Fork it, copy components, open issues
Components, SVG tooling, docs, and directory code live in the public Reactopia repository. Contributions welcome.