Build a Streaming AI Chat App with Vercel AI SDK v7 and Chinese LLMs (DeepSeek V4, Qwen 3.7) — 10x Cheaper Than OpenAI

Vercel AI SDK just hit v7 — and it's become the fastest way to build production-ready AI apps in TypeScript. With built-in support for 20+ model providers, streaming UI hooks, and agent orchestration, it's the framework of choice for developers building AI-powered web applications.

But there's a catch: most tutorials use OpenAI or Anthropic, which cost $5-30 per million tokens. What if you could get comparable quality at 1/10th the price using Chinese LLMs like DeepSeek V4 and Qwen 3.7?

In this tutorial, I'll show you how to integrate Vercel AI SDK v7 with TunanAPI — an OpenAI-compatible gateway to Chinese AI models — and build a fully streaming chat app in under 15 minutes.

What We're Building

A Next.js chat application with:

• Streaming responses (token-by-token, like ChatGPT)
• Multi-model support (switch between DeepSeek V4, Qwen 3.7, GLM-4)
• React UI hooks (useChat for real-time rendering)
• 10x cheaper than equivalent OpenAI setup

Prerequisites

• Node.js 22+ installed
• A free TunanAPI key (get one here — includes 500K free tokens)
• Basic familiarity with React/Next.js

Step 1: Set Up Your Next.js Project

npx create-next-app@latest ai-chat-app --typescript --tailwind --app
cd ai-chat-app
npm install ai @ai-sdk/openai-compatible @ai-sdk/react

We're using @ai-sdk/openai-compatible because TunanAPI follows the OpenAI API spec exactly — so any OpenAI-compatible provider package works out of the box.

Step 2: Configure the TunanAPI Provider

Create a file at lib/ai-provider.ts:

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

export const tunan = createOpenAICompatible({
  name: 'tunan',
  baseURL: 'https://api.tunanapi.com/v1',
  headers: {
    Authorization: `Bearer ${process.env.TUNAN_API_KEY}`,
  },
});

// Available models:
// - deepseek-chat (DeepSeek V4, general purpose)
// - deepseek-reasoner (DeepSeek R1, advanced reasoning)
// - qwen3.7-max (Qwen 3.7, maximum capability)
// - qwen3.7-plus (Qwen 3.7, balanced)
// - glm-4-plus (GLM-4, strong Chinese understanding)
// - glm-4-flash (GLM-4, cheapest option)
// - minimax-m3 (MiniMax M3, multimodal)

That's it. One provider config, and you have access to 8 Chinese AI models.

Step 3: Create the API Route

Create app/api/chat/route.ts:

import { tunan } from '@/lib/ai-provider';
import { streamText } from 'ai';

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

  // Default to DeepSeek V4 if no model specified
  const modelId = model || 'deepseek-chat';

  const result = streamText({
    model: tunan(modelId),
    messages,
    maxTokens: 2048,
  });

  return result.toDataStreamResponse();
}

This route:

1. Receives the chat messages from the frontend
2. Uses streamText for real-time token streaming
3. Returns a data stream response compatible with useChat

Step 4: Build the Chat UI

Create app/page.tsx:

'use client';

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

const models = [
  { id: 'deepseek-chat', name: 'DeepSeek V4', desc: 'General purpose' },
  { id: 'deepseek-reasoner', name: 'DeepSeek R1', desc: 'Advanced reasoning' },
  { id: 'qwen3.7-max', name: 'Qwen 3.7 Max', desc: 'Maximum capability' },
  { id: 'qwen3.7-plus', name: 'Qwen 3.7 Plus', desc: 'Balanced' },
  { id: 'glm-4-plus', name: 'GLM-4 Plus', desc: 'Chinese + English' },
];

export default function Page() {
  const [selectedModel, setSelectedModel] = useState('deepseek-chat');

  const { messages, input, handleInputChange, handleSubmit, status } =
    useChat({
      body: { model: selectedModel },
    });

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">
        AI Chat — Chinese LLMs via Vercel AI SDK
      </h1>

      {/* Model Selector */}
      <div className="mb-4">
        <label className="block text-sm font-medium mb-2">
          Select Model:
        </label>
        <select
          value={selectedModel}
          onChange={(e) => setSelectedModel(e.target.value)}
          className="border rounded p-2 w-full"
        >
          {models.map((m) => (
            <option key={m.id} value={m.id}>
              {m.name} — {m.desc}
            </option>
          ))}
        </select>
      </div>

      {/* Messages */}
      <div className="space-y-4 mb-4 min-h-[400px]">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`p-3 rounded-lg ${
              message.role === 'user'
                ? 'bg-blue-100 ml-8'
                : 'bg-gray-100 mr-8'
            }`}
          >
            <p className="text-xs text-gray-500 mb-1">
              {message.role === 'user' ? 'You' : selectedModel}
            </p>
            <p className="whitespace-pre-wrap">{message.content}</p>
          </div>
        ))}
        {status === 'streaming' && (
          <div className="text-sm text-gray-400">Thinking...</div>
        )}
      </div>

      {/* Input */}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask anything..."
          className="flex-1 border rounded-lg p-3"
          disabled={status !== 'ready'}
        />
        <button
          type="submit"
          disabled={status !== 'ready'}
          className="bg-blue-600 text-white px-6 py-3 rounded-lg disabled:opacity-50"
        >
          Send
        </button>
      </form>
    </div>
  );
}

Step 5: Add Your API Key

Create a .env.local file:

TUNAN_API_KEY=your-api-key-here

Get your free API key at tunanapi.com/topup. Every account starts with 500K free tokens — enough to build and test the entire app.

Step 6: Run It

npm run dev

Open http://localhost:3000 and start chatting. You'll see responses stream in token-by-token, just like ChatGPT.

The Cost Comparison

Here's what this actually saves you compared to the same app built with OpenAI:

Model (via TunanAPI)	Input $/1M	Output $/1M	vs GPT-4o
GLM-4 Flash	$0.05	$0.05	100x cheaper
Qwen 3.5 Flash	$0.35	$1.39	14x cheaper
DeepSeek V4 Chat	$0.70	$1.40	7x cheaper
Qwen 3.7 Plus	$1.39	$5.56	3.6x cheaper
DeepSeek V4 Reasoner	$2.18	$4.35	vs o1: 7x cheaper
Qwen 3.7 Max	$2.08	$6.25	2.4x cheaper
GPT-4o (for reference)	$5.00	$15.00	—
Claude 3.5 Sonnet (ref)	$3.00	$15.00	—

For a typical chat app processing ~1M tokens/day, you're looking at $0.70-2.00/day with Chinese models versus $20-50/day with OpenAI/Anthropic.

Bonus: Structured Output with Chinese LLMs

Vercel AI SDK v7 supports structured output via Zod schemas. Here's how to extract JSON from Chinese models:

import { z } from 'zod';
import { generateObject } from 'ai';
import { tunan } from '@/lib/ai-provider';

const sentimentSchema = z.object({
  sentiment: z.enum(['positive', 'negative', 'neutral']),
  confidence: z.number().min(0).max(1),
  summary: z.string(),
});

const { object } = await generateObject({
  model: tunan('qwen3.7-max'),
  schema: sentimentSchema,
  prompt: 'Analyze this review: "The product exceeded my expectations!"',
});

console.log(object);
// { sentiment: 'positive', confidence: 0.95, summary: '...' }

This works with all TunanAPI models — particularly useful for Qwen 3.7 Max, which has strong instruction-following capabilities.

Going Further

Multi-Model Fallback

One advantage of using TunanAPI is automatic fallback. If DeepSeek V4 is under high load, your requests automatically route to the next available model. No code changes needed.

Production Deployment

Deploy to Vercel with one command:

vercel deploy

Don't forget to set your TUNAN_API_KEY environment variable in the Vercel dashboard.

Why TunanAPI Instead of Direct Provider Access?

Chinese AI providers (DeepSeek, Qwen, GLM) require:

• Chinese phone number for registration
• Alipay or mainland bank card for payment
• Deal with the Great Firewall for API access

TunanAPI solves all three:

• Email-only signup
• PayPal payment (no Chinese bank account needed)
• Hong Kong-hosted servers with global CDN
• Same OpenAI-compatible API format

Summary

You now have a fully functional streaming AI chat app powered by Chinese LLMs, built with Vercel AI SDK v7. The entire integration took ~50 lines of backend code and ~60 lines of frontend code.

Key takeaways:

1. Vercel AI SDK v7's @ai-sdk/openai-compatible works with any OpenAI-compatible API
2. TunanAPI provides access to 8 Chinese models through a single endpoint
3. You save 3-100x on API costs compared to OpenAI/Anthropic
4. Streaming, structured output, and multi-model switching all work out of the box

Next steps:

• Get your free TunanAPI key (500K tokens free)
• Check out the pricing calculator to estimate your costs
• Deploy to production and start building!

---

Built with Vercel AI SDK v7 + TunanAPI. All prices verified as of July 2026.