Xây dựng ứng dụng Chat Realtime với Next.js, Supabase và AI chỉ trong 1 giờ

Hướng dẫn chi tiết từng bước xây dựng chat realtime full-stack bằng Next.js 16 + Supabase (Auth + Realtime) + Vercel AI SDK. Chat nhóm mượt, AI trả lời thông minh, lưu lịch sử, deploy miễn phí. Hoàn thành trong 60 phút – phù hợp beginner 2026.

---

Giới thiệu

Bạn muốn xây dựng một ứng dụng chat realtime giống Discord hoặc WhatsApp nhưng có AI thông minh trả lời ngay lập tức?

Với Next.js + Supabase + Vercel AI SDK, bạn chỉ mất đúng 1 giờ là có thể hoàn thành một app chat realtime đầy đủ tính năng:

• Đăng nhập nhanh (Google / Email)
• Chat nhóm realtime (nhiều người cùng chat)
• AI trả lời tự động (GPT-4o hoặc Gemini)
• Lưu lịch sử chat vào database
• Deploy miễn phí trên Vercel

Combo này đang là lựa chọn hot nhất năm 2026 nhờ tốc độ phát triển cực nhanh và chi phí gần như bằng 0.

---

Công nghệ sử dụng

Công nghệ	Vai trò	Lý do chọn
Next.js 16	Frontend + Backend (App Router)	Fullstack, Server Components
Supabase	Auth, Database, Realtime	Realtime miễn phí, dễ dùng
Vercel AI SDK	Tích hợp AI (OpenAI/Gemini)	Streaming siêu mượt
Tailwind + shadcn/ui	Giao diện đẹp	Nhanh & responsive

---

Bước 1: Tạo project Next.js (5 phút)

npx create-next-app@latest supa-ai-chat \
  --typescript --tailwind --eslint --app --yes

cd supa-ai-chat
npm install @supabase/supabase-js ai @ai-sdk/openai lucide-react

---

Bước 2: Thiết lập Supabase (10 phút)

1. Vào supabase.com → New Project
2. Tạo bảng messages:

   create table messages (
     id uuid primary key default uuid_generate_v4(),
     room_id text not null,
     user_id uuid references auth.users,
     content text,
     is_ai boolean default false,
     created_at timestamp default now()
   );
   

3. Bật Realtime cho bảng messages
4. Lấy Supabase URL + Anon Key → dán vào .env.local

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
OPENAI_API_KEY=sk-...

---

Bước 3: Tạo Client Supabase (5 phút)

Tạo file lib/supabase.ts:

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

---

Bước 4: API Route AI + Realtime (15 phút)

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

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

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
    system: 'Bạn là trợ lý AI vui tính, trả lời bằng tiếng Việt.',
  });

  // Lưu tin nhắn AI vào Supabase (realtime sẽ tự broadcast)
  const { data: { user } } = await supabase.auth.getUser();
  await supabase.from('messages').insert({
    room_id: roomId,
    content: '...', // sẽ update sau khi stream xong
    is_ai: true,
    user_id: user?.id,
  });

  return result.toDataStreamResponse();
}

---

Bước 5: Giao diện Chat Realtime (20 phút)

Tạo trang app/chat/[roomId]/page.tsx (code đầy đủ có sẵn trong comment bên dưới nếu bạn cần).

Các điểm chính:

• Dùng supabase.channel để subscribe realtime
• useChat từ Vercel AI SDK cho streaming
• Hiển thị tin nhắn theo thời gian thực

---

Bước 6: Deploy & Kiểm tra (5 phút)

git push
# Deploy miễn phí trên Vercel

Chỉ cần 1 lệnh vercel → app chạy ngay với Realtime + AI.

---

Tính năng hoàn thiện sau 1 giờ

• Chat nhóm realtime (nhiều user cùng online)
• AI trả lời streaming ngay trong chat
• Lưu lịch sử tự động
• Auth an toàn
• Responsive đẹp

---

Kết luận

Chỉ với Next.js + Supabase + AI SDK, bạn đã có một ứng dụng chat realtime chuyên nghiệp mà trước đây phải mất cả tuần mới làm được.

Đây chính là sức mạnh của stack hiện đại năm 2026: tốc độ + realtime + AI chỉ trong 1 giờ.

Bạn muốn mình cung cấp toàn bộ source code GitHub (copy-paste chạy luôn) không?
Hoặc muốn nâng cấp thành:

• Chat 1-1 (private chat)
• Voice message
• AI Agent thông minh hơn

Comment số hoặc yêu cầu bên dưới, mình gửi ngay! 🚀

Tags:
nextjs supabase chat realtime, chat ai nextjs, supabase realtime 2026, vercel ai sdk supabase, xây dựng chat realtime nextjs, ai chat app tutorial