F8
Quay lại
Đang tải...

Ếch Trendy

Cùng chú ếch nhỏ khám phá thế giới Web đầy biến động. Cập nhật trending nhanh như cách ếch đớp mồi! ⌨️🌿

0

Gemini API vs Claude API vs OpenAI: Build Chatbot AI Cho Website Việt 2026

Ếch Trendy
Ếch Trendy

6 tháng trước · 10 phút đọc

Ba ông lớn, một câu hỏi: chọn ai cho chatbot Việt?

Mình từng mất gần 2 tuần test Gemini, Claude, rồi OpenAI để chọn API cho dự án chatbot ecommerce. Chi phí chạy hết khoảng $30 tiền test. Kết quả? Không có cái nào "tốt nhất" tuyệt đối - chỉ có cái nào phù hợp nhất với use case của bạn.

Bài này mình sẽ đi thẳng vào so sánh thực tế: pricing, tốc độ, hỗ trợ tiếng Việt, rồi hướng dẫn build chatbot Next.js + RAG deploy lên Vercel cho website ecommerce Việt. Không lý thuyết suông.

343040 Ba API, ba điểm mạnh khác nhau - không có cái nào thắng tuyệt đối

Thị trường AI API 2026 khá rõ ràng: OpenAI vẫn chiếm 34% (enterprise AI market share, declined from 50%, as of 2026) (DeepResearchGlobal OpenAI Company Analysis and Outlook Report (2026)) market share, Gemini đang phục vụ 2,800+ companies (late 2025) (getpanto.ai) khách doanh nghiệp, Claude tăng trưởng mạnh ở mảng coding và enterprise. Với chatbot cho website Việt, cả ba đều handle tiếng Việt tốt - nhưng về pricing và tốc độ thì khác nhau đáng kể.

So sánh pricing thực tế - con số bạn cần biết

Đây là phần mình thấy nhiều bài viết hay bỏ qua: pricing theo workload thực tế, không phải chỉ quote giá per token.

Provider Model Input (1M tokens) Output (1M tokens) Chi phí ước tính/tháng
Gemini 2.5 Flash ~$0.15 ~$0.60 ~$85
OpenAI GPT-5 Mini ~$0.40 ~$1.60 ~$344
Claude Sonnet 4.6 ~$3 ~$15 ~$600

Ước tính cho chatbot ecommerce Việt cỡ vừa: ~50K conversations/tháng, trung bình 500 tokens input + 300 tokens output mỗi lượt.

343041 Gemini Flash rẻ hơn Claude Sonnet gần 7 lần cho cùng workload

Nhìn vào bảng này, Gemini Flash thắng tuyệt đối về chi phí. Nhưng có 3 điều cần lưu ý:

Caching giúp giảm chi phí đáng kể. Claude có prompt caching giảm 90% (CloudZero) cho các request hit cache. OpenAI có cached inputs rẻ hơn 50% (Holori.com OpenAI Pricing Guide) so với fresh request. Gemini cũng có context caching tương tự. Với chatbot ecommerce có system prompt dài (chứa thông tin sản phẩm, chính sách), caching là bắt buộc.

Batch API cho phép giảm thêm 50%. Nếu bạn có workload không cần real-time (phân tích review, cập nhật mô tả sản phẩm hàng loạt), OpenAI Batch API và Claude đều hỗ trợ giảm thêm 50%.

Rate limit khác nhau. Free tier của Gemini khá hào phóng cho prototype - đây là lý do nhiều team Việt chọn Gemini để bắt đầu.

Tốc độ và tiếng Việt: ai xử lý tốt hơn?

Bao nhiêu lần bạn dùng chatbot mà phải chờ 5-6 giây mới có response? Với ecommerce, người dùng không kiên nhẫn như vậy đâu.

Tốc độ (TTFT - Time to First Token):

  • Gemini Flash: nhanh nhất, thường dưới 500ms
  • OpenAI GPT-5 Mini: tương đương, ~500-800ms
  • Claude Haiku 4.5: ~600-900ms
  • Các flagship model (Gemini Pro, GPT-5, Claude Opus): chậm hơn 2-3x nhưng quality cao hơn đáng kể

Với chatbot cần real-time response, dùng Flash/Mini/Haiku. Để phân tích phức tạp (phân loại đơn hàng, xử lý khiếu nại), dùng Pro/Opus/Sonnet.

343042 Flash models nhanh hơn 2-3x flagship, đủ dùng cho chat thông thường

Tiếng Việt - thực tế thế nào?

Mình test cả ba với các query ecommerce Việt phổ biến: "áo sơ mi Hà Nội dưới 500k", "chính sách đổi trả", "size áo M tương đương bao nhiêu cm". Kết quả không ai tệ - cả ba đều hiểu tốt. Khác biệt nhỏ nhưng có:

  • Gemini xử lý tốt query kèm hình ảnh (ví dụ: "chiếc áo này có màu gì"), nhờ native multimodal
  • Claude trả lời chính xác hơn khi query phức tạp, nhiều điều kiện ("tìm váy midi màu trơn, không họa tiết, size S-M, giá 300-600k, có freeship")
  • OpenAI văn phong tự nhiên nhất trong tiếng Việt, phù hợp cho chatbot sales

Không có AI nào sai tiếng Việt cơ bản. Chọn theo use case, không chọn theo "ai giỏi tiếng Việt hơn".

Tutorial: Build chatbot Next.js + RAG cho ecommerce Việt

Phần này mình sẽ build chatbot thực tế: người dùng hỏi về sản phẩm, bot tìm trong catalog rồi trả lời tiếng Việt. Dùng Next.js 15, Vercel AI SDK, Supabase vector store.

Bước 1: Setup project

npx create-next-app@latest vn-shop-chatbot --typescript --tailwind --app
cd vn-shop-chatbot
npm install ai @ai-sdk/google @ai-sdk/openai @ai-sdk/anthropic
npm install @langchain/core @langchain/community @supabase/supabase-js

Tạo file .env.local:

# Chọn 1 trong 3, hoặc cả 3 để A/B test
GEMINI_API_KEY=your_key_here
OPENAI_API_KEY=your_key_here
ANTHROPIC_API_KEY=your_key_here

# Supabase cho vector store
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_KEY=your_service_key

Bước 2: RAG - embed catalog sản phẩm

// lib/rag.ts - Tìm sản phẩm liên quan từ câu hỏi người dùng
import { createClient } from '@supabase/supabase-js';
import { OpenAIEmbeddings } from '@langchain/openai';

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

export async function findRelevantProducts(query: string) {
  // Chuyển câu hỏi thành vector
  const embeddings = new OpenAIEmbeddings({
    apiKey: process.env.OPENAI_API_KEY,
  });
  const queryVector = await embeddings.embedQuery(query);

  // Tìm sản phẩm tương tự trong Supabase
  const { data } = await supabase.rpc('match_products', {
    query_embedding: queryVector,
    match_threshold: 0.7,
    match_count: 5,
  });

  return data || [];
}

343043 RAG flow: câu hỏi → embed → tìm vector → inject vào prompt → AI trả lời

Bước 3: API route với streaming

// app/api/chat/route.ts
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import { streamText } from 'ai';
import { findRelevantProducts } from '@/lib/rag';

export const runtime = 'edge'; // Dùng Edge Runtime cho latency thấp

export async function POST(req: Request) {
  const { messages } = await req.json();
  const lastMessage = messages[messages.length - 1].content;

  // Tìm sản phẩm liên quan qua RAG
  const products = await findRelevantProducts(lastMessage);
  const productContext = products
    .map((p: any) => `${p.name} - ${p.price}đ - ${p.description}`)
    .join('\n');

  const gemini = createGoogleGenerativeAI({
    apiKey: process.env.GEMINI_API_KEY!,
  });

  const result = await streamText({
    model: gemini('gemini-2.5-flash'), // Đổi sang gpt-5-mini hoặc claude-haiku-4-5 nếu muốn
    system: `Bạn là trợ lý mua sắm của shop thời trang Việt.
    Trả lời ngắn gọn, thân thiện bằng tiếng Việt.
    Dựa vào danh sách sản phẩm sau để tư vấn:
    ${productContext}`,
    messages,
  });

  return result.toDataStreamResponse();
}

Bước 4: Chat UI component

// app/components/ChatWidget.tsx
'use client';
import { useChat } from 'ai/react';

export function ChatWidget() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: '/api/chat',
      initialMessages: [
        {
          id: 'welcome',
          role: 'assistant',
          content: 'Chào bạn! Mình có thể giúp bạn tìm sản phẩm phù hợp. Bạn đang tìm gì? 👋',
        },
      ],
    });

  return (
    <div className="fixed bottom-4 right-4 w-80 bg-white rounded-2xl shadow-lg border">
      <div className="p-3 bg-blue-600 rounded-t-2xl">
        <h3 className="text-white font-medium">Tư vấn mua sắm</h3>
      </div>

      {/* Danh sách tin nhắn */}
      <div className="h-64 overflow-y-auto p-3 space-y-2">
        {messages.map((m) => (
          <div
            key={m.id}
            className={`p-2 rounded-lg text-sm ${
              m.role === 'user'
                ? 'bg-blue-100 ml-8 text-right'
                : 'bg-gray-100 mr-8'
            }`}
          >
            {m.content}
          </div>
        ))}
        {isLoading && (
          <div className="bg-gray-100 p-2 rounded-lg mr-8 text-sm text-gray-500">
            Đang tìm kiếm...
          </div>
        )}
      </div>

      {/* Form nhập */}
      <form onSubmit={handleSubmit} className="p-3 border-t flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Hỏi về sản phẩm..."
          className="flex-1 text-sm border rounded-lg px-2 py-1 outline-none"
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-3 py-1 rounded-lg text-sm"
        >
          Gửi
        </button>
      </form>
    </div>
  );
}

Nếu bạn chưa quen với React hooks như useChat, khóa Xây Dựng Website với ReactJS sẽ giúp bạn nắm vững nền tảng trước khi đụng vào AI SDK.

Deploy lên Vercel và tối ưu cho traffic Việt

Code xong rồi. Deploy thế nào cho nhanh và rẻ?

# Cài Vercel CLI nếu chưa có
npm i -g vercel

# Deploy
vercel --prod

Vercel tự detect Next.js App Router, không cần config gì thêm. Nhưng có vài điểm cần chỉnh cho AI workload:

// vercel.json - Config cho API route AI
{
  "functions": {
    "app/api/chat/route.ts": {
      "maxDuration": 30
    }
  }
}

Mặc định Vercel timeout sau 10s. Với streaming response từ AI, 30s là an toàn hơn, nhất là khi dùng model flagship.

343044 Edge Runtime + streaming giảm perceived latency rõ rệt so với serverless thông thường

3 thứ cần set trong Vercel dashboard:

  1. Environment variables: Add GEMINI_API_KEY (hoặc key của provider bạn chọn), NEXT_PUBLIC_SUPABASE_URL, SUPABASE_SERVICE_KEY
  2. Edge Runtime: Đã khai báo trong route file (export const runtime = 'edge'), Vercel tự xử lý
  3. Spending limit: Nhớ bật - Vercel Pro có thể tốn tiền nếu traffic đột biến

Tối ưu chi phí AI khi traffic tăng:

System prompt chứa thông tin shop (địa chỉ, chính sách, catalog nhỏ) thường chiếm 60-70% token input. Dùng caching của từng provider để không tính phí phần này mỗi request:

  • Claude: Thêm cache_control vào system message
  • Gemini: Dùng Context Caching API
  • OpenAI: Automatic prompt caching (không cần config)

Tình huống thực tế: Shop thời trang Hà Nội, 2000 conversation/ngày, system prompt 2000 tokens, average response 400 tokens. Không cache: ~$45/tháng với Gemini Flash. Có cache (80% hit rate): xuống còn ~$12/tháng. Đáng để implement.

Nếu bạn muốn tìm hiểu sâu hơn về deploy và infrastructure, khóa Frontend NextJS và Backend NodeJS cover khá chi tiết phần này trong context production.

Nên chọn API nào cho website Việt của bạn?

Sau tất cả những thứ trên, đây là recommendation thực tế:

Chọn Gemini Flash nếu: Budget tight, cần multimodal (chat kèm ảnh sản phẩm), traffic cao, hoặc đang prototype. Free tier hào phóng, giá production rẻ nhất trong 3.

Chọn Claude Sonnet nếu: Chatbot cần xử lý query phức tạp (so sánh nhiều sản phẩm, phân tích yêu cầu chi tiết), ưu tiên accuracy hơn tốc độ, hoặc cần độ bảo mật cao (enterprise, fintech).

Chọn OpenAI GPT-5 Mini nếu: Team đã quen ecosystem OpenAI, cần nhiều tutorial/community support, hoặc dùng kèm các tool khác của OpenAI (Assistants API, fine-tuning).

343045 Không có cái nào "tốt nhất" - chỉ có cái phù hợp nhất với bài toán của bạn

Một điểm quan trọng: Vercel AI SDK cho phép swap model bằng 1 dòng code. Không cần viết lại logic. Bạn hoàn toàn có thể bắt đầu với Gemini Flash (rẻ), rồi switch sang Claude Sonnet khi cần quality cao hơn - hoặc thậm chí route theo loại query.

Bước tiếp theo:

  1. Clone template và thay API key
  2. Embed catalog sản phẩm vào Supabase vector store
  3. Deploy lên Vercel, test với 10-20 query tiếng Việt thực tế
  4. Monitor cost trong dashboard, bật caching khi hit rate >50%

Gặp vướng mắc gì trong quá trình build, drop comment bên dưới - mình sẽ trả lời.

0
Next.jsClaude APIGemini APIAI chatbotRAG