Xây chatbot hỗ trợ khách hàng trong 10 phút với Chatbase

Tôi vừa xây xong một chatbot hỗ trợ khách hàng cho một SaaS product và chỉ mất đúng 10 phút. Không phải cường điệu — với Chatbase, đây hoàn toàn khả thi. Bài viết này là writeup thực tế, không phải review nhàm chán.

Chatbase là gì và tại sao dùng nó?

Chatbase là platform cho phép bạn train một AI chatbot trên dữ liệu của chính mình — docs, FAQs, website content — rồi nhúng vào bất kỳ đâu. Thay vì tự build RAG pipeline với LangChain, vector database, streaming responses... Chatbase làm hết phần phức tạp đó.

Với developer, điều thú vị là Chatbase có API hoàn chỉnh — bạn có thể custom UI hoàn toàn và chỉ dùng backend của họ.

Bước 1: Tạo chatbot và upload data (5 phút)

Vào Chatbase, tạo chatbot mới. Có 4 nguồn data:

• Files: PDF, DOCX — perfect cho documentation
• Text: Copy paste nội dung trực tiếp
• Website: Nhập URL, Chatbase tự crawl (dùng cho docs site)
• Q&A pairs: Format câu hỏi-trả lời, độ chính xác cao nhất

Tôi dùng combo Website crawl cho docs chính + Q&A pairs cho 20 câu hỏi phổ biến nhất. Train xong trong 2 phút.

Bước 2: Nhúng vào Next.js với custom UI (5 phút)

Chatbase cung cấp embed script, nhưng với Next.js App Router tôi prefer dùng API trực tiếp để control hoàn toàn UI:

// components/ChatWidget.tsx
'use client';

import { useState } from 'react';

type Message = {
  role: 'user' | 'assistant';
  content: string;
};

export function ChatWidget({ chatbotId }: { chatbotId: string }) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  async function sendMessage() {
    if (!input.trim()) return;

    const userMsg: Message = { role: 'user', content: input };
    setMessages(prev => [...prev, userMsg]);
    setInput('');
    setLoading(true);

    const res = await fetch('https://www.chatbase.co/api/v1/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.NEXT_PUBLIC_CHATBASE_API_KEY}`,
      },
      body: JSON.stringify({
        chatbotId,
        messages: [...messages, userMsg],
        stream: false,
      }),
    });

    const data = await res.json();
    setMessages(prev => [
      ...prev,
      { role: 'assistant', content: data.text }
    ]);
    setLoading(false);
  }

  return (
    <div className="fixed bottom-4 right-4 w-80 bg-white shadow-xl rounded-xl">
      <div className="h-64 overflow-y-auto p-3 space-y-2">
        {messages.map((m, i) => (
          <div key={i} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            <span className={`inline-block px-3 py-1.5 rounded-lg text-sm
              ${m.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-100'}`}>
              {m.content}
            </span>
          </div>
        ))}
        {loading && <div className="text-gray-400 text-sm">Đang trả lời...</div>}
      </div>
      <div className="flex gap-2 p-2 border-t">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && sendMessage()}
          placeholder="Hỏi gì đó..."
          className="flex-1 text-sm border rounded px-2 py-1"
        />
        <button onClick={sendMessage} className="bg-blue-500 text-white px-3 py-1 rounded text-sm">
          Gửi
        </button>
      </div>
    </div>
  );
}

Tips nâng cao

Sau vài tuần production, đây là những thứ tôi học được:

• System prompt quan trọng hơn data: Spend thêm 30 phút viết system prompt chi tiết — tone, giới hạn, cách xử lý khi không biết câu trả lời
• Confidence score: Dùng API để lấy confidence, nếu thấp thì fallback về "chuyển sang human support"
• Sync data định kỳ: Dùng Chatbase webhook hoặc cron job để re-train khi docs update

Chi phí thực tế

Plan miễn phí của Chatbase cho 20 messages/ngày — đủ để test. Production thực sự cần plan trả phí, nhưng so với tự build và maintain RAG stack thì rẻ hơn rất nhiều về cả tiền lẫn thời gian. Thử luôn tại link.chatbase.co/nguyen-dang-binh.