21st.dev Magic

Magic MCP → 21st MCP

Magic MCP hiện là 21st MCP. Máy chủ Magic MCP (@21st-dev/magic) đã được thay thế bởi 21st MCP hợp nhất, được cài đặt qua 21st CLI — thiết lập tại 21st.dev/mcp. Gói này vẫn được xuất bản như một proxy tương thích mỏng để các cấu hình cũ tiếp tục hoạt động.

Cài đặt 21st MCP (khuyến nghị)

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

Hoặc thêm thủ công — đây là một máy chủ MCP HTTP đơn giản:

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

Lấy khóa API tại 21st.dev/mcp.

Khóa API Magic cũ đã bị đặt lại. Các khóa do bảng điều khiển Magic cũ cấp không còn hoạt động ở bất kỳ đâu. Hãy tạo khóa mới tại 21st.dev/mcp.

Gói này hiện làm gì (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." vẫn hoạt động: kể từ v0.2.0, nó là một proxy stdio nhỏ chuyển tiếp mọi thông điệp MCP đến máy chủ 21st MCP. Các mục mcp.json hiện có tham chiếu đến @21st-dev/magic vẫn tiếp tục hoạt động — nhưng giờ chúng kết nối đến cùng máy chủ với 21st CLI, với các công cụ khả dụng cho tài khoản đã xác thực.

Khóa API được chấp nhận ở mọi dạng lịch sử: API_KEY="..." theo vị trí, --API_KEY=..., /API_KEY:..., -API_KEY ..., hoặc các biến môi trường TWENTY_FIRST_API_KEY / API_KEY_21ST.

Truy cập AI

Quyền truy cập thành phần Builder không kích hoạt 21st AI lưu trữ. Máy chủ liệt kê generate và iterate_generation chỉ khi quyền truy cập AI được bật. Kiểm tra get_usage.aiGenerationEnabled; mục này báo cáo quyền truy cập, không phải số dư tín dụng AI còn lại. Khi AI tắt, hãy sử dụng search và get_component, sau đó điều chỉnh mã bằng tác nhân mã của riêng bạn. Các bản nháp hiện có vẫn đọc được.

Một lệnh gọi tạo bộ nhớ đệm hoặc kế thừa có thể trả về ai_subscription_required. Đừng thử lại cho đến khi AI được bật. Làm mới danh sách công cụ của máy khách hoặc kết nối lại sau khi bật AI. Proxy chuyển tiếp khám phá đến máy chủ, vì vậy các phiên bản proxy hiện có nhận được hành vi này mà không cần cập nhật npm.

server.json phản ánh danh sách đăng ký dev.21st/mcp chính thức. Phiên bản đăng ký độc lập với phiên bản gói tương thích này.

Tên công cụ cũ → tên công cụ mới

21st MCP vẫn chấp nhận các tên công cụ Magic kế thừa và dịch chúng, vì vậy các tác nhân nhớ tên cũ vẫn hoạt động. Ưu tiên các tên mới:

Công cụ Magic kế thừa	Công cụ 21st MCP
21st_magic_component_builder	generate
21st_magic_component_inspiration	get_inspiration
21st_magic_component_refiner	generate (tạo mới từ lời nhắc tinh chỉnh)
logo_search	search_logo (một truy vấn mỗi lần gọi)

Máy chủ hiện tại cung cấp nhiều hơn bốn công cụ cũ: tìm kiếm danh mục trên các thành phần/chủ đề/mẫu, truy xuất mã trả phí, dấu trang, thư viện nhóm, tạo UI với biến thể, quản lý hồ sơ, và nhiều hơn nữa. Kết nối và gọi tools/list để xem các công cụ khả dụng cho tài khoản của bạn.

Cài đặt như một plugin

Kho lưu trữ này cũng được đóng gói như một plugin tác nhân (máy chủ MCP + kỹ năng UI). Bạn không cần chờ bất kỳ cửa hàng nào — kho lưu trữ này CHÍNH LÀ một thị trường, thêm trực tiếp:

# 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

Đặt khóa API của bạn trong biến API_KEY_21ST (khóa miễn phí tại 21st.dev/mcp).

Danh sách cửa hàng:

• Cursor / Grok Bot — cài đặt "21st" từ Cursor Marketplace, sau đó đặt API_KEY_21ST của bạn trong Plugins → Configure. Lấy khóa tại 21st.dev/mcp.
• Grok Build — grok plugin install 21st --trust (từ xAI marketplace chính thức), sau đó xuất API_KEY_21ST.
• Claude Code — kho lưu trữ mang tệp kê khai .claude-plugin/: /plugin install nó từ bất kỳ thị trường nào liệt kê kho lưu trữ này, hoặc tải cục bộ bằng claude --plugin-dir . và xuất API_KEY_21ST.

Cấu hình plugin mong đợi khóa API trong biến API_KEY_21ST trong mọi máy khách.

Liên kết

• Thiết lập 21st MCP & khóa API: https://21st.dev/mcp
• 21st CLI trên npm: https://www.npmjs.com/package/@21st-dev/cli
• 21st.dev — khám phá, xuất bản và tạo thành phần UI: https://21st.dev

Câu hỏi thường gặp

Tại sao Magic MCP cũ của tôi ngừng hoạt động? Phần phụ trợ Magic (magic.21st.dev) đã được thay thế bởi 21st MCP hợp nhất, và tất cả khóa API cũ đã bị đặt lại vì lý do bảo mật. Cập nhật khóa mới từ 21st.dev/mcp — cấu hình @21st-dev/magic hiện có của bạn sẽ hoạt động lại qua proxy tương thích này, mặc dù chúng tôi khuyến nghị chuyển sang npx @21st-dev/cli@latest init.

/ui có còn tồn tại không? Sử dụng ngôn ngữ tự nhiên: yêu cầu tác nhân của bạn tìm kiếm 21st cho các thành phần (search), hoặc sử dụng tạo UI lưu trữ (generate) khi AI được bật. Các cụm từ kích hoạt /ui, /21 cũ là quy ước của mô tả công cụ kế thừa, không phải giao thức.