AI TOOLKIT
Get started
Recipes/Next.js

Generate Object

Learn how to generate object using the AI TOOLKIT and Next.js

3 min readnextstructured dataView source

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 ai

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.

'use client';

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.notifications);

setIsLoading(false);

});

});

}}

>

Generate

</div>

{isLoading ? (

'Loading...'

) : (

<pre>{JSON.stringify(generation, null, 2)}</pre>

)}

</div>

);

}

app/page.tsx
tsx
  1. 1'use client';
  2. 2import { useState } from 'react';
  3. 3export default function Page() {
  4. 4 const [generation, setGeneration] = useState();
  5. 5 const [isLoading, setIsLoading] = useState(false);
  6. 6 return (
  7. 7 <div>
  8. 8 <div
  9. 9 onClick={async () => {
  10. 10 setIsLoading(true);
  11. 11 await fetch('/api/completion', {
  12. 12 method: 'POST',
  13. 13 body: JSON.stringify({
  14. 14 prompt: 'Messages during finals week.',
  15. 15 }),
  16. 16 }).then(response => {
  17. 17 response.json().then(json => {
  18. 18 setGeneration(json.notifications);
  19. 19 setIsLoading(false);
  20. 20 });
  21. 21 });
  22. 22 }}
  23. 23 >
  24. 24 Generate
  25. 25 </div>
  26. 26 {isLoading ? (
  27. 27 'Loading...'
  28. 28 ) : (
  29. 29 <pre>{JSON.stringify(generation, null, 2)}</pre>
  30. 30 )}
  31. 31 </div>
  32. 32 );
  33. 33}

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.

import { generateObject } from 'ai-toolkit';

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();

}

---

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

app/api/completion/route.ts
typescript
  1. 1import { generateObject } from 'ai-toolkit';
  2. 2import { z } from 'zod';
  3. 3export async function POST(req: Request) {
  4. 4 const { prompt }: { prompt: string } = await req.json();
  5. 5 const result = await generateObject({
  6. 6 model: 'openai/gpt-4o',
  7. 7 system: 'You generate three notifications for a messages app.',
  8. 8 prompt,
  9. 9 schema: z.object({
  10. 10 notifications: z.array(
  11. 11 z.object({
  12. 12 name: z.string().describe('Name of a fictional person.'),
  13. 13 message: z.string().describe('Do not use emojis or links.'),
  14. 14 minutesAgo: z.number(),
  15. 15 }),
  16. 16 ),
  17. 17 }),
  18. 18 });
  19. 19 return result.toJsonResponse();
  20. 20}
Browse all recipes