Streaming Responses: SSE Pattern

import OpenAI from "openai";
const openai = new OpenAI();
 
const stream = await openai.chat.completions.create({
  model: "gpt-5",
  messages: [{ role: "user", content: "10 farklı pasta tarifi yaz." }],
  stream: true,  // ← anahtar
});
 
for await (const chunk of stream) {
  const content = chunk.choices[0]?.delta?.content || "";
  process.stdout.write(content);
}
// Yanıt akarak ekrana yazılır

from openai import OpenAI
client = OpenAI()
 
stream = client.chat.completions.create(
    model="gpt-5",
    messages=[{"role": "user", "content": "10 farklı pasta tarifi yaz."}],
    stream=True,
)
 
for chunk in stream:
    content = chunk.choices[0].delta.content or ""
    print(content, end="", flush=True)

// app/api/chat/route.ts (Next.js App Router)
import { OpenAI } from "openai";
import { OpenAIStream, StreamingTextResponse } from "ai";
 
const openai = new OpenAI();
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const response = await openai.chat.completions.create({
    model: "gpt-5",
    messages,
    stream: true,
  });
 
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}
 
// Frontend (React + Vercel ai sdk)
import { useChat } from "ai/react";
 
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
 
  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === "user" ? "Sen: " : "AI: "}
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}