# Vibe Code MCP

שרת MCP מלא ל‑Claude Code שמתחבר לאתר
[vibe-code-best-practices.vercel.app](https://vibe-code-best-practices.vercel.app/)
ויודע **לנתב בדיוק איזה כלי / ספרייה / Skill מהאתר מתאים לצורך שלך** — בעברית או באנגלית.

השרת מאנדקס את כל הקטלוג של האתר (**817 כלים** ב‑**185 sections** ו‑**10 תחומים**),
מנתב לפי צורך חופשי בעזרת מילון קונספטים דו‑לשוני, ויכול גם להמליץ על stack שלם.

---

## מה הוא יודע לעשות (ה‑Tools)

| Tool | מה הוא עושה |
|------|-------------|
| **`route_project`** | ⭐ הכלי המרכזי. מקבל תיאור חופשי של מה שאתה בונה/צריך ומחזיר את הכלים הכי מתאימים מהאתר, מדורגים עם נימוק, פקודת התקנה וקישור לתיעוד. |
| **`recommend_stack`** | מחזיר stack שלם וקוהרנטי (Framework, Styling, Components, DB, Auth, Payments, Testing, Deploy...) לפי `web` או `mobile`. |
| **`search_tools`** | חיפוש מילולי על כל 817 הערכים (שם, קטגוריה, section, תיאור). |
| **`list_domains`** | רשימת התחומים העליונים עם ספירות. |
| **`list_sections`** | רשימת כל ה‑sections (אפשר לסנן לפי תחום). |
| **`get_section`** | כל הכלים בתוך section מסוים (לפי id או שם). |
| **`get_tool`** | פרטים מלאים על כלי בודד. |
| **`refresh_catalog`** | משיכה מחדש של הקטלוג מהאתר החי. |
| **`catalog_status`** | סטטוס ומקור הקטלוג + סטטיסטיקות. |

**Resources:** `vibe-code://catalog`, `vibe-code://domains`, `vibe-code://stats`.

### התחומים (domains)
`getting-started` · `modern-stack` · `web` · `mobile` · `design` · `ai-agents` · `skills` · `mcp` · `dev-tools` · `learning`

---

## התקנה

```bash
cd /private/tmp/vibe-code-mcp
npm install
npm run build
```

בדיקה מהירה שהכול עובד:

```bash
npm run selftest
```

---

## רישום ב‑Claude Code

הדרך הקלה (CLI):

```bash
claude mcp add vibe-code -- node /private/tmp/vibe-code-mcp/dist/index.js
```

להתקנה גלובלית (זמין בכל הפרויקטים):

```bash
claude mcp add --scope user vibe-code -- node /private/tmp/vibe-code-mcp/dist/index.js
```

לחלופין, ידנית דרך `.mcp.json` בשורש הפרויקט (או `~/.claude.json`):

```json
{
  "mcpServers": {
    "vibe-code": {
      "command": "node",
      "args": ["/private/tmp/vibe-code-mcp/dist/index.js"]
    }
  }
}
```

אחרי הרישום, הפעל מחדש את Claude Code ובדוק עם `/mcp` שהשרת `vibe-code` מחובר.

---

## דוגמאות שימוש (בתוך Claude Code)

פשוט תשאל בשפה טבעית — Claude יקרא ל‑`route_project` אוטומטית:

> "אני בונה אפליקציית React Native וצריך אנימציות חלקות — מה הכי מתאים?"
> → React Native Reanimated, RN Ease, RN Micro Interactions

> "צריך מערכת תשלומים ומנויים ל‑SaaS ב‑Next.js"
> → Stripe, Autumn, Polar (Payments & Billing)

> "טבלאות נתונים עם חיפוש וסינון לאתר"
> → Bazza Data Table Filter

> "תן לי stack שלם לאפליקציית web"
> → Next.js + shadcn/ui + Drizzle + Better Auth + TanStack Query + Resend + PostHog + Sentry + Vercel

---

## איך זה עובד

1. **מקור הנתונים** — האתר הוא SPA (Vite + TanStack Router). כל הקטלוג טמון ב‑JS chunk
   (`routes-*.js`). השרת פותר את השרשרת `homepage → index chunk → routes chunk`, מפרסר את
   ה‑object literals ובונה היררכיה: `domains → sections → tools`.
2. **Snapshot אופליין** — `data/catalog.snapshot.json` מצורף לחבילה כך שהשרת עובד גם בלי רשת.
   ברקע הוא מנסה לרענן מהאתר החי (cache ל‑12 שעות ב‑`tmp`).
3. **מנוע הניתוב** (`src/search.ts`) — טוקניזציה דו‑לשונית, מילון קונספטים (auth, payments,
   animation, database, i18n, hebrew, mobile, ai...) שמרחיב מונחים ומחזק את ה‑sections הרלוונטיים,
   וניקוד משוקלל על שם/קטגוריה/section/תיאור + סינון פלטפורמה.

### עדכון ה‑snapshot מהאתר

```bash
npm run refresh-snapshot
```

### משתני סביבה

| משתנה | ברירת מחדל | תיאור |
|-------|-----------|-------|
| `VIBE_CODE_OFFLINE` | `0` | `1` = לא לנסות לרשת, להשתמש רק ב‑snapshot. |
| `VIBE_CODE_CACHE_TTL_MS` | `43200000` (12ש') | TTL ל‑cache של הרענון החי. |

---

## מבנה הפרויקט

```
vibe-code-mcp/
├── data/catalog.snapshot.json   # קטלוג מצורף (offline fallback)
├── src/
│   ├── index.ts                 # entry point — רישום tools/resources + stdio
│   ├── parser.ts                # חילוץ הקטלוג מ‑bundle האתר + fetch חי
│   ├── catalog.ts               # טעינה, cache, snapshot, refresh
│   ├── search.ts                # מנוע הניתוב, מילון קונספטים, recommend_stack
│   └── types.ts
└── package.json
```