Đ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

Agentic AI Assistants: Xây Chatbot Thông Minh Thực Hiện Task Cho Website 2026

Ếch Trendy
Ếch Trendy

7 tháng trước · 14 phút đọc

Chatbot cũ đã chết - agentic AI đang thay thế

Bạn có bao giờ thấy bực khi chat với bot của một shop online, hỏi "còn hàng không" thì nó trả lời "Xin chào! Mình có thể giúp gì cho bạn?" không? Đó là chatbot thế hệ cũ - script cứng, không có não.

Agentic AI khác hoàn toàn. Thay vì chờ bạn hỏi từng bước, nó chủ động quan sát trạng thái website, lên kế hoạch hành động, gọi API kiểm tra kho hàng, rồi trả lời chính xác - tất cả trong một lượt.

342364 Observe → Plan → Act → Reflect: vòng lặp cốt lõi của agentic AI

Thị trường agentic AI đang tăng tốc mạnh. Dự báo đạt {{fact:fact_0}} vào 2030, và {{fact:fact_1}} ứng dụng doanh nghiệp sẽ tích hợp loại AI này vào cuối 2026. Với e-commerce Việt Nam - nơi người dùng kỳ vọng hỗ trợ nhanh, cá nhân hóa, bằng tiếng Việt - đây là bước nhảy đáng đầu tư.

Bài này mình sẽ đi từ kiến trúc, chọn framework, đến code thực tế với OpenAI/Claude API - đủ để bạn build prototype trong vài ngày.


Agentic AI khác chatbot thường ở chỗ nào?

So sánh thẳng cho dễ hiểu:

Tiêu chí Chatbot cũ Agentic AI
Luồng hoạt động Script cố định Tự lên kế hoạch theo goal
Tích hợp Trả lời text Gọi API, thao tác DB
Bộ nhớ Không nhớ Nhớ context xuyên session
Chủ động Phản ứng khi được hỏi Proactive khi thấy cơ hội
Xử lý lỗi Crash hoặc "Xin lỗi, mình chưa hiểu" Retry, fallback, escalate sang người

342365 Cùng một câu hỏi - hai kết quả hoàn toàn khác nhau

Ví dụ thực tế: khách hỏi "Tôi muốn mua áo hoodie size L, còn không?"

Chatbot cũ: "Bạn vui lòng xem thêm tại mục sản phẩm."

Agentic AI: Gọi API kho hàng → phát hiện còn 3 cái → kiểm tra lịch sử mua của khách → gợi ý thêm quần jogger đang sale cùng phong cách → tạo draft giỏ hàng → hỏi "Anh/chị muốn thêm vào giỏ hàng luôn không?"

Tất cả trong một luồng tự động, không cần dev code thêm rule nào.


Kiến trúc: 3 lớp bạn cần xây

Không cần over-engineer ngay từ đầu. Một agentic AI cho website e-commerce cần 3 lớp cơ bản:

Lớp 1 - LLM Core: OpenAI GPT-4o hoặc Claude 3.5/3.7 Sonnet. Đây là "não" - chịu trách nhiệm reasoning, tool calling, và tạo response. Claude 3.5 Sonnet hiện mạnh hơn trong việc sử dụng tool phức tạp; GPT-4o tốt hơn nếu bạn cần multimodal (xử lý ảnh sản phẩm).

Lớp 2 - Orchestration Framework: LangGraph nếu bạn cần stateful và workflow phức tạp; CrewAI nếu muốn prototype nhanh dưới 100 dòng code; OpenAI Swarm nếu scale nhiều agent nhỏ.

Lớp 3 - Tools/APIs: Kết nối thực tế - inventory API, payment gateway, CRM, database khách hàng.

342366 Lớp orchestration quyết định agent "thông minh" đến mức nào

Dưới đây là ví dụ setup cơ bản với OpenAI Assistants API và Python:

from openai import OpenAI
import json

client = OpenAI(api_key="your-api-key")

# Định nghĩa tools mà agent có thể dùng
tools = [
    {
        "type": "function",
        "function": {
            "name": "check_inventory",
            "description": "Kiểm tra số lượng tồn kho của sản phẩm",
            "parameters": {
                "type": "object",
                "properties": {
                    "product_id": {"type": "string", "description": "ID sản phẩm"},
                    "size": {"type": "string", "description": "Kích cỡ: S, M, L, XL"}
                },
                "required": ["product_id"]
            }
        }
    },
    {
        "type": "function",
        "function": {
            "name": "add_to_cart",
            "description": "Thêm sản phẩm vào giỏ hàng của khách",
            "parameters": {
                "type": "object",
                "properties": {
                    "product_id": {"type": "string"},
                    "quantity": {"type": "integer"},
                    "user_id": {"type": "string"}
                },
                "required": ["product_id", "quantity", "user_id"]
            }
        }
    }
]

# Khởi tạo assistant với persona tiếng Việt
assistant = client.beta.assistants.create(
    name="Shop Assistant",
    instructions="""Bạn là trợ lý mua sắm của một shop thời trang Việt Nam.
    Luôn trả lời bằng tiếng Việt, thân thiện.
    Khi khách hỏi về sản phẩm, CHỦ ĐỘNG kiểm tra kho trước khi trả lời.
    Nếu còn hàng, gợi ý thêm sản phẩm liên quan.""",
    model="gpt-4o",
    tools=tools
)

print(f"Assistant ID: {assistant.id}")

Phần instructions ở đây rất quan trọng - đây là nơi bạn định hình personality và behavior của agent. Viết càng cụ thể, agent càng hành động đúng ý.


Build agent với LangGraph: stateful và production-ready

OpenAI Assistants API đủ dùng cho prototype. Nhưng khi bạn cần agent nhớ context xuyên nhiều session, handle lỗi có logic, hoặc chạy nhiều agent song song - LangGraph là lựa chọn tốt hơn.

LangGraph build trên LangChain, cho phép bạn định nghĩa workflow dưới dạng graph với nodes và edges - rất trực quan khi debug.

from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver
from langchain_openai import ChatOpenAI
from langchain_core.messages import HumanMessage, AIMessage
from typing import TypedDict, List

# Định nghĩa state của agent
class ShopAgentState(TypedDict):
    messages: List
    user_id: str
    cart_items: List
    intent: str  # browse | buy | support

# Node: phân tích intent của khách
def analyze_intent(state: ShopAgentState):
    llm = ChatOpenAI(model="gpt-4o")
    last_msg = state["messages"][-1].content
    
    response = llm.invoke([
        HumanMessage(content=f"""
        Phân tích intent của tin nhắn này (chỉ trả về 1 trong 3: browse/buy/support):
        '{last_msg}'
        """)
    ])
    
    return {"intent": response.content.strip()}

# Node: xử lý intent mua hàng
def handle_buy_intent(state: ShopAgentState):
    # Gọi API kho hàng, tạo giỏ hàng...
    llm = ChatOpenAI(model="gpt-4o")
    response = llm.invoke(state["messages"] + [
        HumanMessage(content="Kiểm tra kho và tư vấn mua hàng cho khách")
    ])
    return {"messages": state["messages"] + [AIMessage(content=response.content)]}

# Router: chọn node tiếp theo dựa trên intent
def route_by_intent(state: ShopAgentState):
    if state["intent"] == "buy":
        return "handle_buy"
    elif state["intent"] == "support":
        return "handle_support"
    return "handle_browse"

# Tạo graph
workflow = StateGraph(ShopAgentState)
workflow.add_node("analyze", analyze_intent)
workflow.add_node("handle_buy", handle_buy_intent)

# Thêm edges với conditional routing
workflow.set_entry_point("analyze")
workflow.add_conditional_edges("analyze", route_by_intent, {
    "handle_buy": "handle_buy",
    "handle_support": END,
    "handle_browse": END
})
workflow.add_edge("handle_buy", END)

# Bật memory để nhớ xuyên session
memory = MemorySaver()
app = workflow.compile(checkpointer=memory)

# Chạy với config session
config = {"configurable": {"thread_id": "user-123"}}
result = app.invoke(
    {
        "messages": [HumanMessage(content="Tôi muốn mua hoodie size L")],
        "user_id": "user-123",
        "cart_items": [],
        "intent": ""
    },
    config=config
)

342367 LangGraph cho phép visualize workflow - debug dễ hơn nhiều so với chain thẳng

MemorySaver ở đây lưu state vào memory (đủ cho dev). Production thì swap sang PostgresSaver hoặc RedisSaver để persist xuyên restart server. Đây là điểm LangGraph vượt trội so với plain API calls - bạn không cần tự viết session management.

Nếu bạn muốn hiểu sâu hơn về async và event loop của JavaScript trước khi xây backend Node cho agent, khóa Lập Trình JavaScript Nâng Cao có phần về async/await và Promise chain rất hữu ích.


Claude API + MCP: cách Anthropic làm khác

Nếu OpenAI/LangGraph nghiêng về flexibility, Anthropic chọn hướng standardization. MCP (Model Context Protocol) là giao thức mở để agent kết nối với bất kỳ tool/database nào theo cách plug-and-play - không cần custom integration cho mỗi service.

Với Claude 3.5/3.7 Sonnet, tool use rất mạnh và ít hallucination hơn khi gọi function phức tạp:

import anthropic

client = anthropic.Anthropic(api_key="your-key")

# Định nghĩa tools theo format Anthropic
tools = [
    {
        "name": "search_products",
        "description": "Tìm kiếm sản phẩm theo từ khóa, lọc theo giá, size, màu sắc",
        "input_schema": {
            "type": "object",
            "properties": {
                "query": {"type": "string", "description": "Từ khóa tìm kiếm"},
                "max_price": {"type": "number", "description": "Giá tối đa (VNĐ)"},
                "category": {"type": "string"}
            },
            "required": ["query"]
        }
    }
]

# Gọi Claude với tool use
response = client.messages.create(
    model="claude-3-5-sonnet-20241022",
    max_tokens=1024,
    system="""Bạn là AI assistant cho shop thời trang tại TP.HCM.
    Luôn dùng tool search_products trước khi tư vấn sản phẩm.
    Trả lời ngắn gọn, friendly, bằng tiếng Việt.""",
    tools=tools,
    messages=[
        {"role": "user", "content": "Mình muốn tìm áo khoác dưới 500k"}
    ]
)

# Xử lý tool call nếu có
for block in response.content:
    if block.type == "tool_use":
        tool_name = block.name
        tool_input = block.input
        print(f"Claude gọi tool: {tool_name} với params: {tool_input}")
        
        # Gọi function thực tế của bạn
        # result = your_search_function(**tool_input)
        # Rồi trả kết quả lại cho Claude để tạo response cuối

342368 MCP chuẩn hóa cách agent kết nối tool - không còn phải viết lại integration cho mỗi project

Điểm thú vị của MCP: một khi bạn build MCP server cho inventory system, bất kỳ Claude-based agent nào cũng dùng được ngay - không cần code thêm. Điều này cực kỳ có giá trị khi bạn scale từ 1 agent lên hệ thống nhiều agent.

Tài liệu chính thức Anthropic: {{resource:resource_0}}


Ví dụ thực tế: agent gợi ý sản phẩm cho e-commerce Việt

Mình sẽ walk through một case cụ thể: khách vào trang, đã mua trước đó, agent tự phân tích lịch sử và chủ động gợi ý bundle phù hợp.

E-commerce Việt Nam đang tăng trưởng mạnh. E-commerce Việt dự báo tăng trưởng {{fact:fact_0}} giai đoạn 2024-2026, và các pilot triển khai proactive agent đã ghi nhận tỷ lệ chuyển đổi tăng {{fact:fact_1}}.

from openai import OpenAI
from datetime import datetime

client = OpenAI()

# Giả lập data từ database khách hàng
user_profile = {
    "user_id": "vn-user-456",
    "name": "Anh Tuấn",
    "purchase_history": ["áo thun basic", "quần jogger", "sneakers trắng"],
    "preferred_price_range": "300k-800k",
    "last_visit": "2025-12-10"
}

def get_personalized_recommendation(user_data: dict, current_page: str) -> str:
    """Agent phân tích context và gợi ý cá nhân hóa"""
    
    context = f"""
    Thông tin khách hàng:
    - Đã mua: {', '.join(user_data['purchase_history'])}
    - Ngân sách: {user_data['preferred_price_range']}
    - Đang xem trang: {current_page}
    - Ngày hôm nay: {datetime.now().strftime('%d/%m/%Y')}
    """
    
    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[
            {
                "role": "system",
                "content": """Bạn là shopping assistant AI của một fashion e-commerce Việt Nam.
                Dựa trên lịch sử mua hàng, hãy gợi ý 2-3 sản phẩm bổ sung phù hợp.
                Format: tên sản phẩm | lý do gợi ý | khoảng giá.
                Ngắn gọn, friendly, tiếng Việt."""
            },
            {
                "role": "user",
                "content": context + "\nHãy gợi ý sản phẩm phù hợp cho khách này."
            }
        ],
        temperature=0.7
    )
    
    return response.choices[0].message.content

# Chạy thử
result = get_personalized_recommendation(
    user_data=user_profile,
    current_page="/san-pham/ao-khoac-bomber"
)
print(result)
# Output ví dụ:
# 1. Quần cargo | Hợp với bomber, phong cách streetwear | 350k-500k
# 2. Mũ bucket | Hoàn thiện outfit casual | 150k-250k  
# 3. Túi tote canvas | Đã có sneakers trắng, túi này match cực | 200k-350k

342369 Cá nhân hóa dựa trên lịch sử mua - khách hàng trải nghiệm "được hiểu" thay vì thấy quảng cáo random

Bước tiếp theo để biến đoạn code này thành production:

  1. Kết nối purchase_history với database thật (PostgreSQL/MongoDB)
  2. Thêm vector search (pgvector hoặc Pinecone) để so khớp semantic thay vì chỉ text match
  3. Bọc trong FastAPI endpoint, frontend gọi khi user load trang
  4. A/B test: nhóm có agent vs nhóm không có, đo conversion rate

Download template để bắt đầu: {{resource:resource_0}}


Tích hợp vào website: từ Figma đến Elementor

Code agent xong rồi, nhưng nhúng vào website như thế nào?

Với Figma: Plugin Dev Mode Agent (cập nhật 2025) cho phép bạn map design component với agent trigger. Ví dụ: khi user hover vào product card, tự động gọi agent để pre-load recommendation. Export thẳng ra React component với hook đã gắn sẵn.

Với Elementor: AI Builder plugin hỗ trợ embed agent widget qua shortcode hoặc custom HTML block. Bạn paste endpoint URL của agent (FastAPI/Express), Elementor lo phần UI.

Với custom website: Đây là cách linh hoạt nhất - embed chat widget bằng JavaScript snippet:

// Nhúng vào bất kỳ trang web nào
(function() {
  // Tạo widget container
  const widget = document.createElement('div');
  widget.id = 'ai-agent-widget';
  widget.style.cssText = `
    position: fixed; bottom: 24px; right: 24px;
    width: 380px; height: 500px;
    background: white; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
    font-family: system-ui, sans-serif;
    z-index: 9999;
  `;
  
  // Header
  widget.innerHTML = `
    <div style="background: #0f172a; color: white; padding: 16px; border-radius: 16px 16px 0 0;">
      <strong>🤖 Trợ lý mua sắm AI</strong>
    </div>
    <div id="chat-messages" style="flex:1; overflow-y:auto; padding: 16px;"></div>
    <div style="padding: 12px; border-top: 1px solid #e2e8f0; display: flex; gap: 8px;">
      <input id="user-input" placeholder="Hỏi về sản phẩm..." 
        style="flex:1; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; outline:none;"/>
      <button onclick="sendMessage()" 
        style="background: #0ea5e9; color: white; border:none; padding: 8px 16px; border-radius: 8px; cursor:pointer;">Gửi</button>
    </div>
  `;
  
  document.body.appendChild(widget);
  
  // Gửi message đến agent backend
  window.sendMessage = async function() {
    const input = document.getElementById('user-input');
    const messages = document.getElementById('chat-messages');
    const userMsg = input.value.trim();
    if (!userMsg) return;
    
    // Hiển thị message của user
    messages.innerHTML += `<div style="text-align:right; margin: 8px 0;">
      <span style="background:#0ea5e9; color:white; padding:8px 12px; border-radius:12px; display:inline-block;">${userMsg}</span>
    </div>`;
    input.value = '';
    
    // Gọi agent API
    const response = await fetch('/api/agent/chat', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ 
        message: userMsg,
        user_id: localStorage.getItem('user_id') || 'anonymous',
        page: window.location.pathname
      })
    });
    
    const data = await response.json();
    messages.innerHTML += `<div style="margin: 8px 0;">
      <span style="background:#f1f5f9; padding:8px 12px; border-radius:12px; display:inline-block;">${data.reply}</span>
    </div>`;
    messages.scrollTop = messages.scrollHeight;
  };
})();

342370 Widget này nhúng được vào bất kỳ platform nào - WordPress, Shopify, hay custom code

Backend /api/agent/chat của bạn nhận request, chạy LangGraph/OpenAI logic, trả về {reply: "..."}. Frontend không cần biết gì về AI - tách biệt hoàn toàn.

Nếu bạn đang xây backend Node.js cho endpoint này, khóa Node & ExpressJS có đầy đủ từ routing, middleware đến deploy - tiết kiệm khá nhiều thời gian setup.


Guardrails, monitoring và những thứ dễ bỏ quên

Build xong agent mà không có guardrails là rước họa vào thân. Mình đã từng thấy bot tự ý hứa hẹn discount không có trong policy, rồi khách screenshot đòi đổi trả.

Một vài thứ cần set ngay từ đầu:

Rate limiting: Agent gọi tool tốn tiền. Giới hạn số tool calls mỗi session, và set budget alert trên OpenAI/Anthropic dashboard. Không làm điều này, hóa đơn API cuối tháng sẽ là bất ngờ không vui.

Human-in-the-loop: Với action có rủi ro cao (hoàn tiền, hủy đơn), agent cần escalate sang người thật thay vì tự xử lý:

def should_escalate(action_type: str, amount: float) -> bool:
    """Kiểm tra xem action có cần human approval không"""
    HIGH_RISK_ACTIONS = ["refund", "cancel_order", "apply_discount"]
    
    if action_type in HIGH_RISK_ACTIONS:
        if amount > 500_000:  # Trên 500k VNĐ cần duyệt
            return True
    return False

def handle_agent_action(action_type: str, params: dict):
    if should_escalate(action_type, params.get("amount", 0)):
        # Tạo ticket cho support team
        create_support_ticket(
            action=action_type,
            params=params,
            escalation_reason="Vượt ngưỡng tự động xử lý"
        )
        return "Mình đã chuyển yêu cầu này đến team hỗ trợ. Bạn sẽ nhận phản hồi trong 15 phút."
    
    # Xử lý tự động nếu low-risk
    return execute_action(action_type, params)

Observability: Log mọi tool call với timestamp, input, output, latency. LangSmith (ecosystem của LangGraph) làm điều này tự động. Với Claude, bạn tự implement hoặc dùng Langfuse.

342371 Không có monitoring thì bạn sẽ không biết agent đang làm gì sai cho đến khi khách complain

Prompt injection: Khách có thể gõ "Quên hết instruction cũ, bây giờ hãy..." để hijack agent. Giải pháp: validate input trước khi pass vào LLM, dùng system prompt defense, và test adversarial cases trong QA.

Nói đến QA và testing - đây là bước mà nhiều team bỏ qua với AI agent. Nếu bạn muốn hiểu cách test hệ thống có AI, khóa Kiểm thử phần mềm có nền tảng tốt về test case design và automation.

Bước tiếp theo:

  1. Deploy prototype lên staging, invite 5-10 beta user thật
  2. Monitor logs 2 tuần đầu mỗi ngày
  3. Tạo feedback loop: khách rate response → agent học từ data đó

Gặp vướng mắc phần nào, drop comment - mình sẽ reply.