الـ Registry مع الـ AI — الـ MCP والـ Open in v0

MCP — من غير أي شغل منك

الـ shadcn MCP server شغال مع أي registry متوافق على طول. مش محتاج تعمل حاجة مخصوصة في الـ registry.

الشرط الوحيد

• الـ MCP بيطلب الفهرس، فلازم يكون فيه ملف اسمه registry في الـ root بتاع الـ registry.
• مثال: لو الـ items على https://nile.dev/r/[name].json، يبقى الفهرس على https://nile.dev/r/registry.json، أو https://nile.dev/r/registry لو مش بتستخدم امتداد.
• الفهرس ده لازم يكون JSON ماشي على registry schema.

المستخدم بيعمل إيه؟

أولًا: يعرّف الـ registry في components.json:

{  "registries": {    "@nile": "https://nile.dev/r/{name}.json"  }}

ثانيًا: يضيف الـ MCP server حسب الأداة:

npx shadcn@latest mcp init --client claude     # وبعدها restart لـ Claude Codenpx shadcn@latest mcp init --client cursor     # وبعدها فعّل shadcn في Cursor Settingsnpx shadcn@latest mcp init --client vscode     # وبعدها افتح .vscode/mcp.json واضغط Startnpx shadcn@latest mcp init --client opencode   # وبعدها restart لـ OpenCode

[mcp_servers.shadcn]command = "npx"args = ["shadcn@latest", "mcp"]

• Codex مفيش له init، فبتضيف الـ config بإيدك وبعدها restart.
• في Claude Code تقدر تستخدم /mcp عشان تعمل debug للـ server.
• في VS Code الـ agent هو GitHub Copilot.

ثالثًا: يجرّب prompts زي دي:

• “وريني الـ components اللي في nile registry”
• “اعمل landing page من items الـ nile registry”

عشان الـ AI يستخدم الـ registry صح

1. descriptions واضحة: قصيرة وبتقول الـ item بيعمل إيه وبيتستخدم إزاي.
2. dependencies كاملة: عشان الـ MCP يسطّبها لوحده.
3. registryDependencies: عشان يفهم العلاقات بين الـ items.
4. أسماء kebab-case وثابتة على نفس الشكل في الـ registry كله.

Open in v0

لو الـ registry public وعلى URL، أي item يتفتح في v0 بالرابط ده:

https://v0.dev/chat/api/open?url=https://nile.dev/r/checkout-card.json

زرار “Open in v0”

import { Button } from "@/components/ui/button"export function OpenInV0Button({ url }: { url: string }) {  return (    <Button asChild aria-label="Open in v0" className="h-8 gap-1 bg-black px-3 text-xs text-white">      <a href={`https://v0.dev/chat/api/open?url=${url}`} target="_blank" rel="noreferrer">        Open in v0      </a>    </Button>  )}

<OpenInV0Button url="https://nile.dev/r/checkout-card.json" />

ولو عايز الشكل الرسمي بالـ logo، فيه صفحة Build your Open in v0 button.

الـ auth مع v0

v0 بيدعم query param بس:

https://registry.nile.dev/r/checkout-card.json?token=xxxxxxxx

1. السيرفر يقرا الـ token من الـ query.
2. يتحقق منه.
3. يرجّع 401 لو الـ token غلط أو مش موجود.
4. الـ CLI وv0 الاتنين بيفهموا الـ 401 ويعرضوا رسالة مناسبة.

خلّصت الفصل لما

• تعرف إن الـ MCP محتاج فهرس اسمه registry في الـ root
• تشغّل mcp init للـ client المناسب
• تضيف Codex بـ config.toml
• تكتب descriptions وdependencies تساعد الـ AI
• تفتح item في v0 بـ /chat/api/open?url=
• تعرف حدود v0: من غير cssVars وcss وenvVars وnamespaces
• تعمل auth لـ v0 بـ query token