Streaming and Real-Time AI Responses: Building Responsive Apps

// Backend: Stream tokens
async function* streamResponse(prompt) {
  const stream = await openai.chat.completions.create({
    messages: [{ role: 'user', content: prompt }],
    stream: true
  });
  
  for await (const chunk of stream) {
    yield chunk.choices[0]?.delta?.content || '';
  }
}

// Frontend: Display tokens
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ prompt })
});

const reader = response.body.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) break;
  appendToDisplay(new TextDecoder().decode(value));
}