# uikit-registry 🎨

**Registry 13 UI library + MCP server untuk AI.**  
Cari, bandingin, dan dapetin detail komponen UI dari 13 library populer — langsung dari AI agent (OpenCode, Claude, dll).

```
npm run mcp-server   →   search_component + get_component + compare_components
```

---

## ✨ Fitur

| Fitur | Tools MCP |
|-------|-----------|
| 🔍 Cari komponen di semua library | `search_component(query)` |
| 📦 Ambil detail komponen + source code + props | `get_component(library, component)` |
| ⚖️ Bandingin komponen antar library | `compare_components(component, libraries?)` |
| 13 library UI | shadcn, MUI, Chakra, Antd, Mantine, NextUI, Radix, DaisyUI, PrimeReact, Neobrutalism, Aceternity, Magic UI, Origin UI |
| Props real dari TypeScript `.d.ts` | MUI ✅, shadcn ✅ |
| 0 runtime dependencies | Node.js aja |

---

## 🚀 Quick Start

### 1. Clone & Setup

```bash
git clone https://github.com/captainy7/uikit-registry.git
cd uikit-registry
npm install
npm run build
```

### 2. Jalankan MCP Server

```bash
npm run mcp-server
```

Output:
```
🔌 uikit-registry MCP server v2 (data: ./data)
   Tools: search_component, get_component, compare_components
   Libraries: 13
```

### 3. Daftarin di OpenCode / Claude

Edit `~/.config/opencode/opencode.json`:

```json
{
  "mcpServers": {
    "uikit-registry": {
      "command": "node",
      "args": ["/home/satria/Development/uikit-registry/dist/mcp-server.js"],
      "env": {
        "UIKIT_DATA_DIR": "/home/satria/Development/uikit-registry/data"
      }
    }
  }
}
```

Restart OpenCode, langsung bisa pake tools `uikit-registry`.

---

## 📦 Data

| Library | Komponen | Props | Version |
|---------|----------|-------|---------|
| shadcn/ui | 358 | ✅ source code + CVA props | — |
| MUI | 131 | ✅ 14+ props dari `.d.ts` | v9.1.2 |
| Chakra UI | 115 | — | v3.36.0 |
| Ant Design | 80 | — | v6.4.5 |
| Mantine | 114 | — | v9.4.0 |
| NextUI / Heroui | 85 | — | v3.2.1 |
| Radix UI | 59 | — | — |
| DaisyUI | 46 | — | v5.5.23 |
| PrimeReact | 124 | — | — |
| Aceternity UI | 88 | — | — |
| Magic UI | 47 | — | — |
| Origin UI | 76 | — | — |
| Neobrutalism | 16 | — | — |
| **Total** | **1339** | — | — |

---

## 🛠️ Usage Examples (via AI Agent)

**Cari komponen:**
```
search_component("button")
→ 11 library punya button
```

**Lihat detail:**
```
get_component("shadcn", "button")
→ import, 4 props (variant, size, className, asChild), source code
```

**Bandingkan:**
```
compare_components("dialog", "shadcn,mui")
→ shadcn: 0 props
→ mui: 20 props (transition, paper, container, backdrop, ...)
```

---

## 📋 Scraping Manual

```bash
# Scrape semua library
npm run scrape

# Scrape satu library aja
tsx src/scraper.ts --lib shadcn

# Output: data/{library}/{component}.json
# Index: data/index.json
```

Scraping otomatis tiap minggu via GitHub Actions (`.github/workflows/scrape.yml`).

---

## 🧪 Tests

```bash
npm test
# 125 tests, 0 fail
```

```bash
npm run typecheck
# TypeScript strict, 0 errors
```

---

## 🏗️ Arsitektur

```
src/
├── scrapers/       # 13 scraper, masing-masing file sendiri
├── mcp/            # MCP server + tools
├── data/           # Data access layer (ComponentStore)
└── shared/         # Types, constants, utils
```

- **TypeScript strict** — semua tipe aman
- **Zero runtime deps** — cuma node.js
- **100% local** — gak perlu GitHub API / internet
- **Parallel scraper** — 13 library selesai ~1 menit

---

## 📄 License

MIT