`readStreamableValue`

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.

It is a function that helps you read the streamable value from the client that was originally created using createStreamableValue on the server.

Import

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

Example

app/actions.ts

async function generate() {
  'use server';
  const streamable = createStreamableValue('');

  streamable.append('Hello');
  streamable.append(' ');
  streamable.append('World');
  streamable.done();

  return streamable.value;
}

app/page.tsx

import { readStreamableValue } from '@ai-sdk/rsc';

export default function Page() {
  const [generation, setGeneration] = useState('');

  return (
    <div>
      <button
        onClick={async () => {
          const stream = await generate();

          for await (const value of readStreamableValue(stream)) {
            setGeneration(value);
          }
        }}
      >
        Generate
      </button>
    </div>
  );
}

API Signature

Parameters

stream:

StreamableValue

The streamable value to read from.

Returns

It returns an async iterator that contains the values emitted by the streamable value.