AI Shadcn Component Generator

Ported from the upstream CopilotKit/shadify repository.

Describe a UI in plain English. Get a live, interactive shadcn/ui component back. Export it as clean React code.

https://github.com/user-attachments/assets/b14bebd6-527a-48bd-94f5-d27fea8808aa

Gen UI concept — schema-driven component composition. The full shadcn component schema is passed as agent context, so the model knows exactly which primitives exist, what props they take, and how they nest. The agent's "output" is a structured tree of those primitives — streamed to the browser, mounted as real React, exportable as code. The design system is the action space.

Built With

• shadcn/ui — The AI composes from real shadcn components (cards, charts, forms, menus, layouts). Every generated component is accessible, polished, and uses the same primitives you'd npx shadcn add into your own project.
• CopilotKit — Streams structured UI from the agent to the browser in real time. Passes the full component schema as agent context so the model knows exactly what it can build.
• AG-UI — The agent ↔ UI protocol that carries tool calls and component instructions between the LangGraph backend and the React frontend.
• LangGraph — Powers the agent backend. Handles reasoning, tool use (web search, site extraction via Tavily), and conversation memory across turns.
• Render — All three services deploy from a single render.yaml Blueprint. Render wires service URLs together automatically via fromService references — push to main and you're live.

Architecture

Three services in a pnpm monorepo:

UI (React + Vite)  →  Runtime (Hono + CopilotKit)  →  Agent (FastAPI + LangGraph)

Service	Path	What it does
ui	apps/ui	Chat interface, component rendering, code export
runtime	apps/runtime	CopilotKit runtime, routes messages to the agent
agent	apps/agent	LangGraph agent with search tools, returns structured UI

Quick Start

pnpm install

Add your keys:

# apps/runtime/.env
OPENAI_API_KEY=sk-...

# apps/agent/.env
OPENAI_API_KEY=sk-...
TAVILY_API_KEY=tvly-...

pnpm dev

UI runs at localhost:5173. Runtime on 4000, agent on 8123.

Deploy

Or connect your repo — render.yaml defines everything.