스트리밍 응답 구현

STEP·19 / AI ORCHESTRATION / CHAPTER 8 — 스트리밍 구현

# Claude 스트리밍 (Node.js)

import Anthropic from '@anthropic-ai/sdk';
 
const stream = client.messages.stream({
  model: 'claude-sonnet-4-6',
  max_tokens: 1024,
  messages: [{ role: 'user', content: userMessage }]
});
 
// 실시간 출력
for await (const event of stream) {
  if (event.type === 'content_block_delta') {
    process.stdout.write(event.delta.text);
  }
}

# Next.js API Route 스트리밍

// app/api/chat/route.ts
export async function POST(req: Request) {
  const { message } = await req.json();
   
  const stream = new ReadableStream({
    async start(controller) {
      const s = client.messages.stream({...});
      for await (const event of s) {
        if (event.type === 'content_block_delta') {
          controller.enqueue(event.delta.text);
        }
      }
      controller.close();
    }
  });
  return new Response(stream);
}

# AI 프롬프트 활용

"이 스트리밍 API를 React에서 받아서
 타이핑 효과로 표시하는 컴포넌트를 만들어줘"