Magic MCP: 최신 UI 컴포넌트 생성을 위한 MCP 서비스

일반 소개

마법 MCP 21st.dev는 21st.dev 팀에서 개발한 AI 기반 도구로 프론트엔드 개발자를 위해 설계되었습니다. 자연어 설명에서 최신 UI 구성 요소를 즉시 생성하며 Cursor, WindSurf, VS Code(Cline 플러그인)와 같은 개발 환경에 통합되어 있습니다. 사용자가 "최신 탐색 모음 만들기"와 같은 간단한 요구 사항을 입력하면 Magic MCP가 이를 기반으로 최신 UI 구성 요소를 생성합니다. React 컴포넌트 코드에 테일윈드 CSS 스타일과 타입스크립트를 지원합니다. 이 도구는 완전한 오픈 소스이며 GitHub에서 호스팅되며 개발자가 무료로 사용할 수 있습니다. 신속한 프로토타이핑 또는 팀 개발을 위한 실시간 미리보기와 풍부한 컴포넌트 라이브러리를 제공합니다.

기능 목록

• 자연어 생성 컴포넌트: 요구 사항을 텍스트로 설명하고 React 컴포넌트 코드를 자동으로 생성합니다.
• 여러 IDE 지원커서, 윈드서프, VS 코드(클라인 베타)와 원활하게 통합.
• 최신 컴포넌트 라이브러리는 21st.dev에서 영감을 얻은 수많은 사용자 지정 가능한 구성 요소를 제공합니다.
• 실시간 미리보기컴포넌트 생성 시 효과를 즉시 확인하여 쉽게 디버깅할 수 있습니다.
• 타입스크립트 지원생성된 코드가 형식에 안전한지 확인하고 오류를 줄입니다.
• SVGL 통합컴포넌트에 직접 내장된 전문 브랜드 아이콘과 로고가 내장되어 있습니다.
• 구성 요소 개선 사항(곧 제공 예정)기존 컴포넌트에 고급 기능 및 애니메이션을 추가합니다.

도움말 사용

설치 프로세스

다음 예시와 같이 Magic MCP를 지원되는 IDE에 설치해야 합니다. 커서 예를 들어, 다른 IDE(예 윈드서핑 (또는 VS 코드 + 클라인)도 비슷하게 설치됩니다:

1. 환경 준비하기
   컴퓨터에 Magic MCP 실행의 기본이 되는 Node.js(최신 LTS 버전 권장, 예: v22)와 npm이 설치되어 있는지 확인합니다.
2. API 키 가져오기
   21st.dev 웹사이트를 방문하여 로그인한 후 'API' 페이지로 이동하여 새로운 TWENTY_FIRST_API_KEY. 키 없이도 사용해 볼 수 있지만 기능이 제한되어 있습니다.
3. Magic MCP 설치
   터미널을 열고 다음 명령을 실행합니다:

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"你的API密钥\"}"

최고 사령관(군) 你的API密钥 공식 웹사이트에서 얻은 키로 키를 교체합니다.

4. 커서 IDE 구성
   커서에서 설정을 열고 MCP(모델 컨텍스트 프로토콜) 옵션을 찾아 다음 구성을 추가합니다:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cursor"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

IDE를 저장하고 다시 시작합니다.

5. 설치 확인
   커서 채팅 창에 다음을 입력합니다. /ui"Magic MCP로 컴포넌트 만들기"라는 메시지가 표시되면 설치에 성공한 것입니다.

WindSurf 구성

존재 ~/.codeium/windsurf/mcp_config.json 추가합니다:

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

VS 코드 + 클라인 구성(베타)

존재 Cline 의 MCP 구성에 추가됩니다.

{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"],
"env": {"TWENTY_FIRST_API_KEY": "你的API密钥"}
}
}
}

주요 기능 사용 방법

UI 컴포넌트 생성

• 절차::
  1. IDE 채팅 창에서 다음을 입력합니다. /ui와 같은 요구 사항 뒤에 /ui 创建一个带搜索功能的导航栏.
  2. Magic MCP는 창에 바로 표시되는 React 컴포넌트 코드를 생성합니다.
  3. "코드 삽입"을 클릭하면 코드가 프로젝트 파일에 자동으로 추가됩니다.
• 자세한 설명::
  컴포넌트는 기본적으로 Tailwind CSS 스타일과 TypeScript를 사용하며, 코드는 수동으로 조정할 수 있습니다. 입력 설명이 구체적일수록 결과의 연관성이 높아집니다.
• 일반적인 예::
  입력:/ui 一个蓝色按钮
  출력:

  const BlueButton = () => {
  return (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
  点击我
  </button>
  );
  };
  export default BlueButton;
  

실시간 미리보기

• 절차::
  1. 컴포넌트를 생성한 후 IDE는 컴포넌트의 효과를 보여주는 미리보기 창을 표시합니다.
  2. 코드를 수정하면 미리보기가 자동으로 업데이트됩니다.
• 자세한 설명::
  로컬 프로젝트가 실행 중이 아닌 경우 미리보기는 Magic MCP의 기본 제공 렌더링에 의존하므로 실제 결과와 약간 다를 수 있습니다.

SVGL 아이콘 사용

• 절차::
  1. 가져오기 /logo 品牌名예 /logo Twitter.
  2. 이 도구는 SVG 또는 JSX 형식의 아이콘 코드를 반환합니다.
  3. 컴포넌트에서 사용하려면 복사합니다.
• 일반적인 예::
  입력:/logo GitHub
  출력:

  const GitHubIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
  <!-- GitHub SVG 路径 -->
  </svg>
  );
  

운영 프로세스 세부 정보

1. 프로젝트 시작
   프런트엔드 프로젝트가 생성되었는지 확인합니다(예: React 앱 만들기). magic MCP는 프로젝트 구조에 따라 코드를 생성합니다.
2. 입력 요구 사항
   IDE에서 "반응형 카드 목록"과 같은 자연어 설명을 사용합니다. 설명이 명확할수록 더 정확한 결과를 얻을 수 있습니다.
3. 조정 코드
   생성 후 코드를 확인하고 요구 사항을 충족하도록 스타일이나 로직을 수정하세요.
4. 운영 테스트
   코드를 저장하고 프로젝트를 실행합니다(예 npm start)를 클릭하여 효과를 확인합니다.

주의

• 한 달에 생성할 수 있는 세대 수가 제한되어 있으며, 한도를 초과한 후에는 유료 요금제를 업그레이드해야 합니다.
• 복잡한 구성 요소는 여러 개의 간단한 요구 사항 생성으로 분할하는 것이 좋습니다.
• Discord 커뮤니티에 가입하여 질문하세요.

애플리케이션 시나리오

1. 신속한 프로토타이핑
   개발자가 UI 효과를 보여줘야 할 때 Magic MCP는 컴포넌트를 빠르게 생성하여 시간을 절약합니다.
2. 팀 코드 재사용
   팀은 21st.dev를 통해 구성 요소를 공유하여 스타일을 표준화하고 효율성을 개선합니다.
3. 프런트엔드 기술 알아보기
   초보자는 이를 사용하여 표준 코드를 생성하고, 변경 사항을 학습하며, React를 빠르게 시작할 수 있습니다.

QA

1. Magic MCP는 무료인가요?
   예, 기본 기능은 무료로 제공되며 고급 기능을 사용하려면 API 키와 유료 요금제가 필요한 GitHub의 오픈 소스입니다.
2. 생성된 코드를 상업적으로 사용할 수 있나요?
   예, 코드는 사용자가 소유하며 모든 프로젝트에 사용할 수 있습니다.
3. 어떤 IDE가 지원되나요?
   현재 커서, 윈드서프, VS 코드(클라인 베타)를 지원하며, 향후 지원 범위가 확대될 수 있습니다.