چطور BoardUI را نصب کنیم تا ایجنت خودش کامپوننت بیاورد

با یک دستور، ۲۴ فایل سورس واقعی به پروژه‌ی خالی ری‌اکت اضافه می‌شود: ۱۸ فایل tsx، ۳ فایل css و ۳ فایل ts، به‌همراه ۶ وابستگی npm که خودش نصب می‌کند. در همین اجرا یک سرور MCP با ۱۳ ابزار برای ایجنت بالا آمد و یک اسکیل ۲۳۸۸ خطی در پوشه‌ی .claude/skills نشست. لحظه‌ی خواندن: ۲۷ سپتامبر ۲۰۲۶.

BoardUI چیست و اولین نصب: از پوشه‌ی خالی تا کامپوننت

BoardUI یک دیزاین‌سیستم ری‌اکت است که به‌جای نصب از رجیستری، کد سورس کامپوننت را داخل پروژه‌ی شما می‌نویسد. ریپوی گیت‌هاب آن در لحظه‌ی خواندن ۵۳۲ ستاره و ۵۶ فورک دارد و با مجوز MIT منتشر شده است [1][3]. تفاوت اصلی با یک کتابخانه‌ی معمولی در خط نصب نیست، جای دیگری است: هر کامپوننت با فایل خودش می‌آید و شما آن را ویرایش می‌کنید، نه این‌که نسخه‌ی گره‌خورده‌ای را کنترل کنید [4].

بخشی که این ریپو را از یک دیزاین‌سیستم معمولی جدا می‌کند، مسیر دوم ابزار است. علاوه بر خط فرمان، یک سرور MCP روی stdio دارد که ۱۳ ابزار منتشر می‌کند تا ایجنت خودش کامپوننت نصب کند [6]. موضوع این پست همین است: چه چیزی در اختیار ایجنت قرار می‌گیرد.

پیش‌نیاز فقط Node است. روی این ماشین node v26.7.0 نصب بود و همه‌ی اعداد این پست از همان اجرا بیرون آمده‌اند.

# یک پروژه‌ی خالی با package.json بساز؛ بدون آن، CLI نصب را متوقف می‌کند
$ mkdir demo && cd demo
$ printf '{"name":"demo","version":"1.0.0","private":true,"type":"module"}\n' > package.json
$ ls
package.json

# کل نصب در یک دستور: کامپوننت و وابستگی‌هایش
$ npx -y boardui@latest add data-table -y
warning: no "@/*" path alias found in tsconfig.json — BoardUI components import via "@/". Add:
  "compilerOptions": { "paths": { "@/*": ["./*"] } }
- Resolving components...
✔ Resolved 20 items: cx, avatar, theme, typography, globals, checkbox, chevrons, chip, use-dismiss-on-outside-press, dropdown, icon-button, input, button, pagination, segmented-control, select, status-dot, table, tooltip, data-table
  created utils/cx.ts
  created components/base/avatar/avatar.tsx
  created styles/theme.css
  created styles/typography.css
  created styles/globals.css
  created components/base/checkbox/checkbox-glyph.tsx
  created components/base/checkbox/checkbox.tsx
  created components/foundations/icons/chevrons.tsx
  created components/base/badges/chip.tsx
  created utils/use-dismiss-on-outside-press.ts
  created components/base/dropdown/dropdown.tsx
  created components/base/dropdown/menu-styles.ts
  created components/base/buttons/icon-button.tsx
  created components/base/buttons/button.tsx
  created components/base/input/hint-text.tsx
  created components/base/input/label.tsx
  created components/base/input/input.tsx
  created components/base/pagination/pagination.tsx
  created components/base/segmented-control/segmented-control.tsx
  created components/base/select/select.tsx
  created components/base/badges/status-dot.tsx
  created components/base/table/table.tsx
  created components/base/tooltip/tooltip.tsx
  created components/application/data-table/data-table.tsx
- Downloading 8 template assets...
✔ Downloaded 8 assets.
- Installing dependencies with npm...
✔ Dependencies installed.

Note: Tailwind was installed. Make sure a postcss.config.mjs loads @tailwindcss/postcss, or run npx boardui init to set the project up.

Note: import the BoardUI styles in your root layout or global css:
  import "@/styles/globals.css";

Done. 24 files written.

عدد ۲۰ در خط اول یعنی کامپوننتی که خواسته‌اید یکی است و نوزده تا وابستگی واقعی آن. اگر فقط data-table را می‌دیدید، فایل select.tsx یا pagination.tsx بی‌دلیل به نظر می‌رسید.

عدد ۲۴ هم با شمارش مستقیم پروژه می‌خواند: ۱۸ فایل tsx به‌اضافه‌ی ۳ فایل css و ۳ فایل ts. هشت فایل دیگر هم آمد که تصویر و دارایی است، پس روی دیسک ۳۲ فایل قرار گرفت.

آن هشدار اول درباره‌ی tsconfig.json را جدی بگیرید. ما این پروژه را با یک package.json خالی ساختیم و tsconfig.json ساخته نشد، در حالی که ۱۷ فایل از ۲۱ فایل سورس از مسیر @/ ایمپورت می‌کنند. بدون آن، بیلد شکست می‌خورد و پیام خطا علت را نمی‌گوید.

# نشماری مستقل: ۲۴ فایل سورس، ۲۶۴۹ خط tsx، ۸ دارایی webp
$ find . -name '*.tsx' | wc -l
18
$ find . -name '*.css' | wc -l
3
$ find . -name '*.ts' | wc -l
3
$ find . -name '*.webp' | wc -l
8
$ ls tsconfig.json postcss.config.mjs
ls: cannot access 'tsconfig.json': No such file or directory
ls: cannot access 'postcss.config.mjs': No such file or directory

شش وابستگی که خودش نصب کرد را از package.json بخوانید، نه از فهرست CLI. نسخه‌ها در زمان اجرا می‌توانند جلو بروند، پس عدد را از فایل خودتان نقل کنید [8].

مسیر دوم: سرور MCP و ۱۳ ابزاری که به ایجنت می‌دهد

این بخش دلیل اصلی انتخاب این ریپو است. سرور را بدون هیچ کلاینتی، با JSON-RPC خام بالا آوردیم تا فهرست ابزارها را ببینیم.

$ npx -y boardui@latest mcp
boardui mcp v0.5.6 ready (stdio)
{"jsonrpc":"2.0","id":1,"result":{"protocolVersion":"2024-11-05",
 "serverInfo":{"name":"boardui","version":"0.5.6"},
 "capabilities":{"tools":{"listChanged":true}}}}
{"jsonrpc":"2.0","id":2,"result":{"tools":[ ... 13 items ... ]}}

تعداد ۱۳ ابزار را خود پروتکل برگرداند، نه ما. فهرست کامل، دسته‌به‌دسته:

خروجی get_started مسیر درست را در سه شماره توضیح می‌دهد: اول init_boardui، بعد کشف با list_components و خواندن با get_component، و در آخر install_components. نکته‌ی عملی در همین متن آمده است: نام کامپوننت‌ها دقیق است و نباید حدس زده شود.

دو ابزار پایانی، این سرور را از یک سرور توصیف‌گر خواندنی جدا می‌کنند. install_rules قواعد طراحی را در AGENTS.md می‌نویسد و install_skill یک اسکیل کامل نصب می‌کند، یعنی قواعد از پایان نشست بیرون می‌مانند و به نشست بعدی می‌رسند [9].

قواعد و اسکیلی که خودش برای ایجنت می‌نویسد

## Color: semantic tokens only
- Never use raw palette classes (`text-gray-500`, `bg-white`, `border-neutral-200`)
  or hex/oklch literals. Every color rides a BoardUI semantic token, which also
  makes dark mode automatic.
- Text: `text-text-primary`, `text-text-secondary`, `text-text-tertiary`

## Typography: composite utilities only
- Never rebuild type by stacking `text-sm font-medium leading-5`

## Mechanics
- Merge classes with `cx()` from `@/utils/cx` (tailwind-merge aware of
  BoardUI's composite text styles). No string concatenation, no plain `clsx`.
- Icons come from `@remixicon/react`, passed as component references
  (`leadingIcon={RiAddLine}`), not rendered elements.

قاعده‌ی اول همان چیزی است که در بخش هزینه دوباره به آن برمی‌گردیم: رنگ خام در کامپوننت، حالت تیره و روشن را از هم جدا می‌کند.

قاعده‌ی تایپوگرافی جلوی یک اشتباه پرهزینه را می‌گیرد. ساختن تایپ با سه کلاس جدا، ارتفاع خط را از قاعده‌ی مقیاس بیرون می‌برد و فاصله‌ی خطوط را می‌شکند.

قاعده‌ی آیکن هم دقیق است: آیکن به‌صورت ارجاع کامپوننت پاس داده می‌شود، نه عنصر رندرشده. این تفاوت کوچک در ظاهر تعیین می‌کند که آیکن بتواند اندازه و رنگ ارثی بگیرد یا نه.

یک دستور دیگر، و ایجنت در نشست‌های بعدی یک مرجع کامل در اختیار دارد.

$ npx -y boardui@latest skill -f
- Fetching the BoardUI agent skill...
✔ Skill fetched (version 2026.9.21).
  created .claude/skills/boardui/SKILL.md
  created .claude/skills/boardui/references/components.md
  created .claude/skills/boardui/references/theming.md
  created .claude/skills/boardui/references/patterns.md
  created .claude/skills/boardui/references/motion.md

Done. Agents that support skills discover it automatically in new sessions.

پنج فایل، اما حجمشان یکسان نیست. اندازه‌ها را مستقیم از روی دیسک گرفتیم:

جمع این پنج فایل ۲۳۸۸ خط است. نسبت مهم‌تر از خود عدد است: یک فایل ۷۶ خطی و یک مرجع ۲۰۴۴ خطی. یعنی آنچه همیشه در زمینه است کوتاه نگه داشته شده و آنچه در زمینه نیست، در فایل مرجع می‌نشیند و فقط وقتی لازم شد خوانده می‌شود.

این دقیقاً همان چیزی است که در سرور MCP کروم دیدیم: یک ابزار خوب، ایجنت را به ابزارهای بیرونی وصل می‌کند، اما حجم دانشی که در زمینه‌ی ثابت می‌ریزد باید کم بماند.

اگر کلاینت شما اسکیل را از مسیر دیگری می‌خواند، پرچم --client مسیر ~/.agents/skills را می‌سازد. برای نصب سراسری هم --global هست.

هزینه، مرز کاربرد، و آنچه بررسی نکردم

بسته‌ی boardui در رجیستری npm در لحظه‌ی خواندن نسخه‌ی 0.5.6 است که ۱۷ سپتامبر ۲۰۲۶ بارگذاری شده و از زمان ساخته شدن ۱۷ نسخه دارد [8]. یعنی تقریباً هر چهار روز یک انتشار.

همین سرعت، هزینه‌ی پنهان این ابزار است. کدی که می‌نویسید متعلق به شماست، پس ارتقا دادن اجباری نیست، ولی کامپوننت‌هایی که می‌نویسند ممکن است با نسخه‌ی جدید کتابخانه‌ها ناسازگار شوند. هر ۱۷ نسخه یک شماره‌ی کوچک است و ممکن است رابطه‌ی کامپوننت‌ها را بشکند.

قبل از تصمیم، یک تست منفی طبق روش ارزیابی سرور MCP انجام دهید تا مطمئن شوید ابزار آن‌طور که ادعا می‌کند شکست می‌خورد.

این ریپو برای پروژه‌ای مناسب است که رابط کاربری جدی دارد و می‌خواهد چند ماه بدون بازنویسی کامپوننت‌ها جلو برود. برای یک اسکریپت کوچک یا یک صفحه‌ی تک‌کامپوننتی، ۲۴ فایل و شش وابستگی هزینه‌ی بیشتری از چیزی است که می‌خرید. قاعده‌ی عملی ساده است: اگر می‌خواهید ایجنت خودش کامپوننت نصب کند، این را بگیرید؛ اگر دستی کار می‌کنید، یک کتابخانه‌ی معمولی کم‌دردسرتر است.

آنچه نتوانستم بررسی کنم: بیلد واقعی پروژه. ما فایل‌ها را نصب کردیم و node_modules ساخته شد، ولی tsconfig.json و postcss.config.mjs را نساختیم، چون init را اجرا نکرده بودیم. بنابراین ادعای «این کامپوننت در مرورگر رندر می‌شود» در این پست وجود ندارد؛ ادعای ما فقط نصب و تولید فایل است. نسخه‌ی Pro و قیمت آن را هم بررسی نکردم، چون نیاز به مجوز دارد.

منابع

1. ریپوی BoardUI روی گیت‌هاب — کد سورس کامپوننت‌ها و نمونه‌ی چت روی کلید مدل خودتان
2. بسته‌ی boardui روی npm — صفحه‌ی بسته، وابستگی‌ها و تاریخچه‌ی نسخه‌ها
3. داده‌ی خام مخزن از API گیت‌هاب — ۵۳۲ ستاره، ۵۶ فورک، ساخته‌شده در ۱ سپتامبر ۲۰۲۶، آخرین push در ۵ سپتامبر
4. راهنمای ریپو — خط فرمان add و جدول کامپوننت‌ها
5. قواعد طراحی برای ایجنت — توکن‌های معنایی، تایپوگرافی و cx()
6. راهنمای CLI و سرور MCP — پرچم‌های add، init و skill
7. مجوز MIT — شرایط استفاده از کد و فونت‌ها
8. داده‌ی خام رجیستری npm — نسخه‌ی 0.5.6، ۱۷ نسخه، بارگذاری ۱۷ سپتامبر ۲۰۲۶
9. متن خام AGENTS.md — همان قواعد، بدون تبدیل صفحه
10. وب‌سایت BoardUI — فهرست کامپوننت‌ها و معرفی نسخه‌ی Pro