AI SDK RSCStreaming Values

Streaming Values

The RSC API allows you to stream serializable JS values from the server to the client using createStreamableValue, such as strings, numbers, objects, and arrays.

This is useful when you want to stream:

  • Text generations from the language model in real-time.
  • Buffer values of image and audio generations from multi-modal models.
  • Progress updates from multi-step agent runs.

Creating a Streamable Value

You can import createStreamableValue from ai/rsc and use it to create a streamable value.

'use server';
import { createStreamableValue } from 'ai/rsc';
export const runThread = async () => {
const streamableStatus = createStreamableValue('thread.init');
setTimeout(() => {
streamableValue.update('thread.run.create');
streamableValue.update('thread.run.update');
streamableValue.update('thread.run.end');
streamableValue.done('thread.end');
}, 1000);
return {
status: streamableStatus.value,
};
};

Reading a Streamable Value

You can read a streamable value on the client using readStreamableValue. It returns an async iterator that yields the value of the streamable as it is updated:

import { readStreamableValue } from 'ai/rsc';
import { runThread } from '@/actions';
export default function Page() {
return (
<button
onClick={async () => {
const { status } = await runThread();
for await (const value of readStreamableValue(status)) {
console.log(value);
}
}}
>
Ask
</button>
);
}