2D

21st-dev/magic-mcp

开发工具官方

本页由 AI 翻译,技术细节请以原文为准。 查看原文

6323 stars 510 forks 质量 85 趋势 57ISC

它就像v0,但在你的光标/Claude代码/风帆冲浪中:搜索10,000+ React/Tailwind组件,用AI生成新UI,然后直接发布你自己的UI——直接从编辑器里发布。

概览

Magic Component Platform(MCP)是一款强大的AI驱动工具,帮助开发者通过自然语言描述即时创建美丽、现代化的UI组件。它与流行IDE无缝集成,为UI开发提供简化的工作流程。 - : 通过自然语言描述UI组件创建 - : - 光标IDE集成 - Windsurf支持- VSCode支持- VSCode + Cline集成(测试版) - : 访问大量受21世纪启发的预构建、可定制组件。

概述(AI 翻译)

Magic MCP 现为第 21 个 MCP。 Magic MCP 服务器(@21st-dev/magic)已被统一的 21st MCP 取代,通过 21st CLI 安装 — 21st.dev/mcp 年设置。该包仍作为瘦兼容代理发布,确保旧配置继续正常工作。

安装第21个MCP(推荐)

或者手动添加——它是一个普通的HTTP MCP服务器:

在 21st.dev/mcp 获取API密钥。

旧的Magic API密钥被重置了。 旧Magic控制台发出的密钥在任何地方都无法使用。在 21st.dev/mcp 时生成一个新的密钥。

这个包现在的功能(v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." 仍然可用:自 v0.2.0 起,它是一个小型 stdio 代理,将每个 MCP 消息转发到 21 个 MCP 服务器。现有引用 @21st-dev/magic 的条目仍然正常工作——但它们现在与 21 个 CLI 通信,使用认证账户可用的工具。

API密钥可接受所有历史形式:位置API_KEY="..."、--API_KEY=...、/API_KEY:...、-API_KEY ...或TWENTY_FIRST_API_KEY / API_KEY_21ST环境变量。

AI访问

构建者组件访问不启用托管的21世纪人工智能。

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

Magic MCP → 21st MCP

Magic MCP is now the 21st MCP. The Magic MCP server (@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.

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

Or add it manually — it is a plain HTTP MCP server:

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

Get an API key at 21st.dev/mcp.

Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.

What this package does now (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing mcp.json entries that reference @21st-dev/magic keep functioning — but they now speak to the same server as the 21st CLI, with the tools available to the authenticated account.

The API key is accepted in all the historical forms: positional API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., or the TWENTY_FIRST_API_KEY / API_KEY_21ST environment variables.

AI access

Builder component access does not enable hosted 21st AI. The server lists generate and iterate_generation only when AI access is enabled. Check get_usage.aiGenerationEnabled; this reports access, not the remaining AI credit balance. With AI off, use search and get_component, then adapt the code with your own coding agent. Existing drafts remain readable.

A cached or legacy generation call can return ai_subscription_required. Do not retry until AI is enabled. Refresh the client tool list or reconnect after enabling AI. The proxy forwards discovery to the server, so existing proxy versions receive this behavior without an npm update.

server.json mirrors the official dev.21st/mcp registry listing. The registry version is independent of this compatibility package version.

Old tool names → new tool names

The 21st MCP still accepts the legacy Magic tool names and translates them, so agents that remember the old names keep working. Prefer the new names:

Legacy Magic tool 21st MCP tool
21st_magic_component_builder generate
21st_magic_component_inspiration get_inspiration
21st_magic_component_refiner generate (new generation from the refinement prompt)
logo_search search_logo (one query per call)
在 GitHub 查看完整 README

安装

npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
新手?先看 mcpskill.org 教程 →

配置

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