← all repositories
eylonmiz/react-agent

GPT-4 writes your React components from a user story

An experimental agent that turns PRDs into working UI, with mixed results.

1.7k stars TypeScript AgentsCoding Assistants
react-agent
Velocity · 7d
+1.5
★ / day
Trend
steady
star history

What it does ReactAgent takes a user story written in Markdown, feeds it to GPT-4, and outputs React components styled with Tailwind and Shadcn UI. It runs as a local backend script that generates code into a folder you specify, plus a frontend viewer to preview the results. The project is explicitly framed as a prototyping tool, not a production pipeline.

The interesting bit The generation follows Atomic Design principles and can compose new components from an existing local design system — it doesn’t just spit out isolated widgets. The workflow is intentionally stepwise: story → JSON skeleton → component code, with hooks to pause and inspect at each stage.

Key highlights

  • Requires GPT-4; GPT-3.5 is explicitly unsupported
  • Built around Shadcn UI, Radix, and Tailwind — opinionated but current
  • Can ingest your own component library as a design system source
  • Step-by-step execution is advised, not full autopilot
  • Architecture docs and feature-flow diagrams are included in the repo

Caveats

  • Generated code is “not production-ready” per the authors’ own warning
  • The JSON-translation step is lossy and may need manual correction
  • Token costs can rack up quickly; the README includes an unusually frank cost disclaimer
  • Output may contain bugs that prevent it from running even in dev

Verdict Worth a spin for frontend teams who want to accelerate early-stage prototyping or explore design-system-to-code workflows. Skip it if you need reliable, hands-off code generation or if your OpenAI budget is tight.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.