21st.dev Magic

Magic MCP → 21st MCP

Magic MCP kini menjadi 21st MCP. Server Magic MCP (@21st-dev/magic) telah digantikan oleh 21st MCP yang terpadu, 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 direset. Kunci yang diterbitkan oleh konsol Magic lama tidak lagi berfungsi di mana pun. Buat kunci baru di 21st.dev/mcp.

Apa 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 kini mereka terhubung ke server yang sama dengan 21st CLI, dengan alat yang tersedia untuk akun yang terautentikasi.

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

Akses AI

Akses komponen Builder tidak mengaktifkan 21st AI yang dihosting. Server mencantumkan generate dan iterate_generation hanya ketika akses AI diaktifkan. Periksa get_usage.aiGenerationEnabled; ini melaporkan akses, bukan sisa saldo kredit AI. Dengan AI nonaktif, gunakan search dan get_component, lalu sesuaikan kodenya dengan agen pengodean Anda sendiri. Draf yang ada tetap dapat dibaca.

Panggilan generasi yang di-cache atau lama dapat mengembalikan ai_subscription_required. Jangan mencoba lagi sampai AI diaktifkan. Segarkan daftar alat klien atau sambungkan kembali setelah mengaktifkan AI. Proksi meneruskan penemuan ke server, sehingga versi proksi yang ada menerima perilaku ini tanpa pembaruan npm.

server.json mencerminkan daftar registry resmi dev.21st/mcp. Versi registry tidak bergantung pada versi paket kompatibilitas ini.

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 mengekspos jauh lebih banyak daripada empat alat lama: pencarian katalog di seluruh komponen/tema/templat, pengambilan kode berbayar, penanda, pustaka tim, pembuatan UI dengan varian, manajemen profil, dan lainnya. Sambungkan dan panggil tools/list untuk melihat alat yang tersedia untuk akun Anda.

Pasang sebagai plugin

Repositori ini juga dikemas sebagai plugin agen (server MCP + keterampilan UI). Anda tidak perlu menunggu toko mana pun — repo ini ADALAH pasar, tambahkan langsung:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

Atur kunci API Anda di variabel API_KEY_21ST (kunci gratis di 21st.dev/mcp).

Daftar toko:

• Cursor / Grok Bot — pasang "21st" dari Cursor Marketplace, lalu atur API_KEY_21ST Anda di bawah Plugins → Configure. Dapatkan kunci di 21st.dev/mcp.
• Grok Build — grok plugin install 21st --trust (dari pasar xAI resmi), lalu ekspor API_KEY_21ST.
• Claude Code — repo ini membawa manifes .claude-plugin/: /plugin install dari pasar mana pun yang mencantumkan repo ini, atau muat secara lokal dengan claude --plugin-dir . dan ekspor API_KEY_21ST.

Konfigurasi plugin mengharapkan kunci API di variabel API_KEY_21ST di setiap klien.

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 buat komponen UI: https://21st.dev

FAQ

Mengapa Magic MCP lama saya berhenti berfungsi? Backend Magic (magic.21st.dev) digantikan oleh 21st MCP yang terpadu, dan semua kunci API lama direset 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 untuk beralih ke npx @21st-dev/cli@latest init.

Apakah /ui masih ada? Gunakan bahasa alami: minta agen Anda untuk mencari komponen di 21st (search), atau gunakan pembuatan UI yang dihosting (generate) saat AI diaktifkan. Frasa pemicu /ui, /21 lama adalah konvensi dari deskripsi alat lama, bukan protokolnya.