React 앱에 AI를 추가할 때마다 저는 똑같은 200줄 이상의 코드를 다시 작성해야 했습니다. 스트리밍 루프 (Streaming loop), 수동 메시지 히스토리 (Manual message history), 도구 호출 오케스트레이션 (Tool call orchestration), 에러 핸들링 (Error handling). 그리고 기억해낸 경우에만 setIsLoading(false)를 호출하는 작업까지 말이죠.

세 번째 프로젝트를 마친 후 저는 멈춰서 질문했습니다. 왜 아무도 RTK Query가 REST API를 해결한 방식처럼 이 문제를 해결하지 않는 걸까?

그래서 저는 Strand (https://github.com/strand-js/strand)를 만들었습니다.

이전 (Before)

const [messages, setMessages] = useState([]) const [isLoading, setIsLoading] = useState(false)
async function send(text) { setIsLoading(true) 수동으로 토큰 스트리밍 (manually stream tokens) 수동으로 도구 호출 감지 (manually detect tool calls) 완료될 때까지 수동으로 루프 (manually loop until done) 기억해낸 경우에만 setIsLoading(false) 호출 }

이후 (After)

const { messages, send, isPending, isStreaming, cancel } = useConversation({ system: 'You are a helpful assistant.', })

스트리밍 (Streaming), 히스토리 (history), 도구 호출 (tool calls), 취소 (cancellation), 재시도 (retry)까지 모두 처리됩니다.

다른 누구도 구현하지 못한 것: useToolCall

Prop drilling 없이 어떤 컴포넌트에서든 작동합니다.
function WeatherStatus() { const { status, input, output } = useToolCall('get_weather')
if (status === 'running') return <div>{input?.location} 확인 중…</div>
if (status === 'done') return <div>{output?.temp}°F</div> return null }

실시간 도구 상태: pending → running → done. 트리 어디에서나 관찰 가능합니다.

isLoading 설계 결함 수정

Vercel AI SDK에는 isLoading이 멈춰버리는 문제에 대한 4개 이상의 오픈 이슈 (https://github.com/vercel/ai/issues)가 있습니다. 그 이유는 "요청 전송됨 (request sent)"과 "토큰 도착 중 (tokens arriving)"은 서로 다른 상태이기 때문이라는 구조적인 문제입니다.

Strand는 네 가지를 추적합니다:

const { isPending, isStreaming, isDone, error } = useConversation() // isPending: 첫 번째 토큰을 기다리는 중 // isStreaming: 토큰이 도착하는 중 // isDone: 방금 완료됨 // error: 무언가 실패함

Anthropic, OpenAI, 그리고 Google Gemini와 함께 작동합니다.

npm install @strand-js/core @strand-js/react zod
npm install @strand-js/anthropic # 또는 openai, 또는 google
서버 임포트(import) 하나만 변경하여 제공자(provider)를 교체하세요. 프론트엔드 변경 사항은 전혀 없습니다.

v0.1.8, MIT, 오픈 소스 (open source).

→ https://github.com/strand-js/strand