Vue 또는 Svelte에서 Chat SDK 웹 UI 구축하기
요약
Chat SDK가 React에 이어 Vue 및 Svelte를 공식 지원하기 시작했습니다. AI SDK UI 메시지 스트림 프로토콜을 준수하여 기존 서버 라우트를 그대로 활용할 수 있습니다.
핵심 포인트
- Vue 및 Svelte용 공식 웹 어댑터 제공
- AI SDK UI 메시지 스트림 프로토콜 준수
- 반응형 인스턴스 사용 시 구조 분해 할당 주의 필요
- 기존 React 기반 서버 설정과 동일하게 유지 가능
Chat SDK가 기존의 React 통합에 이어 이제 Vue 및 Svelte를 공식적으로 지원합니다. 어댑터가 AI SDK UI 메시지 스트림 프로토콜 (AI SDK UI message stream protocol)을 따르기 때문에 동일한 서버 라우트가 작동합니다. 각 프레임워크는 React, Vue 또는 Svelte용 매칭되는 AI SDK 패키지를 기반으로 구축된 자체 web adapter를 제공합니다.
useChat
Vue 및 Svelte 헬퍼는 반응형 인스턴스(reactive instance)를 반환하므로, 구조 분해 할당(destructuring) 대신 템플릿에서 chat.messages 및 chat.status를 직접 읽어 사용하세요. api 및 threadId 옵션은 React 래퍼(wrapper)와 일치하며, 서버 설정은 동일하게 유지됩니다.
시작하려면 documentation을 읽거나 adapters directory를 살펴보세요.
AI 자동 생성 콘텐츠
본 콘텐츠는 Vercel AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0