Shadify

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

demo.mp4

Built With

• shadcn/ui — The AI composes from real shadcn components (cards, charts, forms, menus, layouts). Every generated page is accessible, polished, and uses the same components 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.
• 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.

License

MIT