21st.dev Magic

공식

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

GitHub

5.6k

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

21st.dev 카탈로그 검색 — search 도구로 필요한 내용을 설명하여 컴포넌트, 테마 또는 템플릿을 찾습니다.
프롬프트로 UI 컴포넌트 생성 — 설명과 일치하는 React 컴포넌트를 요청하고 generate를 통해 바로 사용 가능한 코드를 받습니다.
컴포넌트 영감 얻기 — get_inspiration으로 특정 사용 사례에 맞는 엄선된 컴포넌트 예제를 검색합니다.
회사 로고 조회 — search_logo를 사용하여 회사 이름으로 SVG 로고를 찾습니다(호출당 하나의 쿼리).
유료 코드 가져오기 — 플랫폼을 통해 구매한 프리미엄 컴포넌트에 접근합니다.

문서

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 환경 변수.

이전 도구 이름 → 새 도구 이름

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를 호출하면 전체 세트를 확인할 수 있습니다.

링크

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), 새 UI를 생성하도록 요청하세요(generate). 이전 /ui, /21 트리거 문구는 프로토콜이 아닌 레거시 도구 설명의 관례였습니다.