# AI Shadcn Component Generator

> Ported from the upstream CopilotKit/shadify repository.

- Source: https://doutorai.pt/en/apps/ai-shadcn-component-generator
- Category: Generative Interfaces
- Difficulty: Advanced
- Models: OpenAI
- Frameworks: LangChain
- Runs locally?: Needs cloud APIs
- Required keys: OPENAI_API_KEY, TAVILY_API_KEY
- License: Apache-2.0
- Site: Doutor AI (https://doutorai.pt/en) - AI tools for small businesses

## Full tutorial

# AI Shadcn Component Generator

> Ported from the upstream [CopilotKit/shadify](https://github.com/CopilotKit/shadify) repository.

Describe a UI in plain English. Get a live, interactive [shadcn/ui](https://ui.shadcn.com/) 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](https://ui.shadcn.com/)** - 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](https://github.com/CopilotKit/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](https://github.com/ag-ui-protocol/ag-ui)** - The agent ↔ UI protocol that carries tool calls and component instructions between the LangGraph backend and the React frontend.
- **[LangGraph](https://www.langchain.com/langgraph)** - Powers the agent backend. Handles reasoning, tool use (web search, site extraction via Tavily), and conversation memory across turns.
- **[Render](https://render.com/)** - 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

```bash
pnpm install
```

Add your keys:

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

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

```bash
pnpm dev
```

UI runs at [localhost:5173](http://localhost:5173). Runtime on 4000, agent on 8123.

## Deploy

[![Deploy to Render](/assets/apps-img/b97c3a03e6ce4ea5.png)](https://render.com/deploy)

Or connect your repo - `render.yaml` defines everything.

## Save hours every week with AI, no hassle

**Doutor AI** gives you 1,859 ready-to-copy AI prompts, by industry and in plain English - plus a complete technical library for those who want to go further. [See plans →](https://doutorai.pt/en/pricing)

---
Content by Doutor AI (https://doutorai.pt/en). When quoting, please cite the source: https://doutorai.pt/en/apps/ai-shadcn-component-generator