작업 방식
AI Elements는 기존 Next.js 애플리케이션에 채팅 전용 컴포넌트를 추가하도록 에이전트를 안내합니다. 대화 화면, 메시지 내용, 도구 표시, 프롬프트 입력을 다룹니다. 컴포넌트가 자신의 리포지터리 안에 있으므로 제품 고유의 스타일과 상호작용 요건에 맞게 인터페이스를 조정할 수 있습니다.
소스는 이 컴포넌트를 AI SDK 및 shadcn/ui의 관례와 연결합니다. 예제는 어시스턴트 응답을 내부를 알 수 없는 하나의 위젯으로 취급하지 않고, 텍스트 부분을 중심으로 메시지의 기본 컴포넌트를 조합합니다. 모델 연동이 이미 되어 있고, 다음 과제가 사용자가 응답을 읽고 답할 일관된 화면을 제공하는 것일 때 유용합니다.
예상 산출물
- 프로젝트에 설정된 컴포넌트 디렉터리에 추가되는 선택한 컴포넌트의 소스 파일.
- 메시지와 응답의 기본 컴포넌트를 조합한 React 대화 화면.
- 프로젝트에 맞춘 스타일과 아직 해결되지 않은 연동 문제에 대한 설명.
브리프에서 검토까지
- 01기존 애플리케이션 확인
패키지 실행 도구, Next.js 구성, AI SDK 의존성, shadcn 설정을 살펴봅니다. 컴포넌트를 추가하기 전에 import 별칭과 전역 스타일을 확인합니다.
- 02필요한 UI 요소 추가
프로젝트의 패키지 실행 도구에서 지원되는 컴포넌트 설치 도구를 사용합니다. 대화에 필요한 요소를 선택하고 리포지터리에 추가된 파일을 확인합니다.
- 03연결하고 조정
소스 예제처럼 각 메시지의 역할을 Message에 연결하고 MessageContent를 중첩한 다음, 텍스트 부분을 MessageResponse로 렌더링합니다. 도구 실행 결과는 그에 맞는 별도 표시가 필요하며, 텍스트 전용 예제로 표시된다고 가정해서는 안 됩니다. 로컬 Tailwind 클래스를 조정하고 대화의 각 상태를 확인합니다.