{
setIsLoading(true);
await fetch('/api/completion', {
method: 'POST',
body: JSON.stringify({
prompt: 'Messages during finals week.',
}),
}).then(response => {
response.json().then(json => {
setGeneration(json.notifications);
setIsLoading(false);
});
});
}}
>
Generate
{isLoading ? (
'Loading...'
) : (
{JSON.stringify(generation, null, 2)}
)}
);
}
```
## Server
Let's create a route handler for `/api/completion` that will generate an object based on the input prompt. The route will call the `generateObject` function from the `ai` module, which will then generate an object based on the input prompt and return it.
```typescript filename='app/api/completion/route.ts'
import { generateObject } from 'ai';
import { z } from 'zod';
export async function POST(req: Request) {
const { prompt }: { prompt: string } = await req.json();
const result = await generateObject({
model: 'openai/gpt-4o',
system: 'You generate three notifications for a messages app.',
prompt,
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 result.toJsonResponse();
}
```
---