`streamUI`
streamUI
LLM 프로바이더에서 스트리밍 가능한 UI를 만드는 헬퍼 함수예요. AI SDK Core API와 비슷하며 같은 모델 인터페이스를 지원합니다. 다만 AI SDK RSC는 아직 실험 단계라 프로덕션에는 AI SDK UI 사용이 권장된다는 점을 기억하세요.
출처: 문서
본문
경고: AI SDK RSC는 현재 실험 단계입니다. 프로덕션에는 AI SDK UI를 권장합니다. RSC에서 UI로 마이그레이션하는 방법에 대한 지침은 마이그레이션 가이드를 참고하세요.
LLM 프로바이더에서 스트리밍 가능한 UI를 만드는 헬퍼 함수입니다. 이 함수는 AI SDK Core API와 비슷하며 동일한 모델 인터페이스를 지원합니다.
streamUI의 실제 사용을 보려면 이 예제들을 확인해보세요.
Import
import { streamUI } from "@ai-sdk/rsc"
Parameters (매개변수)
<PropertiesTable
content={[
{
name: 'model',
type: 'LanguageModel',
description: '사용할 언어 모델. 예: openai("gpt-6-astra")',
},
{
name: 'initial',
isOptional: true,
type: 'ReactNode',
description: '렌더링할 초기 UI.',
},
{
name: 'instructions',
type: 'Instructions',
description:
'모델의 동작을 지정하는 데 사용할 지시 사항.'
},
{
name: 'prompt',
type: 'string',
description: '텍스트를 생성할 입력 프롬프트.',
},
{
name: 'messages',
type: 'Array<SystemModelMessage | UserModelMessage | AssistantModelMessage | ToolModelMessage> | Arrayprompt 또는 messages 필드에 시스템 메시지를 허용할지 여부. 기본값은 false. instructions 옵션의 시스템 메시지는 항상 허용됩니다. 사용자 제어 메시지에 이것을 활성화하면 프롬프트 인젝션 위험이 생길 수 있습니다.',
},
{
name: 'maxOutputTokens',
type: 'number',
isOptional: true,
description: '생성할 최대 토큰 수.',
},
{
name: 'temperature',
type: 'number',
isOptional: true,
description:
'temperature 설정. 값은 프로바이더에 그대로 전달됩니다. 범위는 프로바이더와 모델에 따라 다릅니다. temperature 또는 topP 중 하나만 설정하는 것이 좋습니다.',
},
{
name: 'topP',
type: 'number',
isOptional: true,
description:
'Nucleus sampling. 값은 프로바이더에 그대로 전달됩니다. 범위는 프로바이더와 모델에 따라 다릅니다. temperature 또는 topP 중 하나만 설정하는 것이 좋습니다.',
},
{
name: 'topK',
type: 'number',
isOptional: true,
description:
'각 후속 토큰에 대해 상위 K 옵션에서만 샘플링. "긴 꼬리" 저확률 응답을 제거하는 데 사용. 고급 사용 사례에만 권장됩니다. 보통 temperature만 사용하면 됩니다.',
},
{
name: 'presencePenalty',
type: 'number',
isOptional: true,
description:
'presence penalty 설정. 모델이 프롬프트에 이미 있는 정보를 반복할 가능성에 영향을 줍니다. 값은 프로바이더에 그대로 전달됩니다. 범위는 프로바이더와 모델에 따라 다릅니다.',
},
{
name: 'frequencyPenalty',
type: 'number',
isOptional: true,
description:
'frequency penalty 설정. 모델이 같은 단어나 구를 반복해서 사용할 가능성에 영향을 줍니다. 값은 프로바이더에 그대로 전달됩니다. 범위는 프로바이더와 모델에 따라 다릅니다.',
},
{
name: 'stopSequences',
type: 'string[]',
isOptional: true,
description:
'텍스트 생성을 중지할 시퀀스. 모델이 이 시퀀스 중 하나를 생성하면 더 이상 텍스트를 생성하지 않습니다.',
},
{
name: 'seed',
type: 'number',
isOptional: true,
description:
'무작위 샘플링에 사용할 시드(정수). 설정되고 모델이 지원하면 호출이 결정적 결과를 생성합니다.',
},
{
name: 'maxRetries',
type: 'number',
isOptional: true,
description:
'최대 재시도 횟수. 재시도를 비활성화하려면 0으로 설정. 기본값: 2.',
},
{
name: 'abortSignal',
type: 'AbortSignal',
isOptional: true,
description:
'호출을 취소하는 데 사용할 수 있는 선택적 abort signal.',
},
{
name: 'headers',
type: 'Record<string, string>',
isOptional: true,
description:
'요청과 함께 보낼 추가 HTTP 헤더. HTTP 기반 프로바이더에만 적용됩니다.',
},
{
name: 'tools',
type: 'ToolSet',
description:
'모델이 접근하고 호출할 수 있는 도구.',
properties: [
{
type: 'Tool',
parameters: [
{
name: 'description',
isOptional: true,
type: 'string',
description:
'도구의 목적에 대한 정보. 모델이 도구를 어떻게 그리고 언제 사용할 수 있는지에 대한 세부 사항을 포함.',
},
{
name: 'inputSchema',
type: 'zod schema',
description:
'도구의 매개변수를 설명하는 타입화된 스키마. 검증과 오류 처리에도 사용할 수 있습니다.',
},
{
name: 'generate',
isOptional: true,
type: '(async (parameters) => ReactNode) | AsyncGenerator<ReactNode, ReactNode, void>',
description:
'도구 호출의 인자로 호출되어 UI로 React 노드를 생성하는 함수 또는 제너레이터 함수.',
},
],
},
],
},
{
name: 'toolChoice',
isOptional: true,
type: '"auto" | "none" | "required" | { "type": "tool", "toolName": string }',
description:
'도구 선택 설정. 도구가 어떻게 실행을 위해 선택되는지 지정합니다. 기본값은 "auto". "none"은 도구 실행을 비활성화. "required"는 도구 실행을 요구. { "type": "tool", "toolName": string }은 특정 도구를 실행하도록 지정합니다.',
},
{
name: 'text',
isOptional: true,
type: '(Text) => ReactNode',
description: '모델에서 생성된 토큰을 처리하는 콜백.',
properties: [
{
type: 'Text',
parameters: [
{
name: 'content',
type: 'string',
description: '완성의 전체 내용.',
},
{ name: 'delta', type: 'string', description: '델타.' },
{ name: 'done', type: 'boolean', description: '완료되었나요?' },
],
},
],
},
{
name: 'providerOptions',
type: 'Record<string,JSONObject> | undefined',
isOptional: true,
description:
'프로바이더별 옵션. 바깥 키는 프로바이더 이름입니다. 안쪽 값은 메타데이터입니다. 세부 내용은 프로바이더에 따라 다릅니다.',
},
{
name: 'onFinish',
type: '(result: OnFinishResult) => void',
isOptional: true,
description:
'LLM 응답과 모든 요청된 도구 실행(generate 함수가 있는 도구)이 끝났을 때 호출되는 콜백.',
properties: [
{
type: 'OnFinishResult',
parameters: [
{
name: 'usage',
type: 'LanguageModelUsage',
description: '생성된 텍스트의 토큰 사용량.',
properties: [
{
type: 'LanguageModelUsage',
parameters: [
{
name: 'inputTokens',
type: 'number | undefined',
description: '사용된 총 입력(프롬프트) 토큰 수.',
},
{
name: 'inputTokenDetails',
type: 'LanguageModelInputTokenDetails',
description:
'입력(프롬프트) 토큰에 대한 상세 정보. 캐시된 토큰 및 캐시되지 않은 토큰도 참고.',
properties: [
{
type: 'LanguageModelInputTokenDetails',
parameters: [
{
name: 'noCacheTokens',
type: 'number | undefined',
description:
'사용된 캐시되지 않은 입력(프롬프트) 토큰 수.',
},
{
name: 'cacheReadTokens',
type: 'number | undefined',
description:
'읽은 캐시된 입력(프롬프트) 토큰 수.',
},
{
name: 'cacheWriteTokens',
type: 'number | undefined',
description:
'쓴 캐시된 입력(프롬프트) 토큰 수.',
},
],
},
],
},
{
name: 'outputTokens',
type: 'number | undefined',
description: '사용된 총 출력(완성) 토큰 수.',
},
{
name: 'outputTokenDetails',
type: 'LanguageModelOutputTokenDetails',
description:
'출력(완성) 토큰에 대한 상세 정보.',
properties: [
{
type: 'LanguageModelOutputTokenDetails',
parameters: [
{
name: 'textTokens',
type: 'number | undefined',
description: '사용된 텍스트 토큰 수.',
},
{
name: 'reasoningTokens',
type: 'number | undefined',
description: '사용된 추론 토큰 수.',
},
],
},
],
},
{
name: 'totalTokens',
type: 'number | undefined',
description: '사용된 총 토큰 수.',
},
{
name: 'raw',
type: 'object | undefined',
isOptional: true,
description: '프로바이더의 원본 사용 정보. 프로바이더의 원래 사용 정보이며 추가 필드를 포함할 수 있습니다.',
},
],
},
],
},
{
name: 'value',
type: 'ReactNode',
description: '생성된 최종 UI 노드.',
},
{
name: 'warnings',
type: 'Warning[] | undefined',
description:
'모델 프로바이더의 경고(예: 지원되지 않는 설정).',
},
{
name: 'response',
type: 'Response',
description: '선택적 응답 데이터.',
properties: [
{
type: 'Response',
parameters: [
{
name: 'headers',
isOptional: true,
type: 'Record<string, string>',
description: '응답 헤더.',
},
],
},
],
},
],
},
],
},
]} />
Returns (반환값)
<PropertiesTable
content={[
{
name: 'value',
type: 'ReactNode',
description: '스트림 출력을 기반으로 한 사용자 인터페이스.',
},
{
name: 'response',
type: 'Response',
isOptional: true,
description: '선택적 응답 데이터.',
properties: [
{
type: 'Response',
parameters: [
{
name: 'headers',
isOptional: true,
type: 'Record<string, string>',
description: '응답 헤더.',
},
],
},
],
},
{
name: 'warnings',
type: 'Warning[] | undefined',
description:
'모델 프로바이더의 경고(예: 지원되지 않는 설정).',
},
{
name: 'stream',
type: 'AsyncIterable
Examples (예제)
- Next.js에서 언어 모델을 사용해 함수 호출로 React 컴포넌트를 렌더링하는 법 배우기
- Next.js에서 UI/AI 상태 저장 및 복원 배우기
- Next.js에서 언어 모델을 사용해 React 컴포넌트 라우팅 배우기
- Next.js에서 클라이언트로 컴포넌트 업데이트 스트리밍 배우기