nextjs_vercel_ai_sdk_streaming_chat_with_openai.ts

1// app/api/chat/route.ts
2import { openai } from '@ai-sdk/openai';
3import { streamText } from 'ai';
4
5// Allow streaming responses up to 30 seconds
6export const maxDuration = 30;
7
8export async function POST(req: Request) {
9  const { messages } = await req.json();
10
11  const result = await streamText({
12    model: openai('gpt-4o'),
13    messages,
14  });
15
16  return result.toDataStreamResponse();
17}
18
19// app/page.tsx
20'use client';
21
22import { useChat } from 'ai/react';
23
24export default function Chat() {
25  const { messages, input, handleInputChange, handleSubmit } = useChat();
26  return (
27    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
28      {messages.map(m => (
29        <div key={m.id} className="whitespace-pre-wrap">
30          {m.role === 'user' ? 'User: ' : 'AI: '}
31          {m.content}
32        </div>
33      ))}
34
35      <form onSubmit={handleSubmit}>
36        <input
37          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
38          value={input}
39          placeholder="Say something..."
40          onChange={handleInputChange}
41        />
42      </form>
43    </div>
44  );
45}