Pendahuluan
Pernah nggak kamu merasa malas untuk browsing dokumentasi shadcn setiap kali mau cari komponen yang tepat? Atau kamu ingin install komponen tapi harus switching tabs terus? shadcn MCP Server adalah solusi yang kamu butuhkan.
MCP Server ini memungkinkan AI assistant seperti Claude, Cursor, atau VS Code untuk berinteraksi langsung dengan component registry shadcn. Kamu bisa browse, search, dan install komponen hanya dengan natural language. Tidak perlu buka dokumentasi atau terminal lagi.
Di artikel ini, kamu akan belajar cara setup shadcn MCP Server dari awal sampai bisa dipakai dengan AI assistant favoritmu.
Apa itu MCP Server?
MCP adalah singkatan dari Model Context Protocol. Bayangkan seperti jembatan yang menghubungkan AI assistant dengan external tools atau services. Dengan MCP, AI assistant bisa menggunakan tools yang bukan bagian dari kemampuannya sendiri.
Dalam kasus shadcn, MCP Server membuat shadcn component registry bisa diakses oleh AI assistant. Kamu bisa minta AI untuk:
- Menampilkan semua komponen yang tersedia
- Mencari komponen tertentu berdasarkan fungsi
- Menginstall komponen langsung ke projectmu
Ini bukan magic. MCP Server basically membuat API yang bisa dipanggil oleh AI assistant.
Kenapa shadcn MCP Server Berguna?
Alasan utama:
-
Workflow lebih cepat - Kamu tidak perlu switching antara dokumentasi, terminal, dan code editor. Cukup tanya AI dan dia akan handle semuanya.
-
Natural language interface - Kamu bisa bilang "Tambahkan button component" dan AI akan langsung menginstall-nya. Tidak perlu ingat command yang tepat.
-
Private registry support - Jika kamu punya internal component library, kamu bisa configure MCP untuk mengakses registry pribadimu juga. Bahkan bisa dengan authentication.
-
Multi-registry - MCP mendukung multiple registries sekaligus. Kamu bisa akses shadcn official registry dan private registry dalam waktu yang sama.
Setup shadcn MCP Server di Claude Code
Untuk menggunakan shadcn MCP Server dengan Claude Code, kamu perlu mengkonfigurasi beberapa hal.
Langkah 1: Install shadcn MCP Server
Jalankan perintah ini di project Next.js kamu:
1pnpm dlx shadcn@latest mcp init --client claudePerintah ini akan membuat shadcn MCP client di project kamu.
Langkah 2: Konfigurasi MCP di Claude Code
Setelah install, kamu perlu setup di Claude Code. Buka Settings > MCP Servers, lalu tambahkan server baru dengan konfigurasi seperti ini:
1{
2 "mcpServers": {
3 "shadcn": {
4 "command": "npx",
5 "args": ["shadcn@latest", "mcp"]
6 }
7 }
8}Langkah 3: Restart Claude Code
Setelah konfigurasi selesai, restart Claude Code agar perubahan diterapkan.
Langkah 4: Test Prompt
Coba gunakan prompt seperti ini untuk testing:
- "Show me all available components"
- "Add the button component to my project"
- "Find me a login form from the shadcn registry"
Kalau semuanya berjalan dengan baik, AI akan merespons dengan sesuai.
Konfigurasi untuk Editor Lain
shadcn MCP Server juga mendukung editor lain seperti Cursor, VS Code, dan Codex.
Cursor
Di Cursor, buka Settings > MCP Servers, lalu tambahkan server dengan config yang sama:
1{
2 "mcpServers": {
3 "shadcn": {
4 "command": "npx",
5 "args": ["shadcn@latest", "mcp"]
6 }
7 }
8}VS Code
Untuk VS Code, kamu perlu extension MCP. Install extension-nya dulu, lalu konfigurasi lewat settings.json:
1{
2 "mcpServers": {
3 "shadcn": {
4 "command": "npx",
5 "args": ["shadcn@latest", "mcp"]
6 }
7 }
8}Private Registry dengan Authentication
shadcn MCP Server juga mendukung private registry. Ini berguna jika kamu punya internal component library yang tidak bisa diakses publik.
Setup Private Registry
- Buka file components.json di projectmu
- Tambahkan konfigurasi registry pribadimu
- Untuk authentication, buat file .env.local dengan credentials yang diperlukan
Contoh konfigurasi:
1{
2 "registry": [
3 {
4 "name": "@acme/registry",
5 "url": "https://registry.acme.com",
6 "auth": "env:REGISTRY_AUTH_TOKEN"
7 }
8 ]
9}Dengan setup ini, MCP Server bisa akses registry pribadimu tanpa exposed credentials di kode.
Contoh Prompt yang Berguna
Berikut beberapa contoh prompt yang bisa kamu gunakan setelah setup MCP Server:
Browse dan Search
1"Find me a data table component with sorting functionality"
2"Show me available form components"
3"What components are available for navigation?"Install Component
1"Add the card component to my project"
2"Install dialog component with all its sub-components"
3"Add button component with my custom variant"Namespaced Registry
1"Show me components from @acme/registry"
2"Find login forms from my company registry"Tips dan Best Practice
1. Selalu Verify Sebelum Install
Meskipun AI bisa install komponen, selalu verify bahwa komponen yang diinstall sesuai dengan kebutuhanmu. Check props dan variants yang tersedia.
2. CustomizeSetelah Install
shadcn memberikanmu kontrol penuh terhadap kode. Setelah install, jangan ragu untuk customize komponen sesuai kebutuhan project.
3. Monitor Private Registry Access
Pastikan credentials untuk private registry aman. Jangan commit .env.local ke version control.
Kesimpulan
shadcn MCP Server membawa cara baru untuk berinteraksi dengan component registry. Dengan natural language, kamu bisa browse, search, dan install komponen tanpa ribet.
Hal yang perlu diingat:
- Setup cukup mudah dengan satu command
- Didukung oleh Claude Code, Cursor, VS Code, dan Codex
- Mendukung private registry dengan authentication
- workflow lebih cepat karena tidak perlu switching tabs
Coba implementasikan shadcn MCP Server di project kamu hari ini. workflow development akan jauh lebih smooth.
Reference: https://ui.shadcn.com/docs/mcp