유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

AI SDK Version 5 on TanStack Start!

Jack Herrington

2025. 8. 25.

0

#ai
#frontend
#backend
  • Vercel AI SDK 버전 5는 향상된 API와 기능으로 대폭 업그레이드됨 🎉
  • Tanstack Start에서 AI SDK 버전 5를 사용하여 음성 전사 및 텍스트 음성 변환 기능 추가 🎤
  • create-start-app 명령어를 사용하여 Tanstack AI 버전 5 앱 생성하고 Tanstack chat 예제 추가 🚀
  • Anthropic 및 OpenAI API 키 설정 필요 (음성 전사 및 텍스트 음성 변환 기능 사용 시) 🔑
  • V5에서는 UI 메시지와 모델 메시지 간의 구분이 명확해짐 💬
  • maxSteps 대신 stopWhen 기능을 사용하여 도구 호출 중단 조건 설정 가능 🛑
  • to UI message stream response를 사용하여 모델 메시지를 UI 메시지로 변환하여 UI로 전송 📤
  • API 엔드포인트에서 스트림 응답을 반환하여 Tanstack Start와 쉽게 통합 🤝
  • tools 디렉토리에서 get guitars 및 recommend guitars 도구 확인 (parameters 필드가 input schema로 변경됨) 🛠️
  • useChat 훅 API가 변경되어 입력 필드를 직접 관리해야 함 ✍️
  • useChat 훅에서 transport 메커니즘을 통해 다양한 전송 방식 선택 가능 (fetch, 서버 기능, OpenAI 로컬 호출 등) 🚚
  • 메시지 컴포넌트에서 UI 메시지를 포맷하고, 텍스트 및 도구 호출 유형에 따라 다르게 처리 🎨
  • AISDK 5에서는 send message 함수를 사용하여 메시지 전송 (이전 버전에서는 form posts에 바인딩됨) ✉️
  • 실험적인 transcription API를 사용하여 음성 데이터를 텍스트로 변환하는 기능 추가 (OpenAI의 Whisper 모델 사용) 🗣️
  • useTranscribe 훅을 만들어 React Media Recorder 훅을 래핑하고, 오디오 데이터를 서버로 전송하여 텍스트로 변환 🎧
  • transcribe button 컴포넌트를 만들어 음성 녹음 및 전사 기능 통합 🎙️
  • 실험적인 speech API를 사용하여 텍스트를 음성으로 변환하는 기능 추가 (OpenAI의 TTS1 모델 사용) 📢
  • useTextToSpeech 훅을 만들어 텍스트를 음성으로 변환하고 오디오 요소 재생 🔊
  • TTS button 컴포넌트를 만들어 텍스트 음성 변환 기능 통합 🗣️

Recommanded Videos