{"id":360,"date":"2026-06-23T13:05:01","date_gmt":"2026-06-23T13:05:01","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/vercel-ai-sdk-v5-what-i-actually-use-in-real-apps\/"},"modified":"2026-06-23T13:05:01","modified_gmt":"2026-06-23T13:05:01","slug":"vercel-ai-sdk-v5-what-i-actually-use-in-real-apps","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/vercel-ai-sdk-v5-what-i-actually-use-in-real-apps\/","title":{"rendered":"Vercel AI SDK v5: What I Actually Use in Real Apps"},"content":{"rendered":"

Confession: I shipped my first chatbot in 2023 by hand-rolling a fetch streaming parser with a useEffect<\/code> that I’d be embarrassed to show you now. I knew Vercel had an AI SDK. I also knew that “AI SDK” in 2023 mostly meant “a wrapper that costs you a week of debugging the moment you do anything weird.” So I skipped it.<\/p>\n

I gave the SDK another try this spring when v5 dropped, partly because a client asked me to ship a support chatbot with tool calling and streaming UI in a week, partly because I was tired of maintaining my own SSE parser. Three projects later I’m still using it, and I’m using it differently than I expected. Some of the v5 abstractions are exactly what I needed. A few I’ve quietly worked around.<\/p>\n

Here’s what I actually reach for, what I skip, and what I’d warn you about before you pnpm add ai<\/code> in a real codebase.<\/p>\n

Why I bothered with v5 at all<\/h2>\n

The honest answer is tool calling without writing a route handler for each tool. In v4 I had to wire up experimental_StreamData<\/code>, a custom server endpoint, and a typed dispatcher on the client. It worked. It also meant that every time I added a new tool I touched three files and forgot at least one.<\/p>\n

The v5 release<\/a> moved tool definitions and dispatch into a tools<\/code> object you pass to streamText<\/code>, and the matching tool calls land in your message stream automatically. The other change I care about is the typed useChat<\/code> hook. It actually knows the shape of your tool results now, which means TypeScript catches the case where I rename a tool argument and forget about the React component reading it.<\/p>\n

A few things didn’t change. The SDK still leans on Next.js conventions hard. If you’re on a Hono or Fastify backend you can use the core functions, but you’ll write more glue than the docs suggest. And the SDK still doesn’t have an opinion about cost tracking, so you’ll bolt on your own usage logger.<\/p>\n

Here’s the rough shape of the difference, simplified:<\/p>\n

\/\/ v4 - manual stream plus custom dispatch\nimport { OpenAIStream, StreamingTextResponse } from 'ai'\nconst stream = OpenAIStream(completion, { experimental_onToolCall: dispatch })\nreturn new StreamingTextResponse(stream)\n<\/code><\/pre>\n
\/\/ v5 - tools live in the call\nimport { streamText, tool } from 'ai'\nimport { openai } from '@ai-sdk\/openai'\nimport { z } from 'zod'\n\nconst result = await streamText({\n  model: openai('gpt-4.1'),\n  messages,\n  tools: {\n    searchDocs: tool({\n      description: 'Search the internal docs',\n      inputSchema: z.object({ query: z.string() }),\n      execute: async ({ query }) => searchIndex(query),\n    }),\n  },\n})\nreturn result.toUIMessageStreamResponse()\n<\/code><\/pre>\n
useChat with typed message parts<\/h2>\n
useChat<\/code> got real types for message.parts<\/code> in v5, which sounds boring until you’ve spent an evening guessing whether a part was a text chunk or a tool result. Each part is discriminated by type<\/code>, and the SDK gives you helpers for the common shapes. The other useful change is that useChat<\/code> exposes a sendMessage<\/code> function instead of overloading the form-submit handler, so I can call it from a button, a voice input, or a queued reconnect without faking a synthetic event.<\/p>\n
'use client'\nimport { useChat } from '@ai-sdk\/react'\n\nexport function Chat() {\n  const { messages, sendMessage } = useChat()\n  return (\n    <div>\n      {messages.map(m => (\n        <div key={m.id}>\n          {m.parts.map((p, i) => {\n            if (p.type === 'text') return <p key={i}>{p.text}<\/p>\n            if (p.type === 'tool-searchDocs')\n              return <SearchHits key={i} results={p.output} \/>\n            return null\n          })}\n        <\/div>\n      ))}\n      <button onClick={() => sendMessage({ text: 'find the refund policy' })}>\n        Ask\n      <\/button>\n    <\/div>\n  )\n}\n<\/code><\/pre>\n
One catch I hit early: the tool-<name><\/code> part type is generated from your server tool name, so if you rename searchDocs<\/code> to findDocs<\/code> you have to update both the server and the rendering. TypeScript catches it if you set up the types right. It stays silent if you don’t.<\/p>\n
Tool calling that didn’t make me write a router<\/h2>\n
The thing I actually like in v5 is that tool calls show up as message parts in the same stream as the assistant text. In v4 I had a separate data<\/code> channel for tool output that I’d merge in render. In v5 the part sits right next to the text, so my UI just maps over m.parts<\/code> and renders whatever it sees.<\/p>\n
Real example from my last project, a support bot that can pull an order status and a ticket history:<\/p>\n
import { streamText, tool, stepCountIs } from 'ai'\nimport { openai } from '@ai-sdk\/openai'\nimport { z } from 'zod'\n\nconst result = await streamText({\n  model: openai('gpt-4.1'),\n  system: ORDER_SUPPORT_PROMPT,\n  messages,\n  tools: {\n    getOrder: tool({\n      description: 'Look up an order by ID',\n      inputSchema: z.object({ orderId: z.string() }),\n      execute: async ({ orderId }) => {\n        const res = await orders.find(orderId)\n        if (!res) throw new Error('Order not found')\n        return res\n      },\n    }),\n    getTickets: tool({\n      description: 'List support tickets for a customer',\n      inputSchema: z.object({ customerId: z.string() }),\n      execute: async ({ customerId }) => tickets.listFor(customerId),\n    }),\n  },\n  stopWhen: stepCountIs(4),\n})\n<\/code><\/pre>\n
stopWhen: stepCountIs(4)<\/code> saved me from a runaway loop on the first day. If your tools call other tools and you don’t cap the steps, you’ll get a $7 invoice for one chat session. Ask me how I know. I cover the wider problem of agents wandering off in my post on context engineering versus prompt engineering<\/a>, and the short version is “always give agents a budget and a stop condition.”<\/p>\n
You can read the full tool-calling reference in the SDK docs<\/a> if you want the longer list of options. The two flags I touch most often are stopWhen<\/code> and toolChoice<\/code>.<\/p>\n
Streaming UI: when generative UI is worth it<\/h2>\n
Generative UI, where the model returns a structured object and you render a React component for it, is the headline feature in v5 marketing. I use it for two things: tabular results like order details and search hits, and explicit confirmation cards. For free-form prose I just stream text.<\/p>\n
The decision rule I use is simple. If the data is structured and the user is going to act on it, stream an object. If the user might want to copy-paste the answer, stream text.<\/p>\n
import { streamObject } from 'ai'\nimport { openai } from '@ai-sdk\/openai'\nimport { z } from 'zod'\n\nconst result = await streamObject({\n  model: openai('gpt-4.1'),\n  schema: z.object({\n    summary: z.string(),\n    actions: z.array(z.object({\n      label: z.string(),\n      kind: z.enum(['link', 'button']),\n    })),\n  }),\n  prompt: assistantPrompt,\n})\n<\/code><\/pre>\n
Where I don’t use it: anything the user might want to copy-paste. A user expects to highlight text from a chat. A React card breaks that flow. So I default to text and only reach for structured generation when the data really is structured. The same caution shows up in my notes on agentic coding<\/a>: pick the cheapest representation that gets the job done.<\/p>\n
Where the v5 abstraction got in my way<\/h2>\n
A few things I had to work around.<\/p>\n
The SDK assumes your model provider supports streaming. If you’re on a self-hosted Llama setup behind an OpenAI-compat shim that doesn’t stream, you can still use generateText<\/code>, but you lose the part-streaming UX. I worked around it by chunking the final string client-side, which feels like a workaround because it is one.<\/p>\n
Observability is the other gap I felt. I want token counts and per-tool latency without rolling my own logger from scratch. The SDK gives you onFinish<\/code> and usage<\/code> on the result, which is enough to roll your own, and I wrote one in an afternoon. Still, it’s the kind of thing I wish came in the box. If you need real tracing, plug in Langfuse or Helicone before you ship.<\/p>\n
The other thing worth knowing: the abstractions are sticky. Once your UI maps over message.parts<\/code>, swapping to a different SDK like LangChain.js or raw OpenAI streaming means rewriting the render layer. The v5 part shape is fine. It’s just yours forever once you adopt it. I’d build the same way if I started over, but go in with eyes open.<\/p>\n
What I’d build with it this week<\/h2>\n
If you’ve been holding off on the AI SDK because v4 burned you, it’s worth a fresh look. Pick one project: a support chatbot, or a small agent that does two tool calls and stops. Start with streamText<\/code>, a single tool, and useChat<\/code> on the client. Get the round-trip working in an afternoon.<\/p>\n
Two things I’d add on day two:<\/p>\n
    \n
  1. A stopWhen<\/code> budget on every streamText<\/code> call. The default has no ceiling, and that’s the most expensive default I know in JS land right now.<\/li>\n
  2. A logger that captures usage.totalTokens<\/code> and tool-call latencies. Even a console.log<\/code> keeps you honest until you wire up real tracing.<\/li>\n<\/ol>\n
    I do this kind of work day to day, and I write up more of it on my site<\/a>. The SDK isn’t magic. It’s the first AI library I’ve used where the boring parts feel boring, which is the highest compliment I can give a library.<\/p>\n","protected":false},"excerpt":{"rendered":"
    My honest take on Vercel AI SDK v5 after three production projects, plus the useChat and tool-calling gotchas I wish someone had warned me about first.<\/p>\n","protected":false},"author":2,"featured_media":359,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"My honest take on Vercel AI SDK v5 after three production projects, plus the useChat and tool-calling gotchas I wish someone had warned me about first.","rank_math_focus_keyword":"vercel ai sdk v5","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[4,388],"tags":[28,404,61,41,405,403],"class_list":["post-360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-next-js","tag-ai","tag-ai-sdk","tag-nextjs","tag-react","tag-tool-calling-2","tag-vercel-ai-sdk-2"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=360"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/360\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/359"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}