Generate Object
Learn how to generate 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 "generate object" example with useState. Earlier functions like generateText and streamText gave us the ability to generate unstructured text. However, if you want to generate structured data like JSON, you can provide a schema that describes the structure of your desired object to the generateObject function. The function requires you to provide a schema using zod, a library for defining schemas for JavaScript objects. By using zod, you can also use it to validate the generated object and ensure that it conforms to the specified structure. 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 { getNotifications } from './actions';
// 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 { notifications } = await getNotifications(
'Messages during finals week.',
);
setGeneration(JSON.stringify(notifications, null, 2));
}}
>
View Notifications
</button>
<pre>{generation}</pre>
</div>
);
}
- 1'use client';
- 2import { useState } from 'react';
- 3import { getNotifications } from './actions';
- 4// Allow streaming responses up to 30 seconds
- 5export const maxDuration = 30;
- 6export default function Home() {
- 7 const [generation, setGeneration] = useState<string>('');
- 8 return (
- 9 <div>
- 10 <button
- 11 onClick={async () => {
- 12 const { notifications } = await getNotifications(
- 13 'Messages during finals week.',
- 14 );
- 15 setGeneration(JSON.stringify(notifications, null, 2));
- 16 }}
- 17 >
- 18 View Notifications
- 19 </button>
- 20 <pre>{generation}</pre>
- 21 </div>
- 22 );
- 23}
Server
Now let's implement the getNotifications function. We'll use the generateObject function to generate the list of notifications based on the schema we defined earlier.
'use server';
import { generateObject } from 'ai-toolkit';
import { openai } from '@ai-toolkit/openai';
import { z } from 'zod';
export async function getNotifications(input: string) {
'use server';
const { object: notifications } = await generateObject({
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(),
}),
),
}),
});
return { notifications };
}
- 1'use server';
- 2import { generateObject } from 'ai-toolkit';
- 3import { openai } from '@ai-toolkit/openai';
- 4import { z } from 'zod';
- 5export async function getNotifications(input: string) {
- 6 'use server';
- 7 const { object: notifications } = await generateObject({
- 8 model: openai('gpt-4.1'),
- 9 system: 'You generate three notifications for a messages app.',
- 10 prompt: input,
- 11 schema: z.object({
- 12 notifications: z.array(
- 13 z.object({
- 14 name: z.string().describe('Name of a fictional person.'),
- 15 message: z.string().describe('Do not use emojis or links.'),
- 16 minutesAgo: z.number(),
- 17 }),
- 18 ),
- 19 }),
- 20 });
- 21 return { notifications };
- 22}