21st.dev Magic

resmi

Buat komponen UI yang dirancang dengan terinspirasi dari para insinyur desain terbaik 21st.dev.

GitHub

5.6k

Apa yang bisa Anda lakukan dengan 21st Dev Magic MCP?

Cari di katalog 21st.dev — temukan komponen, tema, atau templat dengan mendeskripsikan apa yang Anda butuhkan menggunakan alat search.
Hasilkan komponen UI dari perintah — minta komponen React yang sesuai dengan deskripsi dan terima kode siap pakai melalui generate.
Dapatkan inspirasi komponen — ambil contoh komponen terkurasi untuk kasus penggunaan tertentu dengan get_inspiration.
Cari logo perusahaan — temukan logo SVG berdasarkan nama perusahaan menggunakan search_logo (satu kueri per panggilan).
Ambil kode berbayar — akses komponen premium yang telah Anda beli melalui platform.

Dokumentasi

Magic MCP → 21st MCP

Magic MCP kini menjadi 21st MCP. Server Magic MCP (@21st-dev/magic) telah digantikan oleh 21st MCP terpadu, yang dipasang melalui 21st CLI — pengaturan di 21st.dev/mcp. Paket ini tetap diterbitkan sebagai proksi kompatibilitas tipis agar konfigurasi lama tetap berfungsi.

Pasang 21st MCP (disarankan)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Atau tambahkan secara manual — ini adalah server MCP HTTP biasa:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Dapatkan kunci API di 21st.dev/mcp.

Kunci API Magic lama telah diatur ulang. Kunci yang diterbitkan oleh konsol Magic lama tidak lagi berfungsi di mana pun. Buat kunci baru di 21st.dev/mcp.

Yang dilakukan paket ini sekarang (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." masih berfungsi: sejak v0.2.0 ini adalah proksi stdio kecil yang meneruskan setiap pesan MCP ke server 21st MCP. Entri mcp.json yang ada yang merujuk ke @21st-dev/magic tetap berfungsi — tetapi sekarang mereka berbicara ke server yang sama dengan 21st CLI, dengan perangkat alat terkini yang lengkap.

Kunci API diterima dalam semua bentuk historis: posisional API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., atau variabel lingkungan TWENTY_FIRST_API_KEY / API_KEY_21ST.

Nama alat lama → nama alat baru

21st MCP masih menerima nama alat Magic lama dan menerjemahkannya, sehingga agen yang mengingat nama lama tetap berfungsi. Utamakan nama baru:

Alat Magic lama	Alat 21st MCP
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (generasi baru dari prompt penyempurnaan)
`logo_search`	`search_logo` (satu kueri per panggilan)

Server saat ini menyediakan lebih banyak dari empat alat lama: pencarian katalog di seluruh komponen/tema/templat, pengambilan kode berbayar, markah, pustaka tim, pembuatan UI dengan varian, manajemen profil, dan lainnya. Sambungkan dan panggil tools/list untuk melihat set lengkapnya.

Tautan

Pengaturan 21st MCP & kunci API: https://21st.dev/mcp
21st CLI di npm: https://www.npmjs.com/package/@21st-dev/cli
21st.dev — temukan, terbitkan, dan hasilkan komponen UI: https://21st.dev

Tanya Jawab

Mengapa Magic MCP lama saya berhenti bekerja? Backend Magic (magic.21st.dev) digantikan oleh 21st MCP terpadu, dan semua kunci API lama diatur ulang demi keamanan. Perbarui ke kunci baru dari 21st.dev/mcp — konfigurasi @21st-dev/magic Anda yang ada akan berfungsi kembali melalui proksi kompatibilitas ini, meskipun kami menyarankan beralih ke npx @21st-dev/cli@latest init.

Apakah /ui masih berlaku? Gunakan bahasa alami: minta agen Anda untuk mencari komponen di 21st (search), atau hasilkan UI baru (generate). Frasa pemicu /ui, /21 yang lama adalah konvensi dari deskripsi alat lama, bukan protokolnya.