AI SDK RSC

AI SDK RSC

React Server Components(RSC) 위에서 생성형 UI 애플리케이션을 구축하는 AI SDK RSC의 개요를 소개하는 문서예요.

출처: 문서

본문

경고: AI SDK RSC는 현재 실험 단계(experimental)예요. 프로덕션에서는 AI SDK UI 사용을 권장해요. RSC에서 UI로 마이그레이션하는 방법은 마이그레이션 가이드를 참고하세요.

참고: @ai-sdk/rsc 패키지는 React Server Components를 지원하는 프레임워크와 호환돼요.

React Server Components(RSC)는 서버에서 렌더링하고 클라이언트로 스트리밍할 수 있는 UI를 작성할 수 있게 해 줘요. RSC는 Server Actions를 지원하는데, 이는 종단 간 타입 안전성을 갖춘 다른 함수처럼 클라이언트에서 직접 서버 측 코드를 호출하는 새로운 방식이에요. 이 조합은 AI 애플리케이션을 구축하는 새로운 길을 열어 주며, 대규모 언어 모델(LLM)이 서버에서 클라이언트로 직접 UI를 생성하고 스트리밍할 수 있게 해 줘요.

AI SDK RSC 함수 (AI SDK RSC Functions)

AI SDK RSC에는 React Server Components로 AI 네이티브 애플리케이션을 구축하도록 돕기 위해 설계된 다양한 함수가 있어요. 이 함수들은:

  1. 생성형 UI 애플리케이션 구축을 위한 추상화를 제공해요.
    • streamUI: 모델을 호출하고 React Server Components로 응답할 수 있게 해 줘요.
    • useUIState: 현재 UI 상태와 UI 상태를 업데이트하는 함수를 반환해요 (React의 useState와 유사). UI State는 AI 상태의 시각적 표현이에요.
    • useAIState: 현재 AI 상태와 AI 상태를 업데이트하는 함수를 반환해요 (React의 useState와 유사). AI 상태는 시스템 메시지, 함수 응답, 기타 관련 데이터처럼 AI 모델과 공유되는 컨텍스트와 정보를 담기 위한 것이에요.
    • useActions: 클라이언트에서 Server Actions에 접근할 수 있게 해 줘요. 이는 서버와 사용자 상호작용이 필요한 인터페이스를 구축할 때 특히 유용해요.
    • createAI: 애플리케이션 트리의 일부를 감싸 UI와 AI 상태를 쉽게 관리할 수 있게 하는 클라이언트-서버 컨텍스트 프로바이더를 만들어요.
  2. 서버와 클라이언트 간에 스트리밍 가능한 값을 쉽게 다루게 해 줘요.
    • createStreamableValue: 서버에서 클라이언트로 값을 보내는 스트림을 만들어요. 값은 직렬화 가능한 모든 데이터일 수 있어요.
    • readStreamableValue: 원래 createStreamableValue로 생성된 streamable 값을 클라이언트에서 읽어요.
    • createStreamableUI: 서버에서 클라이언트로 UI를 보내는 스트림을 만들어요.
    • useStreamableValue: createStreamableValue로 생성된 streamable 값을 받아 현재 값, 오류, 보류(pending) 상태를 반환해요.

템플릿 (Templates)

다음 템플릿을 확인해 AI SDK RSC가 실제로 어떻게 동작하는지 살펴보세요. (시각적 템플릿 예제는 원문 사이트에서 확인할 수 있어요.)

API 참조 (API Reference)

각 함수에 대한 자세한 내용은 AI SDK RSC API Reference를 확인하세요.

더 알아보기 (Learn more)