Stream Object
Learn how to stream object using the AI TOOLKIT and React Server Components.
This example uses React Server Components (RSC). If you want to client side rendering and hooks instead, check out the "streaming object generation" example with useObject. Object generation can sometimes take a long time to complete, especially when you're generating a large schema. In such cases, it is useful to stream the object generation process to the client in real-time. This allows the client to display the generated object as it is being generated, rather than have users wait for it to complete before displaying the result. stream object={{ notifications: [ { name: 'Jamie Roberts', message: "Hey! How's the study grind going? Need a coffee boost?", minutesAgo: 15, }, { name: 'Prof. Morgan', message: 'Reminder: Your term paper is due promptly at 8 AM tomorrow. Please ensure it meets the submission guidelines outlined.', minutesAgo: 46, }, { name: 'Alex Chen', message: "Dude, urgent! Borrow your notes for tomorrow's exam? I swear mine got eaten by my dog!", minutesAgo: 30, }, ], }} />
Run it locally
$ npm install aiClient
Let's create a simple React component that will call the getNotifications function when a button is clicked. The function will generate a list of notifications as described in the schema.
'use client';
import { useState } from 'react';
import { generate } from './actions';
import { readStreamableValue } from '@ai-toolkit/rsc';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
export default function Home() {
const [generation, setGeneration] = useState<string>('');
return (
<div>
<button
onClick={async () => {
const { object } = await generate('Messages during finals week.');
for await (const partialObject of readStreamableValue(object)) {
if (partialObject) {
setGeneration(
JSON.stringify(partialObject.notifications, null, 2),
);
}
}
}}
>
Ask
</button>
<pre>{generation}</pre>
</div>
);
}
- 1'use client';
- 2import { useState } from 'react';
- 3import { generate } from './actions';
- 4import { readStreamableValue } from '@ai-toolkit/rsc';
- 5// Allow streaming responses up to 30 seconds
- 6export const maxDuration = 30;
- 7export default function Home() {
- 8 const [generation, setGeneration] = useState<string>('');
- 9 return (
- 10 <div>
- 11 <button
- 12 onClick={async () => {
- 13 const { object } = await generate('Messages during finals week.');
- 14 for await (const partialObject of readStreamableValue(object)) {
- 15 if (partialObject) {
- 16 setGeneration(
- 17 JSON.stringify(partialObject.notifications, null, 2),
- 18 );
- 19 }
- 20 }
- 21 }}
- 22 >
- 23 Ask
- 24 </button>
- 25 <pre>{generation}</pre>
- 26 </div>
- 27 );
- 28}
Server
Now let's implement the getNotifications function. We'll use the generateObject function to generate the list of fictional notifications based on the schema we defined earlier.
'use server';
import { streamObject } from 'ai-toolkit';
import { openai } from '@ai-toolkit/openai';
import { createStreamableValue } from '@ai-toolkit/rsc';
import { z } from 'zod';
export async function generate(input: string) {
'use server';
const stream = createStreamableValue();
(async () => {
const { partialObjectStream } = streamObject({
model: openai('gpt-4.1'),
system: 'You generate three notifications for a messages app.',
prompt: input,
schema: z.object({
notifications: z.array(
z.object({
name: z.string().describe('Name of a fictional person.'),
message: z.string().describe('Do not use emojis or links.'),
minutesAgo: z.number(),
}),
),
}),
});
for await (const partialObject of partialObjectStream) {
stream.update(partialObject);
}
stream.done();
})();
return { object: stream.value };
}
- 1'use server';
- 2import { streamObject } from 'ai-toolkit';
- 3import { openai } from '@ai-toolkit/openai';
- 4import { createStreamableValue } from '@ai-toolkit/rsc';
- 5import { z } from 'zod';
- 6export async function generate(input: string) {
- 7 'use server';
- 8 const stream = createStreamableValue();
- 9 (async () => {
- 10 const { partialObjectStream } = streamObject({
- 11 model: openai('gpt-4.1'),
- 12 system: 'You generate three notifications for a messages app.',
- 13 prompt: input,
- 14 schema: z.object({
- 15 notifications: z.array(
- 16 z.object({
- 17 name: z.string().describe('Name of a fictional person.'),
- 18 message: z.string().describe('Do not use emojis or links.'),
- 19 minutesAgo: z.number(),
- 20 }),
- 21 ),
- 22 }),
- 23 });
- 24 for await (const partialObject of partialObjectStream) {
- 25 stream.update(partialObject);
- 26 }
- 27 stream.done();
- 28 })();
- 29 return { object: stream.value };
- 30}