Next.js AI SDK Tutorial - 7 - Chat with AI
- AI 모델은 기억력이 없어 매번 새로운 프롬프트로 취급하므로, 대화형 경험을 위해서는 메시지 기록을 유지해야 함. 🧠
- Next.js AI SDK는 대화 기록 유지를 위한 route handler와 chat UI를 간단하게 구축할 수 있도록 지원함. 🛠️
- chat API route에서는 request body에서 메시지 배열을 받아, UI 메시지 타입으로 지정하고, streamText 함수를 사용하여 응답을 스트리밍함. 📤
- UI 특정 메타데이터를 제거하고 AI 모델이 이해할 수 있는 형식으로 변환하기 위해 convertToModelMessages 함수를 사용함. ⚙️
- UI에서는 useChat 훅을 사용하여 메시지 상태를 관리하고, send 메시지 함수를 통해 새로운 메시지를 AI에 보냄. 💬
- 메시지 배열은 ID, role (user 또는 assistant), parts (텍스트 콘텐츠) 속성을 가지며, UI에서 렌더링됨. 🖼️
- status 속성을 사용하여 로딩 표시기를 보여주고, 에러 핸들링 및 stop 기능을 추가하여 사용자 경험을 개선함. 💫
- 대화가 길어질수록 토큰 사용량이 증가하므로, 토큰 추적을 통해 사용량을 확인하고 필요에 따라 대화를 초기화하는 것이 중요함. 💰
- useChat 훅은 API 엔드포인트, 메시지 전송, 상태 관리 등 채팅 인터페이스 구축에 필요한 다양한 기능을 제공함. ✅
- 메시지 구조를 이해하고, 각 part type에 따라 적절한 UI 요소를 렌더링하여 다양한 콘텐츠 유형을 처리할 수 있도록 설계함. 🏗️