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
---
איך זה עובד
- מקור הנתונים — האתר הוא SPA (Vite + TanStack Router). כל הקטלוג טמון ב‑JS chunk
(routes-*.js). השרת פותר את השרשרת homepage → index chunk → routes chunk, מפרסר את ה‑object literals ובונה היררכיה: domains → sections → tools.
- Snapshot אופליין —
data/catalog.snapshot.jsonמצורף לחבילה כך שהשרת עובד גם בלי רשת.
ברקע הוא מנסה לרענן מהאתר החי (cache ל‑12 שעות ב‑tmp).
- מנוע הניתוב (
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
