Building a React AI Chatbot with Vercel AI SDK v5

Building a robust AI chatbot in React used to be a minefield of security vulnerabilities and performance bottlenecks. Many developers start by streaming raw text chunks directly from the frontend, inadvertently exposing API keys in their network tab or struggling with complex state management as they try to sync UI updates with LLM responses.

The release of Vercel AI SDK v5 changes the game. By moving away from experimental patterns and embracing a stable, transport-based architecture, the latest iteration of the Vercel AI SDK React integration provides a secure, type-safe, and highly performant way to build modern AI applications.

The Security Trap: Why Frontend Streaming Fails

The most common mistake when building a React AI chatbot is handling API calls directly in the browser. When you initialize an LLM client in your useEffect or event handlers, your secret API keys are bundled into the client-side code. Anyone inspecting your network requests can extract these credentials, leading to potential abuse and unexpected costs.

Furthermore, manual streaming implementations often rely on useState to buffer incoming chunks. As the LLM streams text, React triggers re-renders for every single chunk, leading to UI flickering and significant performance degradation—especially when dealing with complex data or tool calls.

How Vercel AI SDK v5 Solves This

Vercel AI SDK v5 introduces a redesigned useChat hook and a robust streaming architecture that shifts the heavy lifting to the server. By leveraging Server-Sent Events (SSE), the SDK ensures that your API keys remain securely on the server-side, while your frontend only receives the processed, sanitized output.

Key Architectural Improvements:

• Transport-Based Architecture: The SDK now uses a modular transport system, making it easier to integrate with different backend setups while maintaining security.
• Typed Tool Invocations: Tool calls are no longer generic strings. They are fully typed parts of the message stream, ensuring that your frontend knows exactly how to render them.
• Decoupled State Management: The useChat hook no longer manages input state internally, giving you more control over your UI and easier integration with state management libraries like Zustand or Redux.

Implementation: A Secure Chatbot with useChat

To get started, you need to separate your concerns: handle the LLM interaction on the server using streamText and render the interface on the client using useChat.

Server-Side: streamText

Your API route (e.g., app/api/chat/route.ts) handles the LLM logic securely.

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      // Define your tools here
      getWeather: {
        description: 'Get weather for a location',
        parameters: z.object({ location: z.string() }),
        execute: async ({ location }) => { /* ... */ },
      },
    },
  });

  return result.toDataStreamResponse();
}

Client-Side: useChat

In your React component, you simply call the useChat hook. The SDK handles the streaming, message history, and tool invocation automatically.

'use client';

import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, setInput, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role}: {m.content}
          {/* Render tool parts here */}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={e => setInput(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Moving Beyond Text: Handling Tools

One of the most powerful features of the Vercel AI SDK is how it handles tool calls. Instead of parsing raw text to detect a function call, the SDK streams structured data parts. When the model invokes a tool, the useChat hook receives a typed tool invocation that your UI can respond to immediately.

By using the onToolCall callback and addToolOutput helper, you can create interactive experiences—like rendering a calendar component or a weather widget—directly inside your chat interface without the performance overhead of manual state synchronization.

Conclusion

If you are still manually parsing streams or exposing keys in your frontend config, you are building on shaky ground. Vercel AI SDK v5 provides the primitives you need to build professional, production-grade AI applications. By leveraging the secure streamText and useChat flow, you can focus on building delightful user experiences while the SDK handles the complexity of AI engineering.

Ready to upgrade? Dive into the official documentation and start building more secure, reactive AI interfaces today.