Hướng dẫn tích hợp ChatGPT vào Next.js chỉ trong 10 phút với Vercel AI SDK (Cập nhật 2026)

Hướng dẫn tích hợp ChatGPT vào Next.js chỉ trong 10 phút với Vercel AI SDK (Cập nhật 2026)

Học cách tích hợp ChatGPT (OpenAI) vào Next.js siêu nhanh chỉ với Vercel AI SDK v6. Hướng dẫn chi tiết từng bước, code đầy đủ, streaming realtime, App Router – phù hợp cho beginner và developer muốn build AI chatbot chuyên nghiệp năm 2026.

Giới thiệu

Bạn muốn thêm tính năng chatbot AI thông minh vào website Next.js của mình?

Với Vercel AI SDK, bạn chỉ mất 10 phút là có thể tạo một chatbot streaming mượt như ChatGPT, hỗ trợ full TypeScript, App Router và deploy miễn phí trên Vercel.

Vercel AI SDK là toolkit mạnh nhất hiện nay để xây dựng AI application, hỗ trợ OpenAI, Anthropic, Google, Grok… với cùng một cú pháp.

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

Streaming realtime (text hiện dần)
Hỗ trợ đa provider (dễ đổi model)
Tích hợp hoàn hảo với Next.js 15/16
Dễ mở rộng: Tool Calling, Structured Output, Agent…
Hiệu suất cao, dễ bảo trì

Yêu cầu trước khi bắt đầu

Node.js 20+
Tài khoản OpenAI (có API Key)
Kiến thức cơ bản Next.js App Router

Bước 1: Tạo project Next.js

npx create-next-app@latest my-ai-chatbot \
  --typescript --tailwind --eslint --app --yes

cd my-ai-chatbot

Bước 2: Cài đặt Vercel AI SDK

npm install ai @ai-sdk/openai

Bước 3: Thiết lập API Key

Tạo file .env.local:

OPENAI_API_KEY=sk-proj-your-key-here

Bước 4: Tạo API Route (Server)

Tạo file: app/api/chat/route.ts

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

export const maxDuration = 60; // Tăng thời gian cho model mạnh

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

  const result = streamText({
    model: openai('gpt-4o-mini'), // Hoặc gpt-4o, o3-mini...
    messages,
    system: `Bạn là trợ lý AI thông minh, thân thiện, trả lời bằng tiếng Việt. 
             Trả lời ngắn gọn, chính xác và hữu ích.`,
    temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

Bước 5: Xây dựng giao diện Chat (Client)

Tạo file: app/chat/page.tsx

'use client';

import { useChat } from 'ai/react';
import { Send, Bot } from 'lucide-react';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-950 to-gray-900 text-white">
      <div className="max-w-4xl mx-auto h-screen flex flex-col">
        {/* Header */}
        <div className="p-6 border-b border-gray-800 flex items-center gap-3">
          <Bot className="w-8 h-8 text-blue-500" />
          <div>
            <h1 className="text-3xl font-bold">AI Assistant</h1>
            <p className="text-gray-400 text-sm">Powered by Vercel AI SDK + GPT-4o</p>
          </div>
        </div>

        {/* Messages Area */}
        <div className="flex-1 overflow-y-auto p-6 space-y-8">
          {messages.length === 0 && (
            <div className="text-center mt-20">
              <Bot className="w-16 h-16 mx-auto text-gray-600 mb-4" />
              <p className="text-gray-400">Hãy bắt đầu cuộc trò chuyện nào!</p>
            </div>
          )}

          {messages.map((message) => (
            <div
              key={message.id}
              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
            >
              <div
                className={`max-w-[85%] px-5 py-4 rounded-3xl ${
                  message.role === 'user'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-800 text-gray-100'
                }`}
              >
                {message.content}
              </div>
            </div>
          ))}

          {isLoading && (
            <div className="flex justify-start">
              <div className="bg-gray-800 px-5 py-4 rounded-3xl flex items-center gap-3">
                <div className="animate-pulse">Đang suy nghĩ</div>
                <span className="animate-bounce">.</span>
              </div>
            </div>
          )}
        </div>

        {/* Input Form */}
        <form onSubmit={handleSubmit} className="p-6 border-t border-gray-800">
          <div className="relative">
            <input
              type="text"
              value={input}
              onChange={handleInputChange}
              placeholder="Nhập tin nhắn của bạn..."
              className="w-full bg-gray-800 border border-gray-700 rounded-2xl py-5 px-6 pr-20 text-lg focus:outline-none focus:border-blue-500 placeholder-gray-500"
              disabled={isLoading}
            />
            <button
              type="submit"
              disabled={isLoading || !input.trim()}
              className="absolute right-4 top-1/2 -translate-y-1/2 bg-blue-600 hover:bg-blue-700 p-3 rounded-xl disabled:opacity-50 transition-all"
            >
              <Send size={22} />
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Bước 6: Chạy và kiểm tra

npm run dev

Truy cập: http://localhost:3000/chat

Hoàn thành! Bạn đã có chatbot AI streaming đẹp và mạnh mẽ.

Mẹo nâng cao (2026)

Dùng gpt-4o hoặc o3-mini cho chất lượng cao hơn
Thêm Tool Calling và Structured Output
Kết hợp với shadcn/ui + Markdown rendering
Lưu lịch sử chat vào Database (Vercel Postgres / Supabase)
Deploy miễn phí trên Vercel (tự động tối ưu Edge)

Kết luận

Với Vercel AI SDK, việc tích hợp ChatGPT vào Next.js trở nên cực kỳ đơn giản và mạnh mẽ. Chỉ trong 10 phút bạn đã có một tính năng AI chuyên nghiệp.

Bạn muốn mình hướng dẫn tiếp phần nào?

Thêm Tool Calling (AI gọi function)
Lưu lịch sử chat + authentication
Giao diện đẹp với shadcn/ui + Markdown
Multi-model (OpenAI + Claude + Grok)

Comment bên dưới mình sẽ viết ngay!

Tags:
vercel ai sdk, nextjs chatgpt, chatbot nextjs, ai sdk 2026, integrate chatgpt nextjs, nextjs ai tutorial, streamtext vercel, gpt-4o nextjs