Skip to content
Docs
Generative UI
createStreamableValue

createStreamableValue

createStreamableValue

Create a wrapped, changable value that can be streamed to the client.

Parameters

Any data (i.e. JSON) that RSC supports.

Returns

This creates a special value that can be returned from Actions to the client. It holds the data inside and can be updated via the update method.

Methods

update

The update method is used to update the value of the streamable value.

done

The done method marks the value as finalized. You can either call it without any parameters or with a new value as the final state. Once called, it cannot be updated or appended anymore.

The done method is always required to be called, otherwise the response will be stuck in a loading state.

Example

Value Streams are created on the server and streamed to the client.

app/action.tsx
import { createStreamableValue } from "ai/rsc";
 
async function getCustomerProfile(id: string) {
  "use server";
 
  const valueStream = createStreamableValue({
    profile: null,
    subscriptions: null,
  })
 
  (async () => {
    const profile = await getProfile(id);
 
    valueStream.update({
      profile,
      subscriptions: null,
    });
 
    const subscriptions = await getSubscriptions(profile.customerId);
 
    valueStream.done({
      profile,
      subscriptions,
    });
  })();
 
  return {
    id: Date.now(),
    profile: valueStream.value,
  }
}

© 2023 Vercel Inc.