claude-api-streaming-frontend

Claude Messages API 스트리밍 응답을 React 프론트에서 받는 패턴. SSE 이벤트 처리, ReadableStream 파싱, useState throttle, AbortController 중단, 백엔드 프록시 권장, 프롬프트 캐싱, 에러 재시도까지 포함.

Jump to install

Repository: puk0806/gugbab-claude
Last source activity: August 12, 2026 at 00:35
Detected SKILL.md language: Korean
Stars: 2
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/puk0806/gugbab-claude --skill claude-api-streaming-frontend

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

2 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

방식

보안

용도

클라이언트 직접 호출 (dangerouslyAllowBrowser: true)

❌ API 키 노출

로컬 프로토타입 한정

백엔드 프록시 (Next.js Route / Axum / Express / Spring)

✅ 키 서버 보관

프로덕션 표준

event: message_start data: {"type":"message_start","message":{...}} event: content_block_start data: {"type":"content_block_start","index":0,"content_block":{"type":"text","text":""}} event: ping data: {"type":"ping"} event: content_block_delta data: {"type":"content_block_delta","index":0,"delta":{"type":"text_delta","text":"Hello"}} event: content_block_delta data: {"type":"content_block_delta","index":0,"delta":{"type":"text_delta","text":"!"}} event: content_block_stop data: {"type":"content_block_stop","index":0} event: message_delta data: {"type":"message_delta","delta":{"stop_reason":"end_turn"},"usage":{"output_tokens":15}} event: message_stop data: {"type":"message_stop"}

delta.type

발생 조건

누적 방법

text_delta

일반 텍스트 응답

delta.text 문자열 연결

input_json_delta

tool_use 입력

delta.partial_json 연결 후 content_block_stop에서 JSON.parse

thinking_delta

adaptive thinking

delta.thinking 연결

signature_delta

thinking 종료 직전

delta.signature 1회 (무결성 검증용)

// hooks/useClaudeStream.ts import { useCallback, useRef, useState } from 'react'; interface UseClaudeStreamResult { text: string; isStreaming: boolean; error: Error | null; send: (prompt: string) => Promise<void>; abort: () => void; } export function useClaudeStream(): UseClaudeStreamResult { const [text, setText] = useState(''); const [isStreaming, setIsStreaming] = useState(false); const [error, setError] = useState<Error | null>(null); const controllerRef = useRef<AbortController | null>(null); const abort = useCallback(() => { controllerRef.current?.abort(); controllerRef.current = null; }, []); const send = useCallback( (: ) => { (); controller = (); controllerRef. = controller; (); (); (); { res = (, { : , : { : }, : .({ prompt }), : controller., }); (!res.) { (); } (!res.) { (); } reader = res..(); decoder = (); buffer = ; pending = ; : | = ; = () => { rafId = ; (pending) { ( prev + pending); pending = ; } }; = () => { pending += chunk; (rafId === ) { rafId = (flush); } }; () { { done, value } = reader.(); (done) ; buffer += decoder.(value, { : }); : ; ((sepIdx = buffer.()) !== -) { rawEvent = buffer.(, sepIdx); buffer = buffer.(sepIdx + ); dataLines = rawEvent .() .( l.()) .( l.()); (dataLines. === ) ; dataStr = dataLines.(); : ; { json = .(dataStr); } { ; } evt = json { : ; ?: { ?: ; ?: }; ?: { : ; : }; }; (evt. === && evt.?. === ) { (evt.. ?? ); } (evt. === ) { (evt.?. ?? ); } (evt. === ) { } } } (rafId !== ) (rafId); (); } (e) { ((e ). === ) { } { (e ); } } { (); controllerRef. = ; } }, [abort]); { text, isStreaming, error, send, abort }; }

// components/ChatBox.tsx import { useEffect } from 'react'; import { useClaudeStream } from '@/hooks/useClaudeStream'; export function ChatBox() { const { text, isStreaming, error, send, abort } = useClaudeStream(); useEffect(() => { // unmount 시 진행 중 스트림 중단 (메모리 누수·React state warning 방지) return () => abort(); }, [abort]); return ( <div> <pre>{text}</pre> {isStreaming ? ( <button onClick={abort}>중단</button> ) : ( <button onClick={() => send('한국 도덕교육에서 절제의 의미는?')}>전송</button> )} {error && <p>에러: {error.message}</p>} </div> ); }

// app/api/claude/stream/route.ts import Anthropic from '@anthropic-ai/sdk'; export const runtime = 'edge'; const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY! }); export async function POST(req: Request) { const { prompt } = await req.json(); const upstream = await client.messages.create({ model: 'claude-sonnet-5', max_tokens: 1024, system: [ { type: 'text', text: '당신은 도덕교육 전문가입니다. ...', cache_control: { type: 'ephemeral' }, // 5분 캐시 }, ], messages: [{ role: 'user', content: prompt }], stream: true, }); // SDK가 반환하는 AsyncIterable<MessageStreamEvent>를 SSE로 직렬화 const encoder = new TextEncoder(); const stream = ({ () { { ( event upstream) { payload = ; controller.(encoder.(payload)); } controller.(); } (err) { errPayload = ; controller.(encoder.(errPayload)); controller.(); } }, }); (stream, { : { : , : , : , }, }); }

use axum::response::sse::{Event, Sse}; use futures::stream::Stream; // reqwest로 Anthropic /v1/messages 호출 후 응답 body를 줄 단위로 파싱 // SDK 미사용 시: header에 anthropic-version, x-api-key, content-type 필수 // 반환 타입: Sse<impl Stream<Item = Result<Event, Infallible>>>

import Anthropic from '@anthropic-ai/sdk'; const client = new Anthropic({ apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY, // 빌드 산출물에 박힘 — 위험 dangerouslyAllowBrowser: true, }); const stream = client.messages.stream({ model: 'claude-sonnet-5', max_tokens: 1024, messages: [{ role: 'user', content: 'Hello' }], }); stream.on('text', (chunk) => { // chunk 단위로 누적 }); stream.on('error', (err) => console.error(err)); // 중단 stream.controller.abort();

방식

보안

용도