AI SDK UI

AI SDK UI

대화형 채팅·완성·어시스턴트 앱을 쉽게 만들 수 있게 해 주는 프레임워크 비종속 훅 툴킷이에요.

출처: 문서

본문

AI SDK UI는 대화형 채팅, 완성(completion), 어시스턴트 애플리케이션을 쉽게 구축할 수 있게 도와주는 툴킷이에요. 프레임워크에 종속되지 않는 도구 모음으로, 고급 AI 기능을 애플리케이션에 통합하는 작업을 간소화해 줘요.

AI SDK UI는 다음 훅들을 포함해요:

  • useChat — 채팅 인터페이스에서 언어 모델과 상호작용하는 훅. useChat
  • useCompletion — 완성(completion) 인터페이스에서 언어 모델과 상호작용하는 훅. useCompletion
  • useObject — 스트리밍되는 JSON 객체를 소비하는 훅. useObject
  • experimental_useRealtime — 실시간 음성 대화를 구축하는 훅. experimental_useRealtime
  • convertToModelMessages — useChat 메시지를 AI 함수용 ModelMessage로 변환. convertToModelMessages
  • pruneMessages — 모델 메시지 목록에서 모델 메시지를 정리(prune). pruneMessages
  • createUIMessageStream — 클라이언트로 추가 데이터를 스트리밍할 UI 메시지 스트림 생성. createUIMessageStream
  • createUIMessageStreamResponse — 클라이언트로 UI 메시지를 스트리밍할 응답 객체 생성. createUIMessageStreamResponse
  • pipeUIMessageStreamToResponse — UI 메시지 스트림을 Node.js ServerResponse 객체로 파이프. pipeUIMessageStreamToResponse
  • readUIMessageStream — UIMessageChunk 객체 스트림을 UIMessage 객체의 AsyncIterableStream으로 변환. readUIMessageStream
  • experimental_MCPAppRenderer — React에서 인터랙티브한 MCP App 툴 UI를 렌더링. experimental_MCPAppRenderer

UI 프레임워크 지원

AI SDK UI는 다음 프레임워크를 지원해요: React, Svelte, Vue.js, Angular, SolidJS.

다음은 이 프레임워크들에서 지원되는 함수를 비교한 표예요:

useChat useCompletion useObject MCP Apps
React @ai-sdk/react
Vue.js @ai-sdk/vue Chat
Svelte @ai-sdk/svelte Chat Completion StructuredObject
Angular @ai-sdk/angular Chat Completion StructuredObject
SolidJS (커뮤니티)
React가 아닌 프레임워크에서 누락된 기능을 구현하려면 [컨트리뷰션](https://github.com/vercel/ai/blob/main/CONTRIBUTING.md)을 환영해요.

더 알아보기 (Learn more)

전체 사이트맵