'use client' import { useState, useRef } from 'react' type Message = { role: 'user' | 'assistant'; content: string } export default function ChatPage() { const [messages, setMessages] = useState([]) const [input, setInput] = useState('') const [streaming, setStreaming] = useState(false) async function sendMessage(e: React.FormEvent) { e.preventDefault() if (!input.trim() || streaming) return const userMsg: Message = { role: 'user', content: input } const newMessages = [...messages, userMsg] setMessages(newMessages) setInput('') setStreaming(true) // Add empty assistant message we will stream into setMessages((prev) => [...prev, { role: 'assistant', content: '' }]) const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }), }) const reader = res.body!.getReader() const decoder = new TextDecoder() while (true) { const { done, value } = await reader.read() if (done) break const text = decoder.decode(value) setMessages((prev) => { const last = prev[prev.length - 1] return [...prev.slice(0, -1), { ...last, content: last.content + text }] }) } setStreaming(false) } return (

{messages.map((m, i) => (

{m.role}

{m.content}

))}

) }

Your First Chatbot — Streaming Responses in Next.js