claude-api-streaming-frontend

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

Ir para a instalação

Repositório: puk0806/gugbab-claude
Última atividade na origem: 12 de agosto de 2026 às 00:35
Idioma detectado do SKILL.md: coreano
Estrelas: 2
Forks: 0

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

2 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

방식

보안

용도

클라이언트 직접 호출 (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();

방식

보안

용도