xiaoxue_admin
/
awesome-llm-apps-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
awesome-llm-apps-source/generative_ui_agents/ai-shadcn-component-generator
History
xiaowei 5efcd70b4f awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 
Size: 160M
 		2026-07-13 19:45:03 +08:00
..
.claude awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
apps awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
.gitignore awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
.mcp.json awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
LICENSE awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
README.md awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
package.json awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
pnpm-workspace.yaml awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
render.yaml awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00
tsconfig.json awesome-llm-apps: 100+ AI Agent & RAG apps (Shubhamsaboo) 2026-07-13 19:45:03 +08:00

README.md

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

Deploy to Render

Or connect your repo — render.yaml defines everything.