Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix (docs): fix wrong object key and duplicate doc #4157

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix (docs): fix wrong object key and duplicate doc #4157

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebdb297
fix wrong object key and duplicate doc for generate object nextjs coo…
dragos-cojocaru Dec 19, 2024
d579b68
ran prettier
dragos-cojocaru Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 2 additions & 106 deletions content/cookbook/01-next/30-generate-object.mdx
View file
Open in desktop
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" />
Loading