Last year, streaming AI responses meant writing WebSocket handlers, managing connection lifecycle, buffering chunks, rebuilding when the socket died. Vercel AI SDK erased that. It's a thin HTTP wrapper over Claude's streaming API that handles chunk concatenation, tool calls, and re-rendering on the client without a single socket event listener. Velocity X's Brain uses it to stream follow-up drafts, deal summaries, and next-best-action routing in <2 seconds flat.
Why Streaming Matters at All
A 10-person field sales team is on the phone with customers while Velocity X's Brain generates a follow-up email. Waiting 5 seconds for the full response before showing anything is dead time. Showing the first words in 200ms while the AI finishes typing the rest feels snappy. Streaming trades slightly higher latency (HTTP overhead) for perceived speed: the user sees partial results immediately, then watch the draft complete word-by-word.
Before Vercel AI SDK, building that meant: client WebSocket listener → server-side event emitter on Node/Python → route chunks through a message queue → handle reconnection → debug why some browsers don't support WebSockets in certain network conditions. For a 30-line feature, you'd write 500 lines of plumbing. AI SDK makes it three.
The Architecture: Browser → Edge → Claude API
Client (React, Astro Islands). Vercel AI SDK exports `useChat` — a React hook. Call it once at component mount, pass the server endpoint, get back `messages`, `input`, `handleInputChange`, and `handleSubmit`. Bind the submit to a button or form. That's it. Behind the scenes, `useChat` opens a POST to your server, reads the response as `text/event-stream`, and accumulates chunks into the messages array. Your component re-renders on every chunk arrival.
{`import { useChat } from 'ai/react';
export function BrainDraft() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: '/api/brain-draft',
});
return (
{messages.map((msg) => (
{msg.role}: {msg.content}
))}
);
}`}Server (Netlify Edge Function or Node). The `/api/brain-draft` endpoint receives the user's message and context. It calls Claude's streaming API (via Anthropic SDK with `stream=true`), wraps each chunk in the OpenAI-compatible event format (`data: {"content": "..."}` + newlines), and pipes it back to the client. Netlify Edge Functions handle this automatically — they support streaming responses out of the box.
{`export default async (request) => {
const { messages } = await request.json();
const response = await anthropic.messages.create({
model: 'claude-3-5-sonnet-20241022',
max_tokens: 1024,
messages: messages,
stream: true,
});
// Convert stream to SSE format
const encoder = new TextEncoder();
const readable = response.toHttpResponse().body;
return new Response(readable, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
},
});
};`}Claude API. Streaming is built into the Anthropic SDK — no special syntax. Set `stream: true`, iterate chunks, extract the `delta.text` property, and push to the response stream. Token usage is calculated the same as non-streaming (you're not charged per chunk, just per input + output tokens).
Handling Tool Calls in Streams
Real agents use tools: "draft an email" might call a function to fetch CRM context, then draft based on live data. Vercel AI SDK has built-in tool-call handling. Define your tools in the Edge Function, pass them to Claude, and the SDK handles the back-and-forth. When Claude calls a tool, the stream pauses, you execute the function server-side, feed the result back into the conversation, and resume streaming. The client sees the entire flow as one continuous response.
{`const tools = [
{
name: 'get_crmcontext',
description: 'Fetch customer history and last visit notes',
inputSchema: {
type: 'object',
properties: {
customerId: { type: 'string' },
},
},
},
];
const response = await anthropic.messages.create({
model: 'claude-3-5-sonnet-20241022',
max_tokens: 1024,
messages: messages,
tools: tools,
stream: true,
});
// Stream chunks include tool_use blocks
// SDK handles the tool execution + re-injection automatically
for await (const event of response) {
if (event.type === 'content_block_delta') {
// Send chunk to client
}
}`}Real-World Example: Brain Follow-Up Drafts
A rep in Velocity X finishes a customer call. They hit "Generate Follow-Up" and Velocity X's Brain: 1. Calls the Claude API with visit notes and customer context. 2. Claude (Sonnet for speed, Opus for high-stakes deals) drafts an email. 3. Client receives chunks in ~100ms, displays "Dear [Customer]…" immediately. 4. The draft completes word-by-word while the rep reviews it. 5. Rep hits "Send" or "Edit and Send" — no additional API call. Total time to first response: 200ms. Time to complete draft: 2–3 seconds. Before streaming, the rep waited 5 seconds for nothing.
Six FAQs
Does Vercel AI SDK lock me into Vercel?
No. It runs on Netlify, AWS Lambda, Node.js servers, anywhere. "Vercel" is a misnomer — it's framework-agnostic. The SDK is just HTTP wrappers and React hooks. Deploy the Edge Function wherever you want.
What's the latency hit compared to non-streaming?
Negligible. You're adding HTTP headers + event serialization, but Claude's API still takes 1–5 seconds to generate the response. Streaming saves 4+ seconds of perceived wait time. Worth it.
Does streaming cost more?
No. Token usage is the same. You pay for input tokens + output tokens, whether you stream them or wait for the full response. Streaming is just a different transport layer.
What if the client loses the connection mid-stream?
The stream breaks. `useChat` doesn't retry automatically — if the user closes the tab or loses Wi-Fi, the draft is lost. For critical workflows, store partial drafts client-side and let the user re-submit. Velocity X saves draft-in-progress to IndexedDB every 500ms.
Can I use streaming with tool calls?
Yes. Claude's streaming API supports tool-use blocks. When Claude calls a tool, the stream includes a `tool_use` delta. Pause streaming, execute the tool, inject the result, and resume. Vercel AI SDK handles this with the `tools` parameter — no custom logic needed.
How do I monitor token usage when streaming?
Claude includes `usage.input_tokens` and `usage.output_tokens` in the final response event. Collect that server-side and log it to your analytics or billing system. Streaming doesn't hide token counts — they're just delivered at the end of the stream instead of the beginning.
The Bottom Line
Streaming AI responses used to mean building WebSocket infrastructure. Vercel AI SDK flattens it to a one-liner on the client and a streaming response on the server. If you're building chat UIs, drafting interfaces, or any real-time AI feature, stream it. Your users will perceive you as faster than competitors who show loading spinners. For a detailed breakdown of Velocity X's Brain architecture and cost optimization, see the pricing page. For the broader story on multi-model decision logic, check how Brain routes between Haiku, Sonnet, and Opus.