Streaming AI Responses with Vercel AI SDK and Antbase

If you have built a chat interface with the Vercel AI SDK, you have probably had this internal debate: do you hardcode GPT-4o and eat the cost, or use a cheaper model and accept worse quality? Maybe you have tried switching models based on some heuristic in your route handler, but that logic gets messy fast and you end up maintaining a model-selection layer that has nothing to do with your actual product.

Antbase removes that entire decision from your codebase. You swap one line in your provider config — the base URL — and suddenly every streamText call gets routed to the best model for the job. A simple "what time is it in Tokyo" goes to a fast free model. A nuanced "compare these two architectural approaches" goes to a premium model. Your useChat hook, your streaming UI, your tool calling — none of it changes. The Vercel AI SDK already handles SSE streaming beautifully, and Antbase streams back in the exact same format as OpenAI.

What makes this pairing especially good is that Next.js apps often serve wildly different AI workloads from the same route handler. One user asks a trivia question, another pastes in a 10-page document for analysis. With a single hardcoded model, you are either overpaying for the trivia or under-serving the document analysis. Antbase handles both cases correctly, per-request, with zero additional code on your end.

The Vercel AI SDK provides React hooks and streaming utilities for building AI-powered UIs. Since Antbase speaks the OpenAI API, you can plug it in as a custom provider and get intelligent model routing with zero changes to your frontend code.

Installation

npm install ai @ai-sdk/openai

Configure the Provider

Create a custom OpenAI provider instance that points to Antbase:

// lib/ai.ts
import { createOpenAI } from '@ai-sdk/openai';

export const antbase = createOpenAI({
  baseURL: 'https://antbase.ai/v1',
  apiKey: process.env.ANTBASE_API_KEY,
});

Create the Route Handler

// app/api/chat/route.ts
import { streamText } from 'ai';
import { antbase } from '@/lib/ai';

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

  const result = streamText({
    model: antbase('auto'),  // Antbase picks the best model
    messages,
  });

  return result.toDataStreamResponse();
}

Frontend with useChat

// app/page.tsx
'use client';
import { useChat } from 'ai/react';

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

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Tips

• •Use antbase('auto') to let routing decide. Use antbase('gpt-4o') to pin a specific model.
• •The AI SDK handles SSE streaming automatically — Antbase streams back chunks in the same format as OpenAI.
• •For tool calling, pass tools to streamText as usual. Antbase routes tool-capable requests to models that support function calling.
• •Set ANTBASE_API_KEY in .env.local, not in client-side code. The route handler runs server-side.