Frontend AI 2026 Tích hợp AI vào Next.js không cần Backend Server (Vercel AI SDK)

[AI Hunter]

Frontend AI 2026: Tích hợp AI vào Next.js không cần Backend Server (Vercel AI SDK)

Bạn là Web Developer. Bạn muốn tích hợp AI vào website React của mình.
Cách cũ:
1. Dựng server Python.
2. Cài thư viện OpenAI.
3. Viết API xử lý Streaming.
4. Gọi API từ React và loay hoay parse từng chunk dữ liệu.

Cách mới (2026):
Dùng Vercel AI SDK. Mọi thứ được xử lý gọn nhẹ ngay trong Next.js App Router. Bạn không cần một backend server riêng biệt nữa. Đặc biệt, nó hỗ trợ Stream UI - tính năng giúp AI vẽ giao diện trực tiếp.

1. Vercel AI SDK là gì?​

Đây là thư viện mã nguồn mở giúp kết nối các Frontend Framework (Next.js, React, Vue, Svelte) với các LLM (OpenAI, Anthropic, Google) một cách trơn tru.

Điểm mạnh nhất của nó là hook `useChat`. Nó tự động quản lý trạng thái loading, input, và tự động ghép nối các dòng chữ (stream) đang chạy về màn hình mà bạn không cần code một dòng logic xử lý chuỗi nào.

2. Cài đặt​

Tạo một dự án Next.js mới và cài đặt SDK:

npx create-next-app@latest my-ai-app
cd my-ai-app
npm install ai @ai-sdk/openai zod

3. Triển khai Code (Next.js App Router)​

Bước 1: Tạo API Route (Backend trong Frontend)​

Tạo file `app/api/chat/route.ts`. Đây là nơi gọi OpenAI.

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

// Cho phép streaming hoạt động tối ưu trên Edge Network
export const maxDuration = 30;

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

  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
    system: 'Bạn là một trợ lý ảo hữu ích và vui tính.',
  });

  // Trả về luồng dữ liệu (Stream) thay vì JSON tĩnh
  return result.toDataStreamResponse();
}

*Lưu ý: Bạn cần khai báo `OPENAI_API_KEY` trong file `.env.local`.*

Bước 2: Tạo Giao diện Chat (Frontend)​

Mở file `app/page.tsx`. Chúng ta sử dụng hook `useChat` thần thánh.

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  // useChat tự động handle:
  // - messages: mảng lịch sử chat
  // - input: dữ liệu trong ô text
  // - handleInputChange: cập nhật state khi gõ
  // - handleSubmit: gửi request lên API và stream câu trả lời về
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {/* Khu vực hiển thị tin nhắn */}
      <div className="space-y-4">
        {messages.map(m => (
          <div key={m.id} className={`whitespace-pre-wrap ${m.role === 'user' ? 'text-blue-600 text-right' : 'text-gray-800'}`}>
            <span className="font-bold">{m.role === 'user' ? 'Bạn: ' : 'AI: '}</span>
            {m.content}
          </div>
        ))}
      </div>

      {/* Khu vực nhập liệu */}
      <form onSubmit={handleSubmit} className="fixed bottom-0 w-full max-w-md p-2 mb-8 bg-white border rounded shadow-xl">
        <input
          className="w-full p-2 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Hỏi gì đi..."
          onChange={handleInputChange}
          disabled={isLoading}
        />
      </form>
    </div>
  );
}

4. Nâng cao: Generative UI (AI vẽ giao diện)​

Đây là tính năng "sát thủ". Thay vì chỉ trả về text, AI có thể trả về một Component.
Ví dụ: User hỏi "Giá Bitcoin thế nào?", AI sẽ trả về một biểu đồ Chart.js thật sự chứ không phải text mô tả.

Để làm được điều này, bạn dùng hàm `streamUI` (thay vì `streamText`) và định nghĩa các `tools`.

// (Code minh họa logic server)
const result = await streamUI({
  model: openai('gpt-4o'),
  messages,
  text: ({ content }) => <div>{content}</div>, // Fallback nếu là text thường
  tools: {
    getWeather: {
      description: 'Xem thời tiết',
      parameters: z.object({ location: z.string() }),
      generate: async ({ location }) => {
        const temp = await fetchWeather(location);
        return <WeatherCard location={location} temp={temp} />; // Trả về Component React!
      },
    },
  },
});

Kết luận​

Vercel AI SDK đã xóa nhòa ranh giới giữa Frontend và AI Engineer. Giờ đây, việc tích hợp trí tuệ nhân tạo vào website cũng đơn giản như việc gọi một API thông thường, mở ra kỷ nguyên mới của các ứng dụng web thông minh.