Vibe Code MCP

שרת MCP מלא ל‑Claude Code שמתחבר לאתר 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

---

התקנה

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

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

npm run selftest

---

רישום ב‑Claude Code

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

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

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

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

לחלופין, ידנית דרך .mcp.json בשורש הפרויקט (או ~/.claude.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 מהאתר

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