21st.dev Magic — 말하면 UI 컴포넌트가 뚝딱
운영자
«가격표 카드 만들어 줘»처럼 말하면 21st.dev의 컴포넌트를 바탕으로 React UI를 만들어 줍니다.
21st.dev Magic 설치를 부탁해. 원본: https://21st.dev 설명: https://ddalkkak.ssemgong.com/p/21st-magic-mcp/raw 설치 명령: ``` claude mcp add --transport http 21st https://21st.dev/api/mcp -H "x-api-key: 내_API_키" ``` 순서 1. 원본 저장소의 README를 먼저 읽고, 위 명령이 지금도 맞는지 확인해. 2. 위 명령을 터미널에서 실행해. 내 운영체제에 맞지 않으면 README에 있는 방법으로 바꿔서 해. 3. 끝나면 설치됐는지 확인하는 명령(버전 확인 등)을 실행해 결과를 알려 줘. 4. API 키·로그인·유료 결제가 필요하면 멈추고 나에게 물어봐. 키를 만들거나 추측하지 마.
Claude Code·Codex 같은 AI 코딩 도구에 그대로 붙여 넣으면 원본을 확인하고 설치까지 해 줍니다.
이렇게 시켜 보세요
- «로그인 폼 컴포넌트 만들어 줘»
- «히어로 섹션 3가지 안 보여 줘»
꼭 알아 둘 점
21st.dev에서 API 키를 발급받아 위 명령의 내_API_키 자리에 넣어야 합니다. 키는 남에게 보이지 않게 하세요.
공식 안내는 npx @21st-dev/cli@latest init --client claude로 키 입력까지 한 번에 하는 방법도 제공합니다. 예전에 발급한 키가 동작하지 않으면 새로 발급하세요.
- 종류
- MCP
- 분류
- 디자인
- 만든 곳
- 21st.dev
- 원본
- 21st.dev