# 21st.dev Magic — 말하면 UI 컴포넌트가 뚝딱

«가격표 카드 만들어 줘»처럼 말하면 21st.dev의 컴포넌트를 바탕으로 React UI를 만들어 줍니다.

- 종류: MCP · 분류: 디자인
- 원본: https://21st.dev

## 설치

```
claude mcp add --transport http 21st https://21st.dev/api/mcp -H "x-api-key: 내_API_키"
```

출처: 딸깍코드 https://ddalkkak.ssemgong.com/p/21st-magic-mcp

## 이렇게 시켜 보세요

- «로그인 폼 컴포넌트 만들어 줘»
- «히어로 섹션 3가지 안 보여 줘»

## 꼭 알아 둘 점

21st.dev에서 API 키를 발급받아 위 명령의 `내_API_키` 자리에 넣어야 합니다. 키는 남에게 보이지 않게 하세요.

공식 안내는 `npx @21st-dev/cli@latest init --client claude`로 키 입력까지 한 번에 하는 방법도 제공합니다. 예전에 발급한 키가 동작하지 않으면 새로 발급하세요.