Posted inDevelopment

Xây dựng Chat AI Streaming đa mô hình với Vercel AI SDK và Next.js

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Nỗi lo khi tích hợp đa mô hình AI

Bạn đã bao giờ thức trắng đêm chỉ để viết lại logic streaming vì khách hàng muốn đổi từ GPT-4 sang Claude 3.5 chưa? Mỗi nhà cung cấp (provider) lại có một cấu trúc dữ liệu và cách xử lý luồng dữ liệu (streaming) khác nhau. Nếu làm thủ công, bạn sẽ phải tự quản lý mảng tin nhắn, xử lý lỗi mạng và duy trì trạng thái UI cực kỳ phức tạp.

Vercel AI SDK ra đời để giải quyết bài toán này. Nó đóng vai trò như một lớp trừu tượng (abstraction layer), giúp bạn giao tiếp với mọi mô hình AI bằng một bộ code duy nhất. Hãy cùng bắt tay vào xây dựng một ứng dụng chat hỗ trợ cả ba “ông lớn”: OpenAI, Anthropic và Google.

So sánh các phương án triển khai

Trước khi bắt tay vào code, hãy nhìn qua các lựa chọn phổ biến hiện nay:

  • Fetch API truyền thống: Đơn giản nhưng là ác mộng khi làm Streaming. Bạn phải tự xử lý ReadableStream và quản lý state thủ công, dễ gây lỗi memory leak nếu không khéo.
  • LangChain: Cực kỳ mạnh mẽ cho các tác vụ phức tạp như RAG hay Agent. Tuy nhiên, nó khá nặng nề và có đường cong học tập dốc nếu bạn chỉ cần một giao diện chat đơn giản.
  • Vercel AI SDK: Lựa chọn tối ưu cho hệ sinh thái Next.js. Thư viện này cung cấp Hook useChat giúp giảm 80% code xử lý giao diện và hỗ trợ stream dữ liệu mượt mà ngay từ server.

Tại sao nên dùng Vercel AI SDK?

Ưu điểm lớn nhất chính là tính Thống nhất (Unified). Bạn chỉ cần viết logic xử lý một lần. Việc đổi từ GPT-4o sang Claude 3.5 Sonnet đôi khi chỉ tốn 5 giây để thay đổi một biến số.

Tuy nhiên, công cụ này gắn chặt với JavaScript/TypeScript. Nếu backend của bạn chạy bằng Python hoặc Go, bạn sẽ không tận dụng được các React Hook mạnh mẽ của nó. Nhưng với dân Next.js, đây thực sự là một trợ thủ đắc lực.

Hướng dẫn triển khai chi tiết

1. Khởi tạo dự án Next.js

Đầu tiên, hãy tạo một project Next.js mới sử dụng App Router:

npx create-next-app@latest my-ai-chat
cd my-ai-chat

Sau đó, cài đặt bộ thư viện lõi và các provider tương ứng:

npm install ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google zod

2. Thiết lập biến môi trường

Tạo file .env.local tại thư mục gốc. Bạn cần điền API Key từ dashboard của OpenAI, Anthropic và Google AI Studio vào đây.

OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_GENERATIVE_AI_API_KEY=...

3. Xây dựng API Route (Backend)

Chúng ta sẽ xử lý logic gọi AI tại app/api/chat/route.ts. Điểm đặc biệt là backend sẽ tự động chọn model dựa trên yêu cầu từ phía client gửi lên.

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

export const maxDuration = 30;

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

  let selectedModel;
  if (modelType === 'claude') {
    selectedModel = anthropic('claude-3-5-sonnet-20240620');
  } else if (modelType === 'gemini') {
    selectedModel = google('models/gemini-1.5-pro-latest');
  } else {
    selectedModel = openai('gpt-4o');
  }

  const result = await streamText({
    model: selectedModel,
    messages,
  });

  return result.toDataStreamResponse();
}

Trong quá trình debug các request JSON phức tạp, bạn có thể sử dụng JSON Formatter để kiểm tra cấu trúc dữ liệu nhanh hơn thay vì nhìn đống text hỗn độn.

4. Xây dựng giao diện Chat (Frontend)

Tại file app/page.tsx, chúng ta sử dụng Hook useChat. Hook này tự động quản lý danh sách tin nhắn và trạng thái input cho bạn.

'use client';

import { useChat } from 'ai/react';
import { useState } from 'react';

export default function Chat() {
  const [modelType, setModelType] = useState('openai');
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    body: { modelType },
  });

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      <select 
        value={modelType} 
        onChange={(e) => setModelType(e.target.value)}
        className="mb-4 p-2 border rounded text-black"
      >
        <option value="openai">GPT-4o</option>
        <option value="claude">Claude 3.5 Sonnet</option>
        <option value="gemini">Gemini 1.5 Pro</option>
      </select>

      {messages.map(m => (
        <div key={m.id} className="mb-4">
          <span className="font-bold">{m.role === 'user' ? 'Bạn: ' : 'AI: '}</span>
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border rounded shadow-xl text-black"
          value={input}
          placeholder="Hỏi gì đó đi..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

Kinh nghiệm thực tế: Tránh lỗi Timeout

Một lỗi phổ biến khi làm streaming là maxDuration. Trên gói Vercel Hobby (miễn phí), các Serverless Function sẽ bị ngắt sau 10 giây. Với các model “chậm chạp” như GPT-4, phản hồi có thể mất tới 15-20 giây mới hoàn tất.

Để khắc phục, hãy luôn khai báo export const maxDuration = 30; (giới hạn tối đa cho gói Pro là 300 giây). Ngoài ra, hãy tận dụng biến isLoading từ useChat để hiển thị hiệu ứng chờ đợi, giúp người dùng không cảm thấy ứng dụng bị treo.

Lời kết

Vercel AI SDK không chỉ là một thư viện, nó là tiêu chuẩn mới để xây dựng ứng dụng AI trên nền Web. Thay vì tốn thời gian đọc hàng chục trang tài liệu API khác nhau, bạn chỉ cần tập trung vào trải nghiệm người dùng.

Bước tiếp theo, bạn có thể thử nghiệm tính năng Tool Calling. Đây là kỹ thuật cho phép AI tự gọi các hàm JavaScript của bạn để lấy dữ liệu thời tiết hoặc truy vấn database theo thời gian thực.

Share:
Tags: