Prompt Content
Initialize a new Next.js project and integrate the Vercel AI SDK to create a basic streaming chat interface. Configure it to use OpenAI's `gpt-3.5-turbo` (or `o3`). Provide the necessary `api/chat/route.ts` and client-side component code.
```typescript
// api/chat/route.ts
import { createOpenAI } from '@ai-sdk/openai';
import { streamText } from 'ai';
const openai = createOpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: openai('gpt-3.5-turbo'),
messages,
});
return result.to Response();
}
```
```typescript
// app/page.tsx (or similar client component)
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}><b>{m.role}:</b> {m.content}</div>
))}
<form onSubmit={handleSubmit}>
<input
value={input}
placeholder="Say something..."
onChange={handleInputChange}
/>
<button type="submit">Send</button>
</form>
</div>
);
}
```Try this prompt
Open the workspace to execute this prompt with free credits, or use your own API keys for unlimited usage.
Related Prompts
Explore similar prompts from our community
Usage Tips
Copy the prompt and paste it into your preferred AI tool (Claude, ChatGPT, Gemini)
Customize placeholder values with your specific requirements and context
For best results, provide clear examples and test different variations