Next.js AI SDK Tutorial - 17 - Tool Call UI
- AI 도구가 사용자 인터페이스(UI)에서 어떻게 호출되는지 시각적으로 보여주는 방법을 설명 🎨
- API 라우트 핸들러에서 도구 호출을 구현했을 때 사용자 경험에 부족했던 투명성을 개선 💡
- 사용자가 AI가 도구를 호출하는 시점, 사용하는 매개변수, 반환되는 결과를 알 수 있도록 UI를 업데이트 👁️
- 메시지 유형을 확인하여 도구 호출이 메시지에 어떻게 나타나는지 이해하고, UI 메시지 부분 배열에서 'tool-' 접두사로 시작하는 특수 메시지 부분을 식별 🔍
- 도구 호출의 네 가지 상태(입력 스트리밍, 입력 완료, 출력 완료, 출력 오류)를 처리하는 방법을 설명 🔄
- 각 상태에 따라 UI에 다른 시각적 표현을 제공하여 도구 호출의 전체 흐름을 사용자에게 보여줌 📊
- TypeScript 지원을 위해 적절한 채팅 메시지 유형을 가져오고, 도구 실행의 각 상태를 처리하는 케이스를 추가 ⌨️
- 오류 상태를 처리하여 도구 호출이 실패할 경우 사용자에게 명확하게 알림 ⚠️
- 도구 호출을 투명하게 만들어 사용자가 AI가 정보를 '만들어내는' 것이 아니라 실제로 날씨 서비스를 확인하고 있다는 것을 이해하도록 도움 🤝
- 이 패턴은 날씨 API 호출, 데이터베이스 쿼리, 이메일 전송 등 모든 도구에 적용 가능하며, 도구 호출을 시각적으로 이해하기 쉽게 만들 수 있음 ✅