Server MCP memungkinkan asisten AI berinteraksi dengan item di dalam registry. Anda bisa menelusuri komponen, block, varian, grafik, dan hook yang tersedia, mencari yang spesifik, dan memasangnya langsung ke project — cukup lewat bahasa sehari-hari.

Server ini ikut di dalam CLI kliping (npx kliping@latest mcp). Contohnya, Anda bisa meminta asisten AI: "Bangun halaman landing memakai block hero dari registry Kliping" atau "Carikan form login dari registry Kliping".

Registry @kliping sudah tertanam di CLI. Registry lain diatur di berkas components.json project Anda.

Server ini turunan server MCP CLI shadcn-vue (MIT) — lihat Credits.

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}

Gratis, tanpa akun

Server MCP Kliping berjalan di komputer Anda, dijalankan oleh editor atau agen Anda sendiri, dan hanya membaca berkas statis di https://kliping.pro/r. Tidak ada login, kunci API, atau variabel lingkungan untuk Kliping. Model AI-nya (Claude, GPT, …) adalah langganan Anda sendiri — Kliping tidak memanggil model apa pun dan tidak memungut biaya.

---

Mulai Cepat

Pilih klien MCP yang Anda pakai, lalu ikuti langkah pengaturan server MCP-nya. Kalau Anda ingin mengaturnya sendiri secara manual, lihat bagian Konfigurasi.

Jalankan perintah berikut di project Anda:

pnpm dlx kliping@latest mcp init --client claude

Mulai ulang Claude Code, lalu coba perintah berikut:

• Tunjukkan semua block hero yang tersedia di registry Kliping
• Tambahkan komponen button, dialog, dan card ke project saya
• Buatkan form kontak memakai komponen dari registry Kliping

Catatan: perintah /mcp di Claude Code bisa Anda pakai untuk men-debug server MCP-nya.

---

Apa Itu MCP?

Model Context Protocol (MCP) adalah protokol terbuka yang memungkinkan asisten AI terhubung secara aman ke sumber data dan tool di luar dirinya. Lewat server MCP ini, asisten AI Anda mendapat akses langsung untuk:

• Menelusuri komponen — melihat semua komponen, block, dan template yang tersedia di registry mana pun yang sudah diatur.
• Mencari lintas registry — menemukan item tertentu berdasarkan nama atau fungsinya di beberapa sumber sekaligus.
• Memasang lewat bahasa sehari-hari — menambahkan komponen cukup dengan kalimat biasa, misalnya "tambahkan form login".
• Mendukung banyak registry — mengakses registry publik, pustaka internal perusahaan, maupun sumber pihak ketiga.

---

Cara Kerjanya

Contoh: di chat agen Anda (Claude Code, Cursor, Copilot, …) Anda mengetik "Buatkan halaman dashboard dari komponen Kliping".

1. Agen mencari di katalog Kliping — lewat alat MCP search_items_in_registries ("dashboard", "sidebar", "chart", "table"). Hasilnya nama item, keterangannya, dan perintah pasangnya.
2. Agen memilih dan membaca — view_items_in_registries menunjukkan isi berkas tiap kandidat (misalnya dashboard-01, sidebar-07, stats-01, chart-area-interactive), get_item_examples_from_registries memberi contoh pemakaiannya.
3. Agen memasang — ia menjalankan npx kliping@latest add dashboard-01 stats-01 … di terminal project Anda (biasanya setelah Anda izinkan). Kode sumbernya masuk ke components/ project Anda — milik Anda, bukan paket tertutup.
4. Agen merakit halaman — menulis halaman yang memakai block tadi (atau add … --page src/DashboardPage.vue), menyambung rute bila ada beberapa halaman, dan mengganti teks contohnya sesuai permintaan Anda.
5. Anda menjalankan npm run dev dan melihat hasilnya; minta perubahan lewat chat yang sama.

Yang perlu diketahui:

• Front-end saja. Block membawa data contoh (angka, nama, grafik). Menyambungkannya ke API atau database Anda adalah langkah berikutnya — minta agen melakukannya di project Anda.
• Bahan kurasi, bukan UI acak. Varian (gaya siap pakai satu komponen) → block (satu section halaman) → halaman (block yang ditumpuk). Agen menyusun dari tingkat yang sudah ada, jadi hasilnya konsisten dengan tema Anda.
• Susun manual juga bisa — di Builder Anda menumpuk block dengan seret-lepas lalu menyalin satu perintah yang sama.

---

Tanpa MCP: llms.txt

Agen yang tidak mendukung MCP (misalnya chat di peramban) bisa membaca https://kliping.pro/llms.txt: satu berkas teks berisi cara memasang dan seluruh item registry — komponen, block per kategori, varian per komponen, grafik, dan hook — beserta keterangan dan tautan JSON-nya. Tempelkan tautannya di chat, misalnya: "Baca https://kliping.pro/llms.txt, lalu buatkan halaman harga memakai block Kliping." Berkasnya disusun ulang setiap kali situs dibangun, jadi selalu sama dengan registry.

---

Registry yang Didukung

Server MCP ini langsung bisa dipakai dengan registry mana pun yang kompatibel.

• Registry bawaan — @kliping, berisi seluruh komponen, block, varian, grafik, dan hook Kliping.
• Registry pihak ketiga — registry mana pun yang mengikuti spesifikasi registry shadcn.
• Registry privat — pustaka komponen internal perusahaan Anda.
• Registry ber-namespace — beberapa registry sekaligus, diatur lewat sintaks @namespace.

---

Konfigurasi

Klien MCP mana pun bisa Anda pakai untuk berinteraksi dengan server ini. Berikut langkahnya untuk yang paling populer.

Claude Code

Untuk memakai server MCP ini di Claude Code, tambahkan konfigurasi berikut ke berkas .mcp.json project Anda:

{
  "mcpServers": {
    "kliping": {
      "command": "npx",
      "args": ["kliping@latest", "mcp"]
    }
  }
}

Setelah konfigurasinya ditambahkan, mulai ulang Claude Code lalu jalankan /mcp untuk melihat server-nya di daftar. Kalau statusnya Connected, berarti sudah siap.

Detail selengkapnya ada di dokumentasi MCP Claude Code.

Cursor

Untuk mengatur MCP di Cursor, tambahkan server-nya ke berkas konfigurasi .cursor/mcp.json project Anda:

{
  "mcpServers": {
    "kliping": {
      "command": "npx",
      "args": ["kliping@latest", "mcp"]
    }
  }
}

Setelah konfigurasinya ditambahkan, aktifkan server MCP-nya lewat Cursor Settings.

Begitu aktif, akan muncul titik hijau di samping nama server-nya pada daftar server MCP, beserta daftar tool yang tersedia.

Detail selengkapnya ada di dokumentasi MCP Cursor.

VS Code

Untuk mengatur MCP di VS Code bersama GitHub Copilot, tambahkan server-nya ke berkas konfigurasi .vscode/mcp.json project Anda:

{
  "servers": {
    "kliping": {
      "command": "npx",
      "args": ["kliping@latest", "mcp"]
    }
  }
}

Setelah konfigurasinya ditambahkan, buka .vscode/mcp.json lalu klik Start di samping nama server-nya.

Detail selengkapnya ada di dokumentasi MCP VS Code.

Codex

Catatan: CLI kliping tidak memperbarui ~/.codex/config.toml secara otomatis. Konfigurasinya perlu Anda tambahkan sendiri.

Untuk mengatur MCP di Codex, tambahkan server-nya ke ~/.codex/config.toml:

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

Setelah konfigurasinya ditambahkan, mulai ulang Codex supaya server MCP-nya termuat.

Opencode

Untuk mengatur MCP di opencode, tambahkan server-nya ke opencode.json:

{
    "$schema": "https://opencode.ai/config.json",
    "mcp": {
        "kliping": {
            "type": "local",
            "enabled": true,
            "command": ["npx", "kliping@latest", "mcp"]
        }
    }
}

Detail selengkapnya ada di dokumentasi Opencode.

---

Mengatur Registry

Server MCP mendukung banyak registry sekaligus lewat konfigurasi components.json di project Anda. Dengan begitu Anda bisa mengambil komponen dari berbagai sumber, termasuk registry privat dan penyedia pihak ketiga.

Daftarkan registry tambahan di components.json Anda:

{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

Catatan: untuk mengakses registry @kliping, tidak perlu konfigurasi apa pun.

---

Autentikasi

Untuk registry privat yang butuh autentikasi, isi variabel lingkungannya di .env.local:

REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here

Keterangan lengkap soal autentikasi registry ada di dokumentasi Autentikasi.

---

Contoh Perintah

Setelah server MCP-nya diatur, Anda bisa berinteraksi dengan registry memakai bahasa sehari-hari. Coba salah satu perintah berikut:

Menelusuri & Mencari

• Tunjukkan semua komponen yang tersedia di registry Kliping
• Carikan form login dari registry Kliping

Menyusun Halaman

• Buatkan halaman dashboard dengan sidebar, kartu statistik, dan grafik dari Kliping
• Susun landing page: navbar, hero, fitur, harga, FAQ, footer — pakai block Kliping
• Tambahkan halaman login dan register memakai block authentication Kliping

Memasang Item

• Tambahkan komponen button ke project saya
• Buatkan form login memakai komponen Kliping
• Pasang aturan Cursor dari registry acme

Bekerja dengan Namespace

• Tunjukkan komponen dari registry acme
• Pasang @internal/auth-form
• Bangunkan halaman landing memakai section hero, features, dan testimonials dari registry acme

---

Mengatasi Masalah

MCP Tidak Merespons

Kalau server MCP tidak merespons perintah Anda:

1. Periksa konfigurasi — pastikan server MCP sudah diatur dengan benar dan aktif di klien MCP Anda.
2. Mulai ulang klien MCP — setiap kali konfigurasinya berubah, mulai ulang kliennya.
3. Pastikan sudah terpasang — mcp init memasang paket kliping sebagai devDependency; cek bahwa paket itu benar-benar ada di project Anda.
4. Periksa jaringan — pastikan registry yang diatur memang bisa Anda akses.

Masalah Akses Registry

Kalau komponen tidak termuat dari registry:

1. Periksa components.json — pastikan URL registry-nya sudah benar.
2. Uji autentikasi — pastikan variabel lingkungan untuk registry privat sudah terisi.
3. Cek registry-nya — pastikan registry itu memang online dan bisa dijangkau.
4. Periksa namespace — pastikan sintaksnya benar (@namespace/komponen).

Pemasangan Gagal

Kalau komponen gagal dipasang:

1. Periksa penyiapan project — pastikan berkas components.json Anda sah.
2. Cek path-nya — pastikan folder tujuannya memang ada.
3. Periksa izin akses — pastikan folder komponennya bisa ditulisi.
4. Tinjau dependency — pastikan semua dependency yang dibutuhkan sudah terpasang.

Tool atau Prompt Tidak Muncul

Kalau muncul pesan No tools or prompts, coba langkah berikut:

1. Bersihkan cache npx — jalankan npx clear-npx-cache.
2. Aktifkan ulang server MCP — coba nonaktifkan lalu aktifkan lagi di klien MCP Anda.
3. Periksa log — di Cursor, log-nya bisa dilihat lewat View → Output, lalu pilih MCP: project-* di dropdown-nya.

---

Bacaan Lanjutan

• Dokumentasi Registry — panduan lengkap soal registry
• CLI — perintah mcp dan mcp init
• Autentikasi — mengamankan registry privat Anda
• Spesifikasi MCP — mengenal Model Context Protocol