“21st-dev 매직” MCP 서버란 무엇을 하나요?

21st-dev 매직 MCP 서버는 개발자가 자연어 설명만으로 아름답고 현대적인 UI 컴포넌트를 즉시 생성할 수 있도록 설계된 AI 기반 플랫폼입니다. 이 서버는 AI 어시스턴트와 개발 환경 사이의 브릿지 역할을 하며, 원활한 UI 생성, 실시간 미리보기, 전문가용 브랜드 자산 및 로고 통합을 지원합니다. Cursor, Windsurf, VSCode, Cline 등 인기 IDE를 지원하여, 사용자가 원하는 UI를 자연어로 설명하면 매직 MCP 서버가 완성도 높고 커스터마이즈 가능한 컴포넌트를 프로젝트에 직접 생성·삽입합니다. 반복적인 UI 작업을 자동화하고 AI 기반 창의력을 개발 프로세스에 접목함으로써 개발 생산성 향상이 목표입니다.

프롬프트 목록

공개된 저장소 문서에는 별도의 프롬프트 템플릿이 명시되어 있지 않습니다.

리소스 목록

공개된 저장소 문서에는 별도의 리소스가 명시되어 있지 않습니다.

도구 목록

공개된 저장소 문서나 server.py(또는 동등 파일)에 별도의 도구가 명시되어 있지 않습니다.

이 MCP 서버의 주요 사용 사례

• AI 기반 UI 생성: 자연어로 설명만 하면 현대적인 UI 컴포넌트를 즉시 생성하여 보일러플레이트 작업 및 디자인 시간을 크게 절약합니다.
• 컴포넌트 고도화: 기존 UI 컴포넌트에 고급 기능과 애니메이션을 추가(곧 출시 예정)하여 반복 개발을 간소화합니다.
• 브랜드 자산 통합: 전문가용 브랜드 자산과 로고를 프론트엔드에 손쉽게 통합하여 디자인 일관성과 전문성을 유지할 수 있습니다.
• 실시간 미리보기: 컴포넌트가 생성되는 즉시 확인할 수 있어 빠른 프로토타이핑과 피드백 루프가 가능합니다.
• 멀티 IDE 지원: Cursor, Windsurf, VSCode, Cline 등 다양한 환경에서 동일한 AI UI 생성 워크플로우를 사용할 수 있어 일관된 개발 경험을 제공합니다.

설치 방법

Windsurf

1. 사전 조건: Node.js(최신 LTS) 설치
2. API 키 발급: 21st.dev 매직 콘솔에서 생성
3. 설정 파일 열기: ~/.codeium/windsurf/mcp_config.json 수정
4. 매직 MCP 서버 추가:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 변경사항 저장 후 Windsurf 재시작

API 키 보안 강화: 설정에서 환경변수를 사용하세요:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. 사전 조건: Node.js(최신 LTS) 설치
2. API 키 발급: 21st.dev 매직 콘솔에서 생성
3. 설정 파일 열기: ~/.claude/mcp_config.json 수정
4. 매직 MCP 서버 추가:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 변경사항 저장 후 Claude 재시작

API 키 보안 강화:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. 사전 조건: Node.js(최신 LTS) 설치
2. API 키 발급: 21st.dev 매직 콘솔에서 생성
3. 설정 파일 열기: ~/.cursor/mcp.json 수정
4. 매직 MCP 서버 추가:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 변경사항 저장 후 Cursor 재시작

API 키 보안 강화:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. 사전 조건: Node.js(최신 LTS) 설치
2. API 키 발급: 21st.dev 매직 콘솔에서 생성
3. 설정 파일 열기: ~/.cline/mcp_config.json 수정
4. 매직 MCP 서버 추가:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 변경사항 저장 후 Cline 재시작

API 키 보안 강화:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

플로우 내에서 MCP 사용하는 방법

FlowHunt에서 MCP 사용하기

FlowHunt 워크플로우에 MCP 서버를 통합하려면, 플로우에 MCP 컴포넌트를 추가하고 AI 에이전트와 연결하세요:

MCP 컴포넌트를 클릭하여 설정 패널을 엽니다. 시스템 MCP 설정 섹션에 아래와 같은 JSON 포맷으로 MCP 서버 정보를 입력하세요:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

설정이 완료되면 AI 에이전트가 이 MCP를 도구로 사용할 수 있게 되며, 모든 기능과 역량을 활용할 수 있습니다. "magic-mcp"는 실제 MCP 서버 이름으로, URL은 본인 MCP 서버의 URL로 변경해 주세요.

개요

Roots 지원은 저장소에 명시되어 있지 않습니다.

의견

21st-dev 매직 MCP 서버는 다양한 플랫폼에서의 설치와 설정 방법에 대한 문서가 매우 우수하고, 실질적인 사용 사례와 활발한 사용자 기반을 보유하고 있습니다. 다만, MCP 프롬프트·리소스·도구 및 Roots, 샘플링 등 고급 MCP 개념에 대한 명시적 문서가 부족해 고급 사용자와 통합자에게는 투명성이 다소 떨어질 수 있습니다.

MCP 점수

평가: 6/10

21st-dev 매직 MCP 서버는 사용성, 활성도, 설치 안내의 명확성에서 높은 점수를 받으나, 고급 기술 세부사항과 공개 문서 내 명시적 MCP 프리미티브 부족으로 일부 점수가 감점되었습니다.