How to Build a Multi-Model AI Chat App in 15 Minutes

How to Build a Multi-Model AI Chat App in 15 Minutes

Last week, I was chatting with a friend who works in e-commerce. He mentioned wanting to add an AI customer service feature to his backend, but his team consists entirely of Java developers with little frontend or AI API integration experience. After two days of struggling with the OpenAI API, they were still stuck. That's when I recommended the Vercel AI SDK.

Honestly, I used to think "integrating AI capabilities" carried a high barrier to entry: handling streaming responses, implementing error retries, adapting to different model output formats... But after diving into this SDK's design, I realized it packages all the messy groundwork so you can focus purely on business logic. Today, I'll walk you through building a streaming chat application from scratch that supports dynamic model switching. Once you're done, you can drop it straight into your own projects.

Prerequisites

Before we begin, ensure you have the following:

• Node.js 22 or higher (check with node -v; versions below 22 will not work)
• An API Key for any AI model provider (OpenAI, Anthropic, or Google). This tutorial uses the Vercel AI Gateway, which works out-of-the-box without extra provider SDKs.
• Basic familiarity with TypeScript and Next.js App Router
• A Next.js project skeleton (generate one with npx create-next-app@latest)

You don't need to pre-install packages like @ai-sdk/openai. Instead, we'll route everything through Vercel's unified Gateway entry. A single ai package can call all mainstream models, which is why I highly recommend this approach for beginners.

Step 1: Installation & Basic Configuration

There's only one core package you need:

npm install ai

That's it. Internally, it encapsulates streaming outputs, message assembly, error handling, and other low-level logic. Once installed, we need to tell our application how to access AI capabilities.

The AI SDK provides a unified entry point: the Vercel AI Gateway. You don't need to install separate SDKs for each provider. Instead, you simply pass a model string like 'openai/gpt-4o', 'anthropic/claude-sonnet-4-20250514', or 'google/gemini-2.5-pro'. The Gateway handles authentication, routing, and rate limiting for you.

Why do it this way? In real-world projects, you'll likely want to benchmark multiple models. Installing separate SDKs and configuring individual clients for each will skyrocket your maintenance costs. The unified Gateway lets you swap models as easily as changing a route.

Step 2: Implement the Backend API Route

Create app/api/chat/route.ts and add the following code:

import { streamText, Message } from 'ai';

export async function POST(req: Request) {
  const { messages, model = 'openai/gpt-4o' } = await req.json();

  const result = streamText({
    model: model, // Supports dynamic model names: openai/gpt-4o / anthropic/claude-sonnet-4-20250514 / google/gemini-2.5-pro
    system: 'You are a professional technical assistant. Keep answers concise and clear.',
    messages,
    temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

This code handles three key tasks:

1. Parse the Request: Extracts the message history and optional model parameter from the frontend. This is the core of dynamic model switching—whatever model the frontend sends, the backend uses it.
2. Call the AI: streamText is the most common API. It streams the AI's response back incrementally, so users don't have to wait for the full reply to start reading.
3. Return the Stream: toDataStreamResponse() serializes the stream into the AI SDK's standard format, which the frontend useChat hook can consume directly.

Step 3: Build the Frontend Chat Interface

Install the React-specific UI package:

npm install @ai-sdk/react

Then, use it in your page component:

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

export default function ChatPage() {
  const [model, setModel] = useState('openai/gpt-4o');

  const { messages, input, handleInputChange, handleSubmit, status } =
    useChat({
      body: { model }, // Pass model parameter to backend
      api: '/api/chat',
    });

  return (
    <div className="max-w-2xl mx-auto p-4">
      {/* Model Switcher */}
      <select
        value={model}
        onChange={e => setModel(e.target.value)}
        className="border rounded px-2 py-1 mb-4"
        disabled={status !== 'ready'}
      >
        <option value="openai/gpt-4o">GPT-4o</option>
        <option value="anthropic/claude-sonnet-4-20250514">Claude Sonnet 4</option>
        <option value="google/gemini-2.5-pro">Gemini 2.5 Pro</option>
      </select>

      {/* Message List */}
      <div className="space-y-3 mb-4">
        {messages.map(m => (
          <div key={m.id}>
            <strong>{m.role}:</strong>
            {m.parts.map((p, i) => p.type === 'text' && <p key={i}>{p.text}</p>)}
          </div>
        ))}
      </div>

      {/* Input Box */}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type your question..."
          disabled={status !== 'ready'}
          className="w-full border rounded px-3 py-2"
        />
      </form>
    </div>
  );
}

Here, useChat is a React Hook provided by the AI SDK that automatically handles:

• Managing the message list and input state
• Calling the backend API and consuming the streaming response
• Handling status (ready / submitted / streaming), which you can use to disable buttons or show loading indicators
• Seamlessly stitching user messages and AI replies; you only need to render the messages array

body: { model } is the key line here—it passes the frontend-selected model to the backend route.ts, enabling dynamic switching per request. This is exactly why we destructured the model field in our backend route; the frontend and backend must work in tandem.

Step 4: Run & Test

npm run dev

Open http://localhost:3000. You'll see a chat interface with a model-switching dropdown. Try sending a message with Claude Sonnet 4, then switch to Gemini 2.5 Pro to compare response styles. The entire process requires zero server restarts and no code changes.

FAQ & Troubleshooting

Q1: I get a model not found error when calling the API.
Verify you're using a valid model name. When calling via the Vercel AI Gateway, the format must be provider/model-name (e.g., openai/gpt-4o). If you're using direct official SDK connections (like @ai-sdk/openai), the syntax differs and requires a function call like openai('gpt-4o').

Q2: Streaming output is choppy or freezes.
Check if your backend is returning result.toDataStreamResponse() instead of a standard Response. Plain JSON responses will force the frontend to wait for the complete reply, completely defeating the purpose of streaming. Also, ensure the api path in useChat points to the correct endpoint.

Q3: How do I configure environment variables?
If using the Vercel AI Gateway, add the corresponding provider keys to your .env.local file (e.g., OPENAI_API_KEY or ANTHROPIC_API_KEY). The AI SDK automatically reads these variables; no manual passing is required.

Q4: Is this supported outside of Next.js?
Yes. The AI SDK itself is framework-agnostic. For pure Node.js or Express, you can directly import generateText from 'ai' for synchronous calls. However, UI hooks like useChat require the corresponding framework adapter (e.g., @ai-sdk/react, @ai-sdk/vue).

Next Steps

This tutorial has helped you build a fully functional AI chat application with multi-model switching, streaming responses, and complete message history. If you want to dive deeper, I highly recommend exploring two advanced capabilities of the AI SDK:

1. Structured Output (Output.object + Zod Schema): Forces the AI to return standard JSON, perfect for parsing recipes, product info, or database entries.
2. Agent Tool Calling (ToolLoopAgent): Enables the AI to execute custom actions, like running shell commands or generating images.

You'll inevitably run into these in real-world development. With today's streaming chat foundation, extending into these areas will be straightforward. Feel free to discuss any specific issues in the comments—I'll reply as soon as I can.

Project: github.com/vercel/ai | Official Docs: ai-sdk.dev/docs