Add use-chat-tool-call-ui example. (#1523)

examples/next-openai/app/api/chat/route.ts

@@ -1,5 +1,5 @@
 import { openai } from '@ai-sdk/openai';
-import { StreamingTextResponse, streamText } from 'ai';
+import { streamText } from 'ai';
 
 export const dynamic = 'force-dynamic';
 
@@ -14,5 +14,5 @@ export async function POST(req: Request) {
   });
 
   // Respond with the stream
-  return new StreamingTextResponse(result.toAIStream());
+  return result.toAIStreamResponse();
 }

examples/next-openai/app/api/use-chat-tool-call-ui/route.ts

@@ -0,0 +1,48 @@
+import { openai } from '@ai-sdk/openai';
+import { StreamData, StreamingTextResponse, streamText } from 'ai';
+import { z } from 'zod';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(req: Request) {
+  // Extract the `messages` from the body of the request
+  const { messages } = await req.json();
+
+  // Call the language model
+  const result = await streamText({
+    model: openai('gpt-4-turbo'),
+    messages,
+    tools: {
+      weather: {
+        description: 'show the weather in a given city to the user',
+        parameters: z.object({ city: z.string() }),
+        execute: async ({ city }: { city: string }) => {
+          // return fake weather data:
+          return { weather: 'sunny' };
+        },
+      },
+    },
+  });
+
+  const streamData = new StreamData();
+
+  // async: process tool calls and append them to the stream data
+  (async () => {
+    try {
+      for await (const part of result.fullStream) {
+        if (part.type === 'tool-result') {
+          // only weather tool, so it's fully typed:
+          streamData.append({
+            city: part.args.city,
+            weather: part.result.weather,
+          });
+        }
+      }
+    } finally {
+      streamData.close();
+    }
+  })().catch(console.error);
+
+  // Respond with the stream
+  return new StreamingTextResponse(result.toAIStream(), undefined, streamData);
+}

examples/next-openai/app/use-chat-tool-call-ui/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useChat } from 'ai/react';
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit, data } = useChat({
+    api: '/api/use-chat-tool-call-ui',
+  });
+
+  return (
+    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+      {data?.map((d: any, i) => (
+        <div key={i} className="whitespace-pre-wrap">
+          {d.city ? `Weather in ${d.city}: ${d.weather}` : ''}
+        </div>
+      ))}
+
+      {messages.map(m => (
+        <div key={m.id} className="whitespace-pre-wrap">
+          {m.role === 'user' ? 'User: ' : 'AI: '}
+          {m.content}
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+          value={input}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  );
+}

examples/next-openai/package.json

@@ -14,7 +14,8 @@
     "next": "latest",
     "openai": "4.29.0",
     "react": "18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "zod": "3.23.4"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",