How does streaming work in LLM APIs and why does it matter for UX?

export async function POST(req: Request) {
  const abort = new AbortController();
  req.signal.addEventListener("abort", () => abort.abort());   // user left → stop paying

  const stream = await client.messages.create(
    { model, max_tokens: 1024, stream: true, messages: await req.json() },
    { signal: abort.signal },
  );

  return new Response(new ReadableStream({
    async start(controller) {
      for await (const event of stream) {
        if (event.type === "content_block_delta")
          controller.enqueue(sse(event.delta.text));           // relay, never accumulate
      }
      controller.close();
    },
  }), { headers: { "Content-Type": "text/event-stream", "X-Accel-Buffering": "no" } });
}