chore (examples): add useObject to next-openai-pages (#2117)

examples/next-openai-pages/app/api/stream-object/route.ts

@@ -0,0 +1,25 @@
+import { openai } from '@ai-sdk/openai';
+import { streamObject } from 'ai';
+import { z } from 'zod';
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const context = await req.json();
+
+  const result = await streamObject({
+    model: openai('gpt-4-turbo'),
+    schema: z.object({
+      notifications: z.array(
+        z.object({
+          name: z.string().describe('Name of a fictional person.'),
+          message: z.string().describe('Message. Do not use emojis or links.'),
+        }),
+      ),
+    }),
+    prompt:
+      `Generate 3 notifications for a messages app in this context:` + context,
+  });
+
+  return result.toTextStreamResponse();
+}

examples/next-openai-pages/pages/basics/stream-object/index.tsx

@@ -0,0 +1,29 @@
+import { experimental_useObject } from 'ai/react';
+import { z } from 'zod';
+
+export default function Page() {
+  const { object, setInput } = experimental_useObject({
+    api: '/api/stream-object',
+    schema: z.object({ content: z.string() }),
+  });
+
+  return (
+    <div className="p-2 flex flex-col gap-2">
+      <div
+        className="p-2 bg-zinc-100 cursor-pointer"
+        onClick={async () => {
+          setInput('Final exams');
+        }}
+      >
+        Generate
+      </div>
+
+      <pre
+        className="text-sm w-full whitespace-pre-wrap"
+        data-testid="generation"
+      >
+        {JSON.stringify(object, null, 2)}
+      </pre>
+    </div>
+  );
+}

examples/next-openai-pages/pages/index.tsx

@@ -4,10 +4,6 @@ import Link from 'next/link';
 const inter = Inter({ subsets: ['latin'] });
 
 const examples = [
-  {
-    title: 'Generate object',
-    link: '/basics/generate-object',
-  },
   {
     title: 'Generate text',
     link: '/basics/generate-text',
@@ -16,26 +12,30 @@ const examples = [
     title: 'Stream text',
     link: '/basics/stream-text',
   },
+  {
+    title: 'Generate object',
+    link: '/basics/generate-object',
+  },
+  {
+    title: 'Stream object',
+    link: '/basics/stream-object',
+  },
   {
     title: 'Generate chat completion',
     link: '/chat/generate-chat',
   },
   {
-    title: 'Generate chat completion',
+    title: 'Stream chat completion',
     link: '/chat/stream-chat',
   },
   {
-    title: 'Generate chat completion (API route)',
+    title: 'Stream chat completion (API route)',
     link: '/chat/stream-chat-api-route',
   },
   {
-    title: 'Generate chat completion (edge runtime)',
+    title: 'Stream chat completion (edge runtime)',
     link: '/chat/stream-chat-edge',
   },
-  {
-    title: 'Stream chat completion',
-    link: '/chat/stream-chat',
-  },
   {
     title: 'Call tools',
     link: '/tools/call-tool',