AI SDK UI
AI SDK UI
대화형 채팅, 완성(completion), 어시스턴트 애플리케이션을 쉽게 구축하도록 돕는 AI SDK UI의 개요를 소개하는 문서예요. 프레임워크에 구애받지 않는 툴킷이에요.
출처: 문서
본문
AI SDK UI는 대화형 채팅, 완성, 어시스턴트 애플리케이션을 쉽게 구축하도록 설계되었어요. 프레임워크에 구애받지 않는 툴킷(framework-agnostic toolkit) 으로, 고급 AI 기능을 애플리케이션에 통합하는 작업을 간소화해요.
AI SDK UI는 프론트엔드에서 채팅 스트림과 UI 업데이트를 관리하는 복잡한 작업을 단순화하는 강력한 추상화를 제공해서, 더 효율적으로 동적인 AI 기반 인터페이스를 개발할 수 있게 해 줘요. useChat, useCompletion, useObject 의 세 가지 주요 훅으로 실시간 채팅 기능, 텍스트 완성, 스트리밍된 JSON, 대화형 어시스턴트 기능을 앱에 통합할 수 있어요.
useChat은 채팅 메시지의 실시간 스트리밍을 제공하며, 입력, 메시지, 로딩, 오류에 대한 상태 관리를 추상화해서 어떤 UI 디자인에도 원활하게 통합할 수 있어요.useCompletion은 애플리케이션에서 텍스트 완성을 처리할 수 있게 해 주며, 프롬프트 입력을 관리하고 새 완성이 스트리밍될 때마다 UI를 자동으로 업데이트해요.useObject은 스트리밍된 JSON 객체를 소비할 수 있게 해 주는 훅으로, 애플리케이션에서 구조화된 데이터를 처리하고 표시하는 간단한 방법을 제공해요.
이 훅들은 AI 상호작용을 구현하는 데 필요한 복잡성과 시간을 줄여서, 탁월한 사용자 경험을 만드는 데 집중할 수 있게 해 줘요.
UI 프레임워크 지원 (UI Framework Support)
AI SDK UI는 다음 프레임워크를 지원해요: React, Svelte, Vue.js, Angular, SolidJS.
이 프레임워크들에서 지원되는 함수의 비교는 다음과 같아요:
| useChat | useCompletion | useObject | MCP Apps | |
|---|---|---|---|---|
React @ai-sdk/react |
지원 | 지원 | 지원 | 지원 |
Vue.js @ai-sdk/vue |
지원 | 지원 | 지원 | 미지원 |
Svelte @ai-sdk/svelte |
Chat 지원 | Completion 지원 | StructuredObject 지원 | 미지원 |
Angular @ai-sdk/angular |
Chat 지원 | Completion 지원 | StructuredObject 지원 | 미지원 |
| SolidJS (커뮤니티) | 지원 | 지원 | 지원 | 미지원 |
프레임워크 예제 (Framework Examples)
다양한 프레임워크에 대한 예제 구현을 살펴보세요:
API 참조 (API Reference)
각 함수에 대한 자세한 내용은 AI SDK UI API Reference를 확인하세요.