streamUI

AI SDK RSC is currently experimental. We recommend using AI SDK UI for production. For guidance on migrating from RSC to UI, see our migration guide.

A helper function to create a streamable UI from LLM providers. This function is similar to AI SDK Core APIs and supports the same model interfaces.

To see streamUI in action, check out these examples.

Import

import { streamUI } from "@ai-sdk/rsc"

Parameters

model:

LanguageModel

initial?:

ReactNode

system:

string

prompt:

string

messages:

Array<CoreSystemMessage | CoreUserMessage | CoreAssistantMessage | CoreToolMessage> | Array<UIMessage>
CoreSystemMessage

role:

'system'

content:

string
CoreUserMessage

role:

'user'

content:

string | Array<TextPart | ImagePart | FilePart>
TextPart

type:

'text'

text:

string
ImagePart

type:

'image'

image:

string | Uint8Array | Buffer | ArrayBuffer | URL

mediaType?:

string
FilePart

type:

'file'

data:

string | Uint8Array | Buffer | ArrayBuffer | URL

mediaType:

string
CoreAssistantMessage

role:

'assistant'

content:

string | Array<TextPart | ToolCallPart>
TextPart

type:

'text'

text:

string
ToolCallPart

type:

'tool-call'

toolCallId:

string

toolName:

string

args:

object based on zod schema
CoreToolMessage

role:

'tool'

content:

Array<ToolResultPart>
ToolResultPart

type:

'tool-result'

toolCallId:

string

toolName:

string

result:

unknown

isError?:

boolean

allowSystemInMessages?:

boolean

maxOutputTokens?:

number

temperature?:

number

topP?:

number

topK?:

number

presencePenalty?:

number

frequencyPenalty?:

number

stopSequences?:

string[]

seed?:

number

maxRetries?:

number

abortSignal?:

AbortSignal

headers?:

Record<string, string>

tools:

ToolSet
Tool

description?:

string

parameters:

zod schema

generate?:

(async (parameters) => ReactNode) | AsyncGenerator<ReactNode, ReactNode, void>

toolChoice?:

"auto" | "none" | "required" | { "type": "tool", "toolName": string }

text?:

(Text) => ReactNode
Text

content:

string

delta:

string

done:

boolean

providerOptions?:

Record<string,Record<string,JSONValue>> | undefined

onFinish?:

(result: OnFinishResult) => void
OnFinishResult

usage:

TokenUsage
TokenUsage

promptTokens:

number

completionTokens:

number

totalTokens:

number

value:

ReactNode

warnings:

Warning[] | undefined

response:

Response
Response

headers?:

Record<string, string>

Returns

value:

ReactNode

response?:

Response
Response

headers?:

Record<string, string>

warnings:

Warning[] | undefined

stream:

AsyncIterable<StreamPart> & ReadableStream<StreamPart>
StreamPart

type:

'text-delta'

textDelta:

string
StreamPart

type:

'tool-call'

toolCallId:

string

toolName:

string

args:

object based on zod schema
StreamPart

type:

'error'

error:

Error
StreamPart

type:

'finish'

finishReason:

'stop' | 'length' | 'content-filter' | 'tool-calls' | 'error' | 'other' | 'unknown'

usage:

TokenUsage
TokenUsage

promptTokens:

number

completionTokens:

number

totalTokens:

number

Examples

Learn to render a React component as a function call using a language model in Next.js
Learn to persist and restore states UI/AI states in Next.js
Learn to route React components using a language model in Next.js
Learn to stream component updates to the client in Next.js