본문 바로가기
← MCP·스킬 라이브러리
MCP디자인·이미지

21st.dev Magic

UI 컴포넌트를 만들어 줍니다. 화면 조각을 대화로 뽑습니다.

제공 21st.dev라이선스 MIT갱신 2026년 9월 21일
★ 5,903포크 458마지막 커밋 2026년 9월 9일21st-dev/magic-mcp 기준

설치하기

원격 서버라 설치할 게 없습니다. Claude Desktop은 버전에 따라 원격 연결 지원이 다릅니다. API 키는 https://21st.dev 에서 발급합니다. 설정 파일 — macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json. 저장한 뒤 Claude Desktop을 완전히 종료했다 다시 켜야 반영됩니다.

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "여기에 API 키" }
    }
  }
}

채워야 하는 값

키설명필수
x-api-key21st.dev API 키필수

설치와 실행은 사용자 환경에서 이뤄집니다. team-ai는 이 도구를 호스팅하거나 대신 실행하지 않습니다. 제공처와 저장소를 확인한 뒤 설치하세요.

설명

설명을 주면 React 컴포넌트를 만들어 코드로 넣어 줍니다. 랜딩 섹션, 카드, 폼 같은 조각을 빠르게 만들 때 씁니다.

변경 이력

  • 2026년 9월 21일라이브러리에 등록
21st.dev Magic — MCP 서버 설치 가이드 | team-ai