Vercel AI SDK 3.0 — Generative UI로 LLM 응답을 React 컴포넌트로 스트리밍

Vercel AI SDK 3.0이 Generative UI를 도입해 LLM 응답을 텍스트가 아닌 React Server Components로 직접 스트리밍할 수 있게 됐다. 모델이 함수 호출(Function Calling)로 어떤 컴포넌트를 렌더링할지 결정하면, 서버에서 해당 컴포넌트를 스트리밍해 클라이언트에 직접 전달하는 구조다.

핵심 포인트

render() 함수가 LLM 함수 호출 결과를 React Server Components와 매핑해 UI를 직접 스트리밍한다
OpenAI, Mistral, Fireworks 등 OpenAI SDK 호환 Function Calling을 지원하는 모델과 동작한다
Next.js App Router(RSC 지원)가 필수이며, Pages Router에서는 동작하지 않는다
LangChain, LlamaIndex와 선택적 통합이 가능하다
async generator 패턴으로 컴포넌트를 점진적으로 스트리밍할 수 있다

상세 정리

Generative UI 개념: 기존 AI SDK는 텍스트만 스트리밍. 3.0부터는 LLM이 어떤 UI 컴포넌트를 보여줄지 결정하고, 서버가 그 컴포넌트를 렌더링해 스트리밍한다.
render() 함수 구조: 사용자 메시지를 받아 LLM에 전달 → 모델이 함수 호출로 응답 → 해당 함수명에 매핑된 React 컴포넌트를 generate() 제너레이터로 반환.
기본 예시: 날씨 조회 요청 시 모델이 get_current_weather 함수를 호출하면 서버에서 WeatherCard 컴포넌트를 스트리밍 — 텍스트 대신 리치 UI가 채팅창에 등장.
async generator 패턴: generate 함수 안에서 yield로 로딩 스피너를 먼저 반환하고, await 후 최종 컴포넌트를 yield — 사용자가 로딩 상태를 실시간으로 본다.
RSC 직렬화 제약: Server Component는 함수, Date 같은 직렬화 불가 타입을 props로 전달할 수 없다. 클라이언트 컴포넌트에 데이터만 전달하는 구조로 설계해야 한다.
함수 호출 미지원 모델: native Function Calling 없는 모델은 프롬프트 엔지니어링으로 구조화 출력을 유도해 동일 패턴 적용 가능.
프레임워크 요구사항: Next.js App Router 필수. createStreamableUI 헬퍼로 스트리밍 상태를 래핑하면 클라이언트에서 .value로 현재 컴포넌트를 구독 가능.
적용 케이스: 날씨 카드, 주식 차트, 지도 컴포넌트 등 대화형 AI가 상황에 맞는 인터랙티브 UI를 동적으로 선택·렌더링하는 시나리오.

왜 읽나Next.js App Router 기반 AI 챗봇에서 텍스트 응답을 넘어 리치 UI 컴포넌트를 LLM이 직접 선택해 렌더링하도록 구현하려는 풀스택 엔지니어.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Vercel AI SDK 3.0 — Generative UI로 LLM 응답을 React 컴포넌트로 스트리밍

이 글과 비슷한

학습 에이전트 — AI 두뇌 구축하기

AI 에이전트 회사 차리기: 설립부터 어디서든 동기화까지

AI Gateway에서 실시간 음성 에이전트 구축하기