Xây dựng AI Chatbot đơn giản tích hợp vào Website cá nhân

Các bạn có bao giờ nghĩ đến việc thay vì để recruiter đọc file PDF CV dài ngoằng, họ có thể chat trực tiếp với “bản sao AI” của bạn ngay trên web Portfolio không?

“Thắng có biết làm Laravel không?”, “Kinh nghiệm làm việc của Thắng thế nào?”… và con bot sẽ trả lời vanh vách. Nghe có vẻ phức tạp, nhưng với công nghệ năm 2026, việc này chỉ mất khoảng 1 buổi chiều cuối tuần. Hôm nay tôi sẽ hướng dẫn các bạn làm một con bot như vậy.

Tech Stack

• Framework: Next.js (App Router)
• AI SDK: Vercel AI SDK (chuẩn bài cho Next.js)
• Model: OpenAI GPT-4o-mini (Rẻ, nhanh, đủ thông minh)
• Styling: Tailwind CSS

Bước 1: Khởi tạo dự án

Đầu tiên, tạo một Next.js app mới:

npx create-next-app@latest my-ai-portfolio
cd my-ai-portfolio
npm install ai openai

Tạo file .env.local và điền key của bạn vào:

OPENAI_API_KEY=sk-proj-xxxx...

Bước 2: Tạo API Route xử lý Chat

Trong Next.js App Router, chúng ta tạo file app/api/chat/route.ts. Đây là “bộ não” nơi nhận tin nhắn và gọi OpenAI.

Điểm mấu chốt ở đây là System Prompt. Đây là nơi bạn “nhồi” thông tin về bản thân vào để bot học.

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

// Đây là "CV" của bạn dưới dạng text
const MY_CONTEXT = `
Bạn là trợ lý AI của Thắng Nguyễn.
Thông tin về Thắng:
- Role: Senior Fullstack Developer.
- Tech stack: Laravel, Vue.js, React, Astro.
- Kinh nghiệm: 5 năm, từng làm tại công ty ABC và XYZ.
- Sở thích: Viết blog, chạy bộ.
Hãy trả lời ngắn gọn, thân thiện và chuyên nghiệp.
`;

export const maxDuration = 30;

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    system: MY_CONTEXT,
    messages,
  });

  return result.toDataStreamResponse();
}

Ở mức đơn giản, chúng ta hard-code thông tin vào biến MY_CONTEXT. Ở mức nâng cao hơn (RAG), bạn sẽ tìm kiếm thông tin này từ Vector Database, nhưng để bắt đầu thì thế này là đủ dùng.

Bước 3: Xây dựng UI Chat đơn giản

Vercel AI SDK cung cấp hook useChat cực kỳ tiện lợi. Nó lo hết việc quản lý state input, messages, và sự kiện onSubmit.

Tạo file app/page.tsx:

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      <h1 className="text-2xl font-bold text-center mb-4">Chat với AI của Thắng</h1>
      
      <div className="space-y-4 mb-4">
        {messages.map(m => (
          <div key={m.id} className={`whitespace-pre-wrap p-4 rounded-lg ${
            m.role === 'user' 
              ? 'bg-blue-100 dark:bg-blue-900 ml-auto max-w-[80%]' 
              : 'bg-gray-100 dark:bg-gray-800 mr-auto max-w-[80%]'
          }`}>
            <span className="font-bold block mb-1">
              {m.role === 'user' ? 'Recruiter' : 'AI Bot'}:
            </span>
            {m.content}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="fixed bottom-0 w-full max-w-md p-2 bg-white dark:bg-black border-t">
        <input
          className="w-full p-2 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
          value={input}
          placeholder="Hỏi gì đó về Thắng đi..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

Kết quả và Tối ưu

Chạy npm run dev và thử hỏi: “Thắng có biết React không?”. Bot sẽ dựa vào MY_CONTEXT để trả lời đúng ý bạn định hướng.

Một số lời khuyên thực tế khi làm tính năng này:

1. Chống Spam: Đừng quên thêm Rate Limit. API của OpenAI tính tiền theo token, nếu bị bot khác spam vào chatbox của bạn thì ví tiền sẽ “khóc thét”.
2. Stream UI: Hiệu ứng chữ chạy ra từ từ làm app cảm giác xịn hơn hẳn so với việc hiện bụp một cái. useChat đã hỗ trợ sẵn việc này.
3. Fallback: Nếu user hỏi ngoài lề (ví dụ: “Cách nấu phở bò”), hãy prompt cho system biết cách từ chối khéo: “Xin lỗi, tôi chỉ biết thông tin về công việc của Thắng thôi”.

Kết luận

Việc tích hợp AI vào website cá nhân không chỉ làm đẹp Portfolio mà còn chứng minh cho nhà tuyển dụng thấy bạn là người cập nhật công nghệ nhanh chóng. Thử làm ngay nhé, chỉ mất 15-30 phút thôi!