AI SDK RSCuseStreamableValue


It is a React hook that takes a streamable value created using createStreamableValue and returns the current value, error, and pending state.


import { useStreamableValue } from "ai/rsc"


This is useful for consuming streamable values received from a component's props.

function MyComponent({ streamableValue }) {
const [data, error, pending] = useStreamableValue(streamableValue);
if (pending) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Data: {data}</div>;

API Signature


It accepts a streamable value created using createStreamableValue.


It is an array, where the first element contains the data, the second element contains an error if it is thrown anytime during the stream, and the third is a boolean indicating if the value is pending.