Shadify

CopilotKit / shadify

Stream AI generated Shadcn components, not just text.

242 21 Language: TypeScript License: MIT Updated: 1mo ago

README

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

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

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.

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

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.

Or connect your repo — render.yaml defines everything.

MIT