It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp

Magic MCP → 21st MCP (호환성 프록시)

개요 – 기존 Magic MCP 서버를 바로 대체할 수 있는 소형 npm 패키지 (@21st-dev/magic-mcp)입니다. 모든 MCP (Multi-Component Protocol) 요청을 새로운 21st MCP 서비스로 전달하여, 새로운 21st CLI로 마이그레이션하는 동안 기존 설정을 그대로 사용할 수 있게 해줍니다.

작동 방식

이 패키지는 stdio proxy입니다. npx @21st-dev/magic@latest API_KEY="…"를 실행하면 JSON-RPC-like MCP 메시지를 https://21st.dev/api/mcp로 파이프합니다.
API 키를 제공하는 기존 방식(위치 인자, --API_KEY=, /API_KEY:, -API_KEY, 또는 환경 변수 TWENTY_FIRST_API_KEY / API_KEY_21ST)을 지원합니다.
연결되는 서버는 21st CLI가 사용하는 것과 동일하므로, 이전에 호출할 수 있었던 모든 도구(generate, iterate_generation, search 등)를 새로운 이름으로 여전히 사용할 수 있습니다.

시작하기

# 권장 사항 – CLI를 통해 전체 21st MCP를 설치합니다
npx @21st-dev/cli@latest init --client cursor   # or claude | vscode | windsurf | codex

프록시만 필요한 경우:

# 프록시만 설치
npx -y @21st-dev/magic@latest API_KEY="YOUR_21ST_API_KEY"

또는 mcp.json 설정에 서버를 수동으로 추가합니다:

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

참고: 기존 Magic API 키는 더 이상 작동하지 않습니다. https://21st.dev/mcp에서 새 키를 생성하세요.

AI 액세스

계정이 AI 생성 기능을 활성화(get_usage.aiGenerationEnabled)한 경우에만 서버가 generate 및 iterate_generation 도구를 목록에 표시합니다.
AI 없이도 search, get_component 등을 사용할 수 있으며, 반환된 초안에 대해 직접 코딩 에이전트를 실행할 수 있습니다.
유료 AI 구독이 필요한 호출은 ai_subscription_required를 반환합니다. AI 기능이 활성화될 때까지 기다린 후 다시 시도하십시오.

레거시 도구 이름 매핑

레거시 Magic 도구	21st MCP 도구
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (refine)
`logo_search`	`search_logo`

프록시가 이전 이름을 자동으로 번역하므로, 기존 에이전트가 계속 작동합니다.

플러그인으로 사용하기

이 저장소는 여러 AI 어시스턴트 플랫폼용 플러그인 매니페스트를 제공합니다:

Claude Code – claude plugin marketplace add 21st-dev/magic-mcp 실행 후 /plugin install 21st
Grok Build – grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust
Cursor – Cursor Marketplace에서

21st-dev/magic-mcp