Command Palette

Search for a command to run...

Hectal
Phase 5Intermediate6 of 16 in AI Frontend

The Vercel AI SDK

Phases 1 to 4 built the plumbing by hand. Now a real SDK does it: streamText on the server, useChat in the browser, message parts, errors, metadata and saved chats.

In Phases 1 to 4 you wrote the plumbing yourself: the request, the stream reader, the parser, the states, stop, retry, the reducer, the saved chats. That was on purpose. Now you know what every line of a library has to do, so a library stops being magic.

This phase uses the Vercel AI SDK, version 7, the most widely used TypeScript toolkit for this job. On the server it gives you streamText (one call that talks to any model provider). In the browser it gives you useChat (messages, status, stop, regenerate, errors). Between them runs a stream format called the UI message stream, and every message is made of parts. You will see the real bytes, the real states, and every way it fails.

Every example runs the real ai and @ai-sdk/react packages inside the page, against a scripted stand-in model, so nothing needs an account or a key. The last topic rebuilds Mitra on the SDK: much less code, the same behaviour, and every state still handled.

0/9 · 0%
9 topics ~4 h 32 code blocks & diagrams
Start with the first topic
1
5.1

Why Use an SDK

An SDK is a ready-made library for the plumbing you wrote by hand in Phases 1 to 4. The Vercel AI SDK gives one API over many model providers and a matching hook for the browser, but it does not render, secure or pay for anything: those stay your job.

23 min 3 code practice

2
5.2

streamText and the Route Handler

The server half of an AI SDK chat is one function. It reads the messages, converts them with convertToModelMessages, calls streamText with a model and your instructions, and returns toUIMessageStreamResponse(). That response is a stream of small JSON chunks the browser hook understands.

28 min 4 code practice

3
5.3

useChat

useChat is the browser half of the AI SDK. It sends your messages to the route, rebuilds the streamed chunks into message objects as they arrive, and tells you which of four statuses the chat is in (ready, submitted, streaming, error). It gives you stop, regenerate and clearError, but not an input box and not a double-click guard.

30 min 4 code practice

4
5.4

UIMessage Parts

A message in the AI SDK is not one string. It is a list of parts, each with a type: text, reasoning, a tool call, a source, a file, your own data, and a marker between steps. You render a message by looping over its parts and choosing a component for each type, and you ignore the types you do not know.

30 min 4 code practice

5
5.5

Customising the Request

By default useChat posts the id and all the messages to /api/chat. DefaultChatTransport lets you change the URL, add headers (for a login token), add body fields (the product page, the language), set the cookie policy, or take over the whole payload and send only the newest message. The route must still treat everything in it as untrusted.

27 min 4 code practice

6
5.6

Errors, Retries and Abort in the SDK

The SDK retries some failures for you (maxRetries, default 2), reports a final failure as an APICallError or a RetryError, and sends errors that happen while streaming as masked error chunks. You decide what the browser may read, turn status codes into plain sentences, and keep partial answers when a stream is stopped or breaks.

27 min 4 code practice

7
5.7

Message Metadata and Usage

Parts carry what the answer says. Metadata carries facts about the answer: which model wrote it, how many tokens it used, why it ended. The server attaches metadata with messageMetadata, the browser reads message.metadata, and the screen must cope with the cases where it never arrives.

32 min 3 code practice

8
5.8

Persisting Chats with the SDK

useChat keeps messages in memory only. To keep a chat you save the messages on the server when an answer ends (onEnd), load them into useChat as the initial messages, and validate them on the way back in. Stopped answers need a flag, old saved shapes need a plan, and resuming a live stream has hard limits.

27 min 4 code practice

9
5.9

Build: Mitra on the AI SDK

Mitra rewritten with streamText on the server and useChat in the browser. The hand-written reader, parser, reducer and abort code from Phases 2 to 4 is gone, and every state still works: thinking, streaming, stop, partial answers, errors with a retry, and a route that distrusts its input.

29 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Show a Chat with useChat

The route /api/chat is ready. The page has a button #ask, a list #messages and a line #status. Use useChat so that clicking #ask sends the message How long does shipping take?.

Beginner
2

Add a Stop Button with useChat

The route streams a long answer, slowly. Show a button #stop only while the chat is submitted or streaming, and make it call stop(). Show each message as a <p> with the class user or assistant inside #messages.

Beginner
3

Friendly Errors with useChat

Three buttons send different questions. #fine works. #busy makes the route answer 429. #crash makes the route throw (a 500).

Intermediate
4

Render the Parts

This route answers with some reasoning first and then the answer. Right now the page prints parts[0].text, which is empty for the assistant.

Intermediate
5

Send Only the Newest Message

The route keeps each chat's history on the server and expects the request body { id, trigger, message }: the chat id and one message. The page currently uses the default transport, which sends { id, messages, … }, so the route answers 400.

Intermediate
6

Mini Mitra: Guard, Stop, Error

Build the composer of Mitra with useChat. The input is #prompt, the button is #send, messages go in #messages (a <p> per message with class user or assistant).

Advanced