Xây Dựng Chatbot AI Đa Năng Từ Đầu: Giới Thiệu Radhika và Hành Trình “Code Vibe” Giao Diện

Giới Thiệu Radhika: Trợ Lý AI Thích Ứng và Thông Minh

Chào mừng bạn đến với bài viết sâu sắc về quá trình xây dựng một chatbot AI từ con số 0 – dự án Radhika: Adaptive Reasoning & Intelligence Assistant (Trợ Lý Thông Minh và Suy Luận Thích Ứng). Radhika không chỉ là một chatbot thông thường; nó được thiết kế để cung cấp hỗ trợ chuyên biệt trên sáu chế độ riêng biệt: Chung (General), Năng suất (Productivity), Sức khỏe (Wellness), Học tập (Learning), Sáng tạo (Creative), và Người bạn thân (BFF).

Mục tiêu của Radhika là trở thành trợ lý linh hoạt, có khả năng điều chỉnh tính cách và phản hồi tùy thuộc vào nhu cầu hiện tại của người dùng, từ việc giúp bạn quản lý công việc đến việc trò chuyện như một người bạn thế hệ Z.

Trong bài viết này, chúng ta sẽ đi sâu vào cấu trúc kỹ thuật, logic hoạt động cốt lõi, và cách giao diện người dùng được tạo ra, mang đến cái nhìn toàn diện về cách một trợ lý AI đa năng như Radhika ra đời.

🛠️ Ngăn Xếp Công Nghệ (Tech Stack)

Việc xây dựng một hệ thống phức tạp như Radhika đòi hỏi sự kết hợp của nhiều công nghệ hiện đại. Dưới đây là các thành phần chính trong ngăn xếp công nghệ:

Frontend

  • Framework: Next.js 14 sử dụng App Router và React 18 cho hiệu suất và cấu trúc ứng dụng tối ưu.
  • Styling: Tailwind CSS kết hợp với hệ thống thiết kế tùy chỉnh, giúp tạo ra giao diện đẹp mắt và dễ bảo trì.
  • Components: Thư viện thành phần shadcn/ui, cung cấp các component UI chất lượng cao, có khả năng tùy biến.
  • Icons: Thư viện biểu tượng Lucide React, mang đến bộ sưu tập icon sắc nét, dễ sử dụng.
  • 3D Graphics: Three.js được tích hợp để tạo hiệu ứng hình ảnh hạt 3D động, tăng cường trải nghiệm tương tác.
  • Animations: Sử dụng CSS transitions và keyframe animations để tạo các hiệu ứng chuyển động mượt mà.

AI & Backend

  • AI Integration: Vercel AI SDK, một bộ công cụ thống nhất giúp truy cập dễ dàng đến các mô hình ngôn ngữ lớn (LLM) khác nhau.
  • Providers: Hỗ trợ đa nhà cung cấp LLM bao gồm Groq, Google Gemini, OpenAI, và Claude, mang đến sự linh hoạt và khả năng truy cập vào nhiều mô hình khác nhau.
  • Speech: WebKit Speech Recognition và Synthesis APIs được sử dụng để xử lý đầu vào bằng giọng nói và tạo ra đầu ra bằng giọng nói.
  • Storage: localStorage của trình duyệt được dùng để lưu trữ lịch sử trò chuyện và cài đặt, đảm bảo tính liên tục của cuộc hội thoại.
  • API: Các Next.js API routes cung cấp điểm cuối an toàn để giao tiếp với các LLM.

Development

  • Language: TypeScript, ngôn ngữ có kiểu an toàn, giúp phát triển ứng dụng quy mô lớn một cách đáng tin cậy.
  • Build: Hệ thống build của Next.js với các tối ưu hóa hiệu suất tích hợp.
  • Deployment: Sẵn sàng triển khai trên Vercel, hỗ trợ biến môi trường.
  • Performance: Tối ưu hóa bằng cách chia nhỏ bundle (bundle splitting) và tải lười (lazy loading) để cải thiện tốc độ tải trang.

🚀 Triển Khai Logic Hoạt Động Cốt Lõi

Trái tim của Radhika nằm ở điểm cuối API xử lý các yêu cầu trò chuyện. Phần này sẽ phân tích chi tiết cách tệp app/api/chat/route.ts hoạt động để xử lý yêu cầu, chọn mô hình, áp dụng lời nhắc hệ thống (system prompts) và truyền phát phản hồi từ các nhà cung cấp AI khác nhau.

  1. Parse Request

    Bộ xử lý yêu cầu bắt đầu bằng cách phân tích cú pháp phần thân JSON từ yêu cầu POST gửi đến:

    const body = await req.json();
const { messages, mode = "general", provider = "groq", apiKey } = body;
    • messages: Lịch sử cuộc trò chuyện được gửi từ client.
    • mode: Xác định lời nhắc hệ thống nào sẽ sử dụng (ví dụ: bff, learning, v.v.).
    • provider: Chỉ định backend AI nào sẽ sử dụng (groq, openai, claude, gemini).
    • apiKey: Bắt buộc đối với OpenAI và Claude nếu người dùng cần sử dụng khóa API của riêng họ.

    Code cũng kiểm tra xem mảng messages có tồn tại và không rỗng hay không.

  2. Assign System Prompt

    Dựa trên chế độ đã chọn, một lời nhắc hệ thống phù hợp sẽ được gán để định hướng tính cách và mục đích của trợ lý:

    const systemPrompt = SYSTEM_PROMPTS[mode] || SYSTEM_PROMPTS.general;

    Các chế độ khác nhau sẽ có lời nhắc hệ thống riêng biệt để đảm bảo Radhika hành xử phù hợp, ví dụ như khi ở chế độ productivity, bff, creative, hay wellness.

  3. Route to the Correct Provider

    Trường provider quyết định backend mô hình AI nào sẽ được sử dụng:

    • Gemini (google): Sử dụng mô hình Gemini 2.0 của Google.
    • OpenAI: Sử dụng các mô hình GPT (như gpt-4o, gpt-3.5-turbo).
    • Claude: Sử dụng các mô hình của Anthropic (như claude-3-sonnet).
    • Groq: Mặc định sử dụng các mô hình như llama-3 và qwen.

    Mỗi nhà cung cấp có logic tùy chỉnh để khởi tạo mô hình, xử lý lỗi và truyền phát phản hồi bằng cách sử dụng hàm streamText.

    await streamText({...});

  4. Model Selection (Groq Only)

    Nếu nhà cung cấp là Groq, việc chọn mô hình sẽ diễn ra động. Nó phân tích tin nhắn cuối cùng để xác định loại nhiệm vụ:

    if (lastMessage.includes("analyze") || lastMessage.includes("plan")) {
  modelType = "reasoning";
} else if (lastMessage.includes("creative") || lastMessage.includes("design")) {
  modelType = "creative";
} else {
  modelType = "fast";
}

    RADHIKA tự động chọn mô hình tốt nhất dựa trên độ phức tạp của truy vấn:

    // Determine which model to use based on conversation context
let modelType = "fast"; // llama-3.1-8b-instant for quick responses

// Use reasoning model for complex analytical tasks
if (query.includes("analyze") || query.includes("compare") || query.includes("plan") || query.includes("strategy") || query.includes("decision") || query.includes("problem")) {
  modelType = "reasoning"; // llama-3.3-70b-versatile
}

// Use creative model for artistic and innovative tasks
if (query.includes("creative") || query.includes("brainstorm") || query.includes("idea") || query.includes("write") || query.includes("design") || query.includes("story")) {
  modelType = "creative"; // qwen/qwen3-32b
}

    Cấu hình Mô Hình

    Bạn có thể tùy chỉnh việc lựa chọn mô hình trong route API bằng cách cấu hình đối tượng MODELS:

    const MODELS = {
  groq: {
    fast: "llama-3.1-8b-instant",
    reasoning: "llama-3.3-70b-versatile", 
    creative: "qwen/qwen3-32b"
  },
  gemini: { default: "gemini-2.0-flash" },
  openai: { default: "gpt-4o" },
  claude: { default: "claude-3-5-sonnet-20241022" }
}

    Sau đó, mô hình phù hợp (reasoning, creative, hoặc fast) sẽ được chọn và sử dụng để tạo phản hồi.

📄 Luồng Đa Nhà Cung Cấp (Multi-Provider Flow)

Cách tiếp cận này cho phép một route API duy nhất phục vụ nhiều nhà cung cấp mô hình và các “nhân cách” trợ lý khác nhau trong khi vẫn duy trì logic code sạch sẽ, dễ mở rộng. Cấu trúc này được minh họa chi tiết trong sơ đồ luồng xử lý của ứng dụng, thể hiện cách yêu cầu đi qua các bước phân tích, lựa chọn chế độ/lời nhắc, và định tuyến đến backend AI phù hợp trước khi trả về phản hồi.

Nếu bạn quan tâm đến các logic khác như nhận dạng giọng nói, tổng hợp giọng nói, chế độ sáng/tối, v.v., bạn có thể khám phá mã nguồn chi tiết trên GitHub:

RS-labhub / Radhika

Dự án này là một minh chứng cho thấy cách xây dựng một trợ lý AI phức tạp với giao diện người dùng hiện đại, tích hợp đa LLM provider và khả năng thích ứng cao.

✨ Các Điểm Nổi Bật Của Dự Án

Radhika tự hào có nhiều tính năng độc đáo, biến nó thành một trợ lý AI vượt trội:

  • 🤖 Trí tuệ Đa Chế độ (Multi-Modal AI): Sáu nhân cách trợ lý chuyên biệt trong một ứng dụng duy nhất.
  • ⚡ Hỗ trợ Đa Nhà Cung Cấp (Multi-Provider Support): Tích hợp liền mạch với Groq, Gemini, OpenAI và Claude.
  • 🎤 Giọng nói Nâng Cao (Advanced Voice): Hỗ trợ chuyển đổi giọng nói thành văn bản (speech-to-text) và văn bản thành giọng nói (text-to-speech) cho tương tác tự nhiên.
  • 🎨 Hình ảnh 3D Động (Dynamic 3D Visuals): Hệ thống hạt tương tác với màu sắc thay đổi theo chế độ, tạo trải nghiệm thị giác hấp dẫn.
  • 💾 Lưu trữ Thông Minh (Smart Persistence): Tự động lưu lịch sử trò chuyện cho từng chế độ riêng biệt.
  • 🚀 Hành động Nhanh (Quick Actions): Truy cập nhanh chóng các tác vụ phổ biến chỉ với một cú nhấp chuột, tùy thuộc vào chế độ đang hoạt động.
  • 📊 Phân tích Thời gian Thực (Real-time Analytics): Theo dõi số liệu thống kê sử dụng và hoạt động của AI trực tiếp.
  • 🌙 Giao diện Đẹp Mắt (Beautiful UI): Thiết kế đáp ứng (responsive design) với chủ đề sáng/tối (dark/light themes) và các tùy chọn giao diện hiện đại/pixel.

🎯 Các Chế độ Hoạt Động Chi Tiết

Radhika thực sự tỏa sáng ở khả năng thích ứng thông qua các chế độ đặc biệt:

  • Năng suất (Productivity): Hỗ trợ lập kế hoạch công việc, quản lý dự án, tối ưu hóa thời gian và sắp xếp công việc.
  • Sức khỏe (Wellness): Cung cấp hướng dẫn về sức khỏe, các bài tập thể dục, hỗ trợ tinh thần và chăm sóc bản thân một cách nhạy bén.
  • Học tập (Learning): Đóng vai trò người cố vấn học tập, giúp xây dựng kế hoạch học tập cá nhân hóa và phát triển kỹ năng.
  • Sáng tạo (Creative): Là đối tác cho các buổi brainstorming, hỗ trợ tạo nội dung, và truyền cảm hứng cho các dự án nghệ thuật.
  • Chung (General): Chế độ đa năng cho việc giải quyết vấn đề, ra quyết định và các cuộc trò chuyện hàng ngày.
  • Người bạn thân (BFF): Cung cấp hỗ trợ tinh thần, trò chuyện thân mật, và tương tác theo phong cách thân thiện, trẻ trung (thế hệ Z).

Các chế độ này làm cho Radhika trở nên hoàn hảo cho những người cần một trợ lý AI linh hoạt, có khả năng thích ứng với các ngữ cảnh khác nhau, duy trì lịch sử cuộc trò chuyện trên các lĩnh vực chuyên biệt, và mang lại trải nghiệm thị giác hấp dẫn cùng khả năng tương tác bằng giọng nói tiên tiến.

💃 Thiết Kế Giao Diện (“Vibe Coding”)

Sau khi logic cốt lõi được xây dựng vững chắc, quá trình “code vibe” giao diện người dùng bắt đầu. Đây là lúc sự sáng tạo kết hợp với công cụ AI để hiện thực hóa ý tưởng thiết kế. Các công cụ như v0, lovable, hoặc bolt có thể được sử dụng để tạo ra giao diện dựa trên mô tả hoặc “ý tưởng” của nhà phát triển.

Trong trường hợp của Radhika, việc sử dụng v0 và ChatGPT đã hỗ trợ rất nhiều trong quá trình thiết kế giao diện. Quá trình này bao gồm việc đưa ra các lời nhắc (prompting) liên tục để tinh chỉnh và hoàn thiện thiết kế.

Bạn có thể xem video giới thiệu ngắn gọn về dự án và các tính năng chính của nó, hoặc tốt hơn hết, hãy trải nghiệm trực tiếp phiên bản live demo để cảm nhận giao diện và các chế độ hoạt động.

Nếu bạn thấy dự án này thú vị và hữu ích, đừng quên star repository trên GitHub và theo dõi nhà phát triển!

📚 Kết Luận

Radhika là một trợ lý AI tinh vi, được xây dựng bằng Next.js và được cung cấp sức mạnh bởi nhiều nhà cung cấp LLM bao gồm Groq, Gemini, OpenAI và Claude. RADHIKA không chỉ đơn thuần trả lời câu hỏi; nó thích ứng với các chế độ tương tác khác nhau, cung cấp hỗ trợ chuyên biệt cho năng suất, sức khỏe, học tập, các nhiệm vụ sáng tạo, và thậm chí hoạt động như người bạn thân thiết của bạn.

Trải nghiệm Radhika, đặc biệt là ở chế độ “BFF”, có thể mang lại những bất ngờ thú vị và cho thấy tiềm năng của các mô hình AI trong việc tạo ra các tương tác cá nhân hóa và gần gũi.

Cảm ơn bạn đã đọc bài viết này. Hy vọng nó đã cung cấp cho bạn cái nhìn sâu sắc về quá trình xây dựng một trợ lý AI đa năng. Đừng ngần ngại khám phá dự án qua các liên kết dưới đây:

Hẹn gặp lại bạn trong các bài viết tiếp theo!

Recent News Articles

Fresh job related news content posted each day.

Mục lục

→ Chỉ mục