magic-mcp - GitLite

KO | EN

gitlite — search

#animation #monitoring #generative-ai #nodejs #mcp #rag #reactjs #large-language-models #http #claude-code

magic-mcp

(★ 5,703)

v0 같지만 Cursor / Claude Code / Windsurf에서 바로 사용하는 기능입니다. 10,000개 이상의 React/Tailwind 컴포넌트를 검색하고, AI로 새로운 UI를 생성하며, 나만의 컴포넌트를 퍼블리시할 수 있습니다. 이 모든 것이 에디터 안에서 가능합니다. Magic MCP가 이제 21st MCP가 되었습니다. 이 패키지는 기존 설정이 계속 작동하도록 유지해 줍니다. 설정 방법: 21st.dev/mcp

파일 탐색기

ZIP 다운로드

- index.ts
.gitignore
Dockerfile
llms-install.md
package-lock.json
package.json
README.md
smithery.yaml
tsconfig.json

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`npx`

설명 보기 ▼

이 명령은 `npm exec`의 별칭입니다.

tldr npm exec

자세한 내용은 원본 명령을 참고하세요:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> **Magic MCP가 21st MCP로 변경되었습니다.** 기존 Magic MCP 서버(`@21st-dev/magic`)는 통합된 **21st MCP**로 대체되었으며, **21st CLI**를 통해 설치할 수 있습니다. 설정은 [21st.dev/mcp](https://21st.dev/mcp)에서 가능합니다. 이 패키지는 기존 설정이 계속 작동하도록 얇은 호환성 프록시로 유지됩니다.

## 21st MCP 설치 (권장)

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

또는 수동으로 추가하세요. 일반적인 HTTP MCP 서버입니다:

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

[21st.dev/mcp](https://21st.dev/mcp)에서 API 키를 발급받으세요.

> **기존 Magic API 키가 초기화되었습니다.** 구형 Magic 콘솔에서 발급된 키는 더 이상 어디서도 작동하지 않습니다. [21st.dev/mcp](https://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` (호출당 하나의 쿼리) |

현재 서버는 기존의 4가지 도구보다 훨씬 더 많은 기능을 제공합니다. 컴포넌트/테마/템플릿 전반의 카탈로그 검색, 유료 코드 검색, 북마크, 팀 라이브러리, 변형을 포함한 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](https://21st.dev/mcp)에서 새 키로 업데이트하세요. 그러면 기존 `@21st-dev/magic` 설정이 이 호환성 프록시를 통해 다시 작동하게 됩니다. 단, `npx @21st-dev/cli@latest init`으로 전환하는 것을 권장합니다.

**`/ui`는 여전히 사용할 수 있나요?**
자연어를 사용하세요. 에이전트에게 21st에서 컴포넌트를 검색(`search`)하거나 새로운 UI를 생성(`generate`)해 달라고 요청하세요. 기존의 `/ui`, `/21` 트리거 문구는 프로토콜이 아니라 레거시 도구 설명의 관례였습니다.