I got tired of rewriting the same AI boilerplate so I built a library to fix it

Description and use

Strand simplifies AI integration in React by eliminating 200+ lines of boilerplate, offering hooks for conversation, streaming, and tool calls across providers.

Problem

Developers repeatedly rewrite over 200 lines of boilerplate for AI integration in React apps, handling streaming, history, tool calls, error handling, and loading states manually.

Outcome

Strand reduces boilerplate from 200+ lines to a concise hook-based API, handling streaming, history, tool calls, cancellation, and detailed loading states across providers.

Workflow

• 1. Install Strand packages: npm install @strand-js/core @strand-js/react zod
• 2. Install provider package (e.g., @strand-js/anthropic)
• 3. Import useConversation in component: const {messages, send, isPending, isStreaming, cancel} = useConversation({system:'You are a helpful assistant.'});
• 4. Use send(text) to initiate conversation; handle UI based on isPending/isStreaming states.
• 5. For tool calls, use useToolCall('tool_name') to access status, input, output across any component.
• 6. Swap AI provider by changing server import; no frontend changes needed.

Evidence

After the third project I stopped and asked: why is nobody solving this the way RTK Query solved REST APIs?

Source

Works with Anthropic, OpenAI, and Google Gemini

Source