Install
npx ai-elements@latest누구에게 맞나
이 가이드는 shadcn/ui 위에서 AI 네이티브 앱 인터페이스를 더 빨리 만들려는 프론트엔드 개발자를 위한 것이다. 공식 문장은 AI Elements를 shadcn/ui 위의 컴포넌트 라이브러리로 적는다.
시작 전에 다음을 동시에 만족해야 한다: Node.js 18 or later; AI SDK가 설치된 기존 Next.js 프로젝트; 프로젝트에 shadcn/ui가 이미 초기화되어 있음(페이지는 npx shadcn@latest init을 적음). Tailwind CSS도 설정되어 있어야 하며, AI Elements는 CSS Variables mode만 지원한다. 하나라도 없으면 설치를 실행하지 마라.
이는 컴포넌트 설치이지 Agent 마켓 플러그인이 아니다. npx ai-elements@latest를 나타나지 않은 IDE 플러그인으로 일반화하지 마라.
3분 안에 첫 시도 완료하기
페이지가 제시한 권장 설치 명령만 사용한다.
npx ai-elements@latest
전제 조건: 현재 디렉터리가 shadcn/ui가 초기화되고 AI SDK가 있는 그 Next.js 프로젝트다. Node.js는 18+이고 Tailwind는 CSS Variables 모드다. 설치 위치는 이미 설정한 components 디렉터리와 프로젝트 의존성이다.
부작용 확인 지점: 페이지는 모든 컴포넌트를 설치할 때, 아직 설정되지 않았다면 Set up shadcn/ui하고, 모든 AI Elements 컴포넌트를 설정된 components 디렉터리에 넣으며, 필요한 의존성을 프로젝트에 추가한다고 적는다. 이는 파일과 package 의존성을 바꾼다. 디렉터리가 틀렸거나 전제만 먼저 확인하려면 멈춰라. 확인한 뒤에 실행한다.
성공 신호: 명령이 정상 종료되고 components 디렉터리에 새 컴포넌트가 나타나며 의존성이 쓰인다. 첫 시도는 확인만 한다. 새로 넣은 컴포넌트 파일 하나를 열어 설정한 디렉터리에 떨어졌는지 확인하라. 발췌에 없는 채팅 페이지나 프로덕션 라우트에 바로 연결하지 마라. 마법사가 파일을 더 바꾸려 하면 확인 지점에서 멈춰라.
사용 사례
사례 1: 전제를 충족한 프로젝트에서 공식 설치를 실행한다. Node.js 18+, Next.js + AI SDK, npx shadcn@latest init 완료, Tailwind가 CSS Variables mode인지 확인한 뒤 npx ai-elements@latest를 실행한다. 근거가 다루는 것은 이 권장 명령과 전제 목록이다. 완료 기준은 설치 성공과 컴포넌트가 설정된 디렉터리에 들어가는 것까지다. 나타나지 않은 개별 컴포넌트 이름이나 registry URL을 보태지 마라.
사례 2: “모든 컴포넌트 설치”가 무엇을 하는지 먼저 보고 계속할지 결정한다. 발췌는 필요하면 shadcn/ui를 설정하고, 모든 AI Elements를 components 디렉터리에 넣으며, 필요한 의존성을 추가한다고 적는다. 첫 시도에서 이러한 쓰기를 받을 준비가 안 됐다면 명령을 실행하지 말고, 이 세 부작용을 받아들일 수 있는지만 확인하라. 관찰 가능한 성공 신호는 프로젝트 현황과 대조해 shadcn이 초기화되었고 대상 components 디렉터리가 있는지 확인하는 것이다. “전부 설치”를 Tailwind CSS Variables 제한을 건너뛰어도 된다는 뜻으로 읽지 마라.
사용 경계
주 설치 경로는 npx ai-elements@latest뿐이다. npx shadcn@latest init는 전제이지 두 번째 주 설치기가 아니다. Node.js 18+, Next.js + AI SDK, 초기화된 shadcn/ui가 필요하며 Tailwind는 CSS Variables mode만 지원한다. 설치는 컴포넌트 디렉터리와 의존성을 바꾼다. 제거와 개별 컴포넌트 선택은 적혀 있지 않으며 안전 결론으로 삼을 수 없다.