21st.dev Magic

공식

최고의 21st.dev 디자인 엔지니어들에게 영감을 받아 정교한 UI 컴포넌트를 제작하세요.

GitHub

5.9k

이 MCP 사용해 보기스폰서

21st Dev Magic MCP(으)로 무엇을 할 수 있나요?

UI 컴포넌트 생성 — AI 접근이 활성화된 상태에서 generate를 사용하여 자연어 프롬프트로 변형을 생성하고, AI에게 새 컴포넌트 생성을 요청하세요.
컴포넌트 카탈로그 검색 — search를 사용하여 21st.dev에서 컴포넌트, 테마 또는 템플릿을 찾은 다음, get_component로 전체 코드를 가져오세요.
기존 디자인 개선 — 이전 초안 컨텍스트를 유지하면서 generate를 통해 개선 프롬프트로 새 생성을 요청하세요.
유료 코드 가져오기 — 계정에 유료 접근이 활성화된 경우 get_component를 통해 프리미엄 컴포넌트 코드를 요청하세요.
AI 접근 상태 확인 — 호스팅 생성을 시도하기 전에 get_usage를 쿼리하여 aiGenerationEnabled가 true인지 확인하세요.

문서

Magic MCP → 21st MCP

Magic MCP는 이제 21st MCP입니다. Magic MCP 서버(@21st-dev/magic)는 통합된 21st MCP로 대체되었으며, 21st CLI를 통해 설치됩니다 — 21st.dev/mcp에서 설정하세요. 이 패키지는 기존 설정이 계속 작동하도록 얇은 호환성 프록시로 게시된 상태입니다.

21st MCP 설치 (권장)

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

또는 수동으로 추가할 수 있습니다 — 일반 HTTP MCP 서버입니다:

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

21st.dev/mcp에서 API 키를 받으세요.

기존 Magic API 키는 재설정되었습니다. 기존 Magic 콘솔에서 발급된 키는 더 이상 어디서도 작동하지 않습니다. 21st.dev/mcp에서 새 키를 생성하세요.

이 패키지가 이제 하는 일 (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..."는 여전히 작동합니다: v0.2.0부터 모든 MCP 메시지를 21st MCP 서버로 전달하는 작은 stdio 프록시입니다. @21st-dev/magic를 참조하는 기존 mcp.json 항목은 계속 작동합니다 — 하지만 이제 21st CLI와 동일한 서버와 통신하며, 인증된 계정에 사용 가능한 도구를 사용할 수 있습니다.

API 키는 모든 기존 형식으로 허용됩니다: 위치 기반 API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., 또는 TWENTY_FIRST_API_KEY / API_KEY_21ST 환경 변수.

AI 접근

빌더 컴포넌트 접근은 호스팅된 21st AI를 활성화하지 않습니다. 서버는 AI 접근이 활성화된 경우에만 generate 및 iterate_generation를 나열합니다. get_usage.aiGenerationEnabled을 확인하세요; 이는 접근 여부를 보고하며, 남은 AI 크레딧 잔액을 보고하지 않습니다. AI가 꺼진 상태에서는 search 및 get_component를 사용한 다음, 자신의 코딩 에이전트로 코드를 조정하세요. 기존 초안은 계속 읽을 수 있습니다.

캐시되거나 레거시 생성 호출이 ai_subscription_required을 반환할 수 있습니다. AI가 활성화될 때까지 재시도하지 마세요. AI를 활성화한 후 클라이언트 도구 목록을 새로 고치거나 다시 연결하세요. 프록시는 검색을 서버로 전달하므로 기존 프록시 버전도 npm 업데이트 없이 이 동작을 받습니다.

server.json은 공식 dev.21st/mcp 레지스트리 목록을 반영합니다. 레지스트리 버전은 이 호환성 패키지 버전과 독립적입니다.

기존 도구 이름 → 새 도구 이름

21st MCP는 여전히 레거시 Magic 도구 이름을 수락하고 변환하므로, 기존 이름을 기억하는 에이전트도 계속 작동합니다. 새 이름을 선호하세요:

레거시 Magic 도구	21st MCP 도구
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate` (정제 프롬프트에서 새 생성)
`logo_search`	`search_logo` (호출당 하나의 쿼리)

현재 서버는 기존 네 가지 도구보다 훨씬 더 많은 것을 제공합니다: 컴포넌트/테마/템플릿 카탈로그 검색, 유료 코드 검색, 북마크, 팀 라이브러리, 변형이 있는 UI 생성, 프로필 관리 등. 연결하고 tools/list을 호출하여 계정에서 사용 가능한 도구를 확인하세요.

플러그인으로 설치

이 저장소는 에이전트 플러그인(MCP 서버 + UI 스킬)으로도 패키징되어 있습니다. 스토어를 기다릴 필요 없습니다 — 이 저장소 자체가 마켓플레이스이며, 직접 추가하세요:

# 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

API_KEY_21ST 변수에 API 키를 설정하세요 (21st.dev/mcp에서 무료 키 발급).

스토어 목록:

Cursor / Grok Bot — Cursor Marketplace에서 "21st"를 설치한 다음, Plugins → Configure에서 API_KEY_21ST을 설정하세요. 21st.dev/mcp에서 키를 받으세요.
Grok Build — grok plugin install 21st --trust (공식 xAI 마켓플레이스에서), 그런 다음 API_KEY_21ST을 내보내세요.
Claude Code — 저장소에는 .claude-plugin/ 매니페스트가 포함되어 있습니다: 이 저장소를 나열하는 모든 마켓플레이스에서 /plugin install하거나, claude --plugin-dir .로 로컬에서 로드하고 API_KEY_21ST을 내보내세요.

플러그인 구성은 모든 클라이언트에서 API_KEY_21ST 변수에 API 키가 있기를 기대합니다.

링크

21st MCP 설정 및 API 키: https://21st.dev/mcp
npm의 21st CLI: https://www.npmjs.com/package/@21st-dev/cli
21st.dev — UI 컴포넌트 발견, 게시 및 생성: https://21st.dev

FAQ

기존 Magic MCP가 왜 작동을 멈췄나요? Magic 백엔드(magic.21st.dev)는 통합된 21st MCP로 대체되었으며, 보안을 위해 모든 기존 API 키가 재설정되었습니다. 21st.dev/mcp에서 새 키로 업데이트하세요 — 기존 @21st-dev/magic 구성은 이 호환성 프록시를 통해 다시 작동하지만, npx @21st-dev/cli@latest init로 전환하는 것을 권장합니다.

/ui은 여전히 유효한가요? 자연어를 사용하세요: 에이전트에게 21st에서 컴포넌트를 검색하도록 요청하거나(search), AI가 활성화된 경우 호스팅된 UI 생성(generate)을 사용하세요. 기존 /ui, /21 트리거 문구는 레거시 도구 설명의 관례였으며, 프로토콜이 아닙니다.