Skip to content

Commit

Permalink
fix wrong object key and duplicate doc for generate object nextjs coo…
Browse files Browse the repository at this point in the history
…kbook
  • Loading branch information
dragos-cojocaru committed Dec 19, 2024
1 parent 9c7653b commit ebdb297
Showing 1 changed file with 2 additions and 106 deletions.
108 changes: 2 additions & 106 deletions content/cookbook/01-next/30-generate-object.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default function Page() {
}),
}).then(response => {
response.json().then(json => {
setGeneration(json.object);
setGeneration(json.notifications);
setIsLoading(false);
});
});
Expand Down Expand Up @@ -110,108 +110,4 @@ export async function POST(req: Request) {

---

<GithubLink link="https://github.com/vercel/ai/blob/main/examples/next-openai-pages/pages/basics/generate-object/index.tsx" />

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](https://zod.dev), 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.

<Browser>
<ObjectGeneration
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,
},
],
}}
/>
</Browser>

## Client

Let's create a simple React component that will make a POST request to the `/api/completion` endpoint when a button is clicked. The endpoint will return the generated object based on the input prompt and we'll display it.

```tsx filename='pages/index.tsx'
import { useState } from 'react';

export default function Page() {
const [generation, setGeneration] = useState();
const [isLoading, setIsLoading] = useState(false);

return (
<div>
<div
onClick={async () => {
setIsLoading(true);

await fetch('/api/completion', {
method: 'POST',
body: JSON.stringify({
prompt: 'Messages during finals week.',
}),
}).then(response => {
response.json().then(json => {
setGeneration(json.object);
setIsLoading(false);
});
});
}}
>
Generate
</div>

{isLoading ? 'Loading...' : <pre>{JSON.stringify(generation)}</pre>}
</div>
);
}
```

## 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 { openai } from '@ai-sdk/openai';
import { z } from 'zod';

export async function POST(req: Request) {
const { prompt }: { prompt: string } = await req.json();

const result = await generateObject({
model: openai('gpt-4'),
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();
}
```

---

<GithubLink link="https://github.com/vercel/ai/blob/main/examples/next-openai-pages/pages/basics/generate-object/index.tsx" />
<GithubLink link="https://github.com/vercel/ai/blob/main/examples/next-openai-pages/pages/basics/generate-object/index.tsx" />

0 comments on commit ebdb297

Please sign in to comment.