Streaming chat dari Claude API

Tanpa streaming, AI chat berasa loading screen. User klik kirim, nunggu 10 detik, baru lihat jawaban. Streaming bikin token nongol satu per satu — feel-nya lebih hidup. Snippet ini pakai SDK resmi Anthropic, tanpa library streaming tambahan.

Kode

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY!,
});

/**
 * Stream chat completion dari Claude.
 * Yields text chunks as they arrive.
 */
export async function* streamChat(
  userMessage: string,
  systemPrompt = "Kamu asisten yang ramah dan menjawab dalam Bahasa Indonesia."
): AsyncGenerator<string, void, unknown> {
  const stream = await client.messages.stream({
    model: "claude-opus-4-5",
    max_tokens: 1024,
    system: systemPrompt,
    messages: [{ role: "user", content: userMessage }],
  });

  for await (const event of stream) {
    if (
      event.type === "content_block_delta" &&
      event.delta.type === "text_delta"
    ) {
      yield event.delta.text;
    }
  }
}

Pemakaian

// CLI: print token-by-token ke terminal
async function main() {
  process.stdout.write("Claude: ");
  for await (const chunk of streamChat("Resep nasi goreng kampung dong?")) {
    process.stdout.write(chunk);
  }
  process.stdout.write("\n");
}

main();

// Next.js App Router — route handler
// app/api/chat/route.ts
export async function POST(req: Request) {
  const { message } = await req.json();

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      try {
        for await (const chunk of streamChat(message)) {
          controller.enqueue(encoder.encode(chunk));
        }
      } finally {
        controller.close();
      }
    },
  });

  return new Response(readable, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

Kapan dipakai

• Chatbot customer service Tokopedia / e-commerce — biar user tidak ngerasa hang.
• Code assistant in-editor — token muncul progressively saat suggest code.
• Long-form generator (artikel, email draft) — > 500 token output.
• Streaming dashboard insight — AI analisa data dan ngomong saat ngeproses.

Catatan

• API key di server only — jangan pernah expose ANTHROPIC_API_KEY ke client. Wrap di route handler / server action.
• Abort handling: kalau user navigate away, propagate AbortSignal ke stream.controller.abort() biar tidak buang token (= duit).
• Token cost: streaming tetap charge full token. Pastikan ada max_tokens reasonable supaya tidak meledak biayanya.
• Error mid-stream: kalau koneksi putus tengah jalan, partial text sudah ke-emit. Show retry button di UI dengan context history.

Jangan lupa for await di server side bisa block thread kalau backend single-process. Pakai edge runtime atau worker thread untuk concurrent request.