21st.dev Magic

chính thức

Tạo các thành phần UI tinh tế lấy cảm hứng từ những kỹ sư thiết kế hàng đầu của 21st.dev.

GitHub

5.6k

Bạn có thể làm gì với 21st Dev Magic MCP?

Tìm kiếm danh mục 21st.dev — tìm component, chủ đề hoặc mẫu bằng cách mô tả nhu cầu của bạn với công cụ search.
Tạo component UI từ lời nhắc — yêu cầu một component React phù hợp với mô tả và nhận mã sẵn sàng sử dụng qua generate.
Lấy cảm hứng component — truy xuất các ví dụ component đã được tuyển chọn cho một trường hợp sử dụng cụ thể bằng get_inspiration.
Tra cứu logo công ty — tìm logo SVG theo tên công ty bằng search_logo (một truy vấn mỗi lần gọi).
Truy xuất mã trả phí — truy cập các component cao cấp bạn đã mua qua nền tảng.

Tài liệu

Magic MCP → 21st MCP

Magic MCP hiện là 21st MCP. Máy chủ Magic MCP (@21st-dev/magic) đã được thay thế bằng 21st MCP hợp nhất, 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 dưới dạng 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áy chủ MCP HTTP thuần túy:

{
  "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.

Các khóa API Magic cũ đã được đặt lại. Khóa do bảng điều khiển Magic cũ cấp không còn hoạt động ở bất kỳ đâu. 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: 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 giao tiếp với cùng máy chủ như 21st CLI, với bộ công cụ hiện tại đầy đủ.

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

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

21st MCP vẫn chấp nhận tên công cụ Magic cũ và dịch chúng, để các tác nhân ghi nhớ tên cũ vẫn hoạt động. Nên dùng tên mới:

Công cụ Magic cũ	Công cụ 21st MCP
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (thế hệ 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 qua 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.v. Kết nối và gọi tools/list để xem bộ đầy đủ.

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? Backend Magic (magic.21st.dev) đã được thay thế bởi 21st MCP hợp nhất, và tất cả khóa API cũ đã được đặ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 trở lại qua proxy tương thích này, mặc dù chúng tôi khuyên bạn nên chuyển sang npx @21st-dev/cli@latest init.

/ui còn dùng 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 để lấy thành phần (search), hoặc tạo UI mới (generate). Các cụm từ kích hoạt /ui, /21 cũ là quy ước từ mô tả công cụ cũ, không phải giao thức.