Trong thời đại số hóa ngày nay, việc phát triển các AI agent thông minh, có khả năng tương tác trực quan với người dùng là chìa khóa để tạo ra các ứng dụng đột phá. Hướng dẫn toàn diện này sẽ đưa bạn qua quy trình xây dựng giao diện người dùng (frontend) mạnh mẽ cho các Agent được phát triển bằng Agent Development Kit (ADK). Chúng ta sẽ sử dụng AG-UI Protocol làm cầu nối và CopilotKit để xây dựng frontend, tạo nên một hệ thống AI agent hoàn chỉnh, tích hợp liền mạch giữa backend và trải nghiệm người dùng.
ADK sẽ đóng vai trò là xương sống backend cho các AI agent, trong khi CopilotKit cung cấp nền tảng frontend linh hoạt. AG-UI sẽ là giao thức thiết yếu, tạo cầu nối cho phép frontend giao tiếp hiệu quả với backend. Đây là một hướng dẫn khởi động nhanh, giúp bạn nhanh chóng bắt tay vào xây dựng và trực quan hóa cách các thành phần agent-người dùng phối hợp nhịp nhàng.
Trước khi đi sâu vào chi tiết, chúng tôi xin gửi lời cảm ơn đặc biệt đến Mark Fogle và Syed Fakher vì đã có công xây dựng tích hợp ADK/AG-UI ban đầu. Hãy cùng khám phá những gì chúng ta sẽ đề cập trong bài viết này:
- Tìm hiểu về Agent Development Kit (ADK).
- Thiết lập một agent ADK + AG-UI + CopilotKit bằng CLI.
- Tích hợp agent ADK của bạn với giao thức AG-UI ở phía backend.
- Xây dựng frontend cho agent ADK + AG-UI của bạn bằng CopilotKit.
Đây là bản xem trước về những gì bạn có thể xây dựng khi đưa agent ADK của mình lên frontend bằng AG-UI và CopilotKit:
Mục lục
Agent Development Kit (ADK) là gì?
Agent Development Kit (ADK) là một framework mã nguồn mở mạnh mẽ, được thiết kế để đơn giản hóa quá trình xây dựng các AI agent phức tạp và sẵn sàng triển khai vào sản xuất. ADK cung cấp cho các AI agent của bạn những khả năng cốt lõi sau ngay từ đầu:
- Lập kế hoạch (Planning): Khả năng suy luận và thực thi theo nhiều bước, cho phép agent xử lý các nhiệm vụ phức tạp đòi hỏi nhiều hành động liên tiếp.
- Sử dụng công cụ (Tool use): Tích hợp liền mạch với các API, dịch vụ và nguồn dữ liệu bên ngoài, mở rộng đáng kể phạm vi hành động và thông tin mà agent có thể truy cập.
- Quản lý trạng thái (State management): Loại bỏ sự cần thiết phải tạo logic chuỗi hoặc theo dõi tiến độ thủ công, giúp việc phát triển và bảo trì agent trở nên dễ dàng hơn.
Với ADK, bạn có thể biến một ý tưởng thành một nguyên mẫu hoạt động chỉ trong vài giờ, đồng thời duy trì sự linh hoạt hoàn toàn để mở rộng và tùy chỉnh AI agent của mình. Nếu bạn muốn tìm hiểu sâu hơn, hãy khám phá tài liệu ADK chính thức.
Bây giờ bạn đã có cái nhìn tổng quan về ADK, hãy cùng tìm hiểu cách sử dụng nó kết hợp với AG-UI và CopilotKit để xây dựng các AI agent full-stack.
Chuẩn Bị Cần Thiết
Để theo dõi hướng dẫn này một cách hiệu quả, bạn cần có kiến thức cơ bản về React hoặc Next.js. Chúng ta cũng sẽ sử dụng các công cụ và tài nguyên sau:
- Python: Một ngôn ngữ lập trình phổ biến để xây dựng các AI agent với các framework agent. Hãy đảm bảo rằng Python đã được cài đặt trên máy tính của bạn.
- AG-UI Protocol: Giao thức Tương tác Người dùng Agent (AG-UI), được phát triển bởi CopilotKit, là một giao thức mã nguồn mở, nhẹ, dựa trên sự kiện, tạo điều kiện cho các tương tác phong phú, thời gian thực giữa frontend và backend AI agent của bạn. Bạn có thể xem thêm tại AG-UI GitHub.
- Gemini API Key: Một khóa API cần thiết để thực hiện các tác vụ khác nhau bằng cách sử dụng các mô hình Gemini cho ADK agents.
- CopilotKit: Một framework copilot mã nguồn mở để xây dựng các chatbot AI tùy chỉnh, các AI agent trong ứng dụng và các khu vực văn bản. Khám phá thêm tại CopilotKit GitHub.
Thiết Lập Agent ADK Full-stack Bằng CLI
Trong phần này, bạn sẽ học cách thiết lập một AI agent ADK full-stack chỉ bằng một lệnh CLI đơn giản. Lệnh này sẽ thiết lập cả backend sử dụng giao thức AG-UI và frontend sử dụng CopilotKit. Quy trình này được trình bày chi tiết trong hướng dẫn Bắt đầu trong tài liệu CopilotKit.
Hãy bắt đầu nào.
Bước 1: Chạy lệnh CLI
Nếu bạn chưa có ADK agent, bạn có thể nhanh chóng thiết lập một cái bằng cách chạy lệnh CLI dưới đây trong terminal của mình:
npx copilotkit@latest create -f adkSau đó, hãy đặt tên cho dự án của bạn như hình dưới đây:
Bước 2: Cài đặt các Dependencies
Sau khi dự án của bạn được tạo thành công, hãy cài đặt các dependencies bằng trình quản lý gói ưa thích của bạn:
# Sử dụng pnpm (khuyên dùng)
pnpm install
# Sử dụng npm
npm install
# Sử dụng yarn
yarn install
# Sử dụng bun
bun installBước 3: Cấu hình Gemini API Key của bạn
Sau khi cài đặt các dependencies, hãy tạo một tệp `.env` trong thư mục gốc và thêm Gemini API key của bạn:
GOOGLE_API_KEY="your-google-api-key-here”Bước 4: Chạy Development Server
Tiếp theo, khởi động development server bằng trình quản lý gói ưa thích của bạn:
# Sử dụng pnpm
pnpm dev
# Sử dụng npm
npm run dev
# Sử dụng yarn
yarn dev
# Sử dụng bun
bun run devKhi development server đang chạy, hãy truy cập http://localhost:3000/ và bạn sẽ thấy agent ADK + AG-UI + CopilotKit của mình hoạt động.
Chúc mừng! Bạn đã tích hợp thành công chatbot ADK Agent vào ứng dụng của mình. Để bắt đầu, hãy thử các công cụ được cung cấp để đặt chủ đề trang web, viết tục ngữ hoặc nhận thông tin thời tiết, như hình dưới đây:
ADK Agent của bạn Tích hợp với Giao thức AG-UI ở Backend như thế nào?
Trong phần này, bạn sẽ tìm hiểu cách agent ADK của bạn được tích hợp với giao thức AG-UI và được hiển thị ra frontend dưới dạng ứng dụng ASGI.
Hãy cùng đi sâu vào chi tiết.
Bước 1: Cài đặt gói AG-UI
Để bắt đầu, hãy cài đặt gói AG-UI ADK cùng với các dependencies cần thiết khác, như FastAPI và uvicorn, để sử dụng chúng để chạy agent ADK của bạn:
pip install ag_ui_adk uvicorn fastapiBước 2: Cấu hình ADK Agent của bạn
Sau khi bạn đã cài đặt gói AG-UI, hãy cấu hình agent ADK của mình bằng cách định nghĩa tên agent, chỉ định Gemini 2.5 Flash làm Mô hình Ngôn ngữ Lớn (LLM) và định nghĩa các hướng dẫn của agent, như được hiển thị dưới đây trong tệp `./agent.py`:
# Import core ADK (Agent Development Kit) components
from google.adk.agents import LlmAgent
from google.adk.agents.callback_context import CallbackContext
from google.adk.sessions import InMemorySessionService, Session
from google.adk.runners import Runner
from google.adk.events import Event, EventActions
from google.adk.tools import FunctionTool, ToolContext
from google.genai.types import Content, Part, FunctionDeclaration
from google.adk.models import LlmResponse, LlmRequest
from google.genai import types
# ... (Các đoạn mã khác liên quan đến cấu hình agent)
proverbs_agent = LlmAgent(
# Định nghĩa tên agent để nhận dạng
name="ProverbsAgent",
# Chỉ định mô hình LLM để sử dụng (Gemini 2.5 Flash)
model="gemini-2.5-flash",
# Bước 10c: Định nghĩa các hướng dẫn và hành vi cốt lõi của agent
instruction=f"""
Khi người dùng yêu cầu bạn làm bất cứ điều gì liên quan đến tục ngữ, bạn PHẢI sử dụng công cụ set_proverbs.
CÁC QUY TẮC QUAN TRỌNG VỀ TỤC NGỮ VÀ CÔNG CỤ SET_PROVERBS:
1. Luôn sử dụng công cụ set_proverbs cho bất kỳ yêu cầu nào liên quan đến tục ngữ
2. Luôn truyền DANH SÁCH HOÀN CHỈNH các tục ngữ cho công cụ set_proverbs. Nếu danh sách có 5 tục ngữ và bạn xóa một cái, bạn phải truyền danh sách đầy đủ gồm 4 tục ngữ còn lại.
3. Bạn có thể sử dụng các tục ngữ hiện có nếu một cái có liên quan đến yêu cầu của người dùng, nhưng bạn cũng có thể tạo tục ngữ mới theo yêu cầu.
4. Sáng tạo và hữu ích trong việc tạo ra các tục ngữ hoàn chỉnh, thực tế
5. Sau khi sử dụng công cụ, cung cấp một bản tóm tắt ngắn gọn về những gì bạn đã tạo, xóa hoặc thay đổi.
Ví dụ về thời điểm sử dụng công cụ set_proverbs:
- "Thêm một tục ngữ về xà phòng" → Sử dụng công cụ với một mảng chứa danh sách tục ngữ hiện có với tục ngữ mới về xà phòng ở cuối.
- "Xóa tục ngữ đầu tiên" → Sử dụng công cụ với một mảng chứa tất cả các tục ngữ hiện có trừ tục ngữ đầu tiên.
- "Thay đổi bất kỳ tục ngữ nào về mèo để đề cập rằng chúng có 18 mạng." → Nếu không có tục ngữ nào đề cập đến mèo, không sử dụng công cụ. Nếu có một hoặc nhiều tục ngữ đề cập đến mèo, hãy thay đổi chúng để đề cập đến việc mèo có 18 mạng, và sử dụng công cụ với một mảng tất cả các tục ngữ, bao gồm những cái đã thay đổi và những cái không yêu cầu thay đổi.
Hãy cố gắng hết sức để đảm bảo các tục ngữ có ý nghĩa hợp lý.
CÁC QUY TẮC QUAN TRỌNG VỀ THỜI TIẾT VÀ CÔNG CỤ GET_WEATHER:
1. Chỉ gọi công cụ get_weather nếu người dùng yêu cầu bạn lấy thời tiết ở một địa điểm cụ thể.
2. Nếu người dùng không chỉ định địa điểm, bạn có thể sử dụng địa điểm "Everywhere ever in the whole wide world"
Ví dụ về thời điểm sử dụng công cụ get_weather:
- "Thời tiết hôm nay ở Tokyo thế nào?" → Sử dụng công cụ với địa điểm "Tokyo"
- "Thời tiết hiện tại thế nào?" → Sử dụng địa điểm "Everywhere ever in the whole wide world"
- "Trời có mưa ở London không?" → Sử dụng công cụ với địa điểm "London"
""",
# Đăng ký các công cụ có sẵn mà agent có thể sử dụng
tools=[set_proverbs, get_weather],
# Đăng ký các hàm callback cho các sự kiện vòng đời khác nhau
before_agent_callback=on_before_agent, # Chạy trước khi xử lý bắt đầu
before_model_callback=before_model_modifier, # Chạy trước khi gọi LLM
after_model_callback=simple_after_model_modifier # Chạy sau khi LLM phản hồi
)Bước 3: Tạo Instance Agent Middleware ADK
Sau khi cấu hình agent ADK của bạn, hãy tạo một instance agent middleware ADK bao bọc agent ADK của bạn để tích hợp nó với giao thức AG-UI, như được hiển thị dưới đây trong tệp `./agent.py`:
# Import ADK middleware components from AG-UI
from ag_ui_adk import ADKAgent
# ...
adk_proverbs_agent = ADKAgent(
adk_agent=proverbs_agent, # Agent ADK của bạn
app_name="proverbs_app", # Mã định danh ứng dụng
user_id="demo_user", # Mã định danh người dùng để quản lý phiên
session_timeout_seconds=3600, # Phiên hết hạn sau 1 giờ không hoạt động
use_in_memory_services=True # Sử dụng dịch vụ dựa trên bộ nhớ (tốt cho các bản demo)
)Bước 4: Cấu hình FastAPI Endpoint
Khi bạn đã tạo một instance agent middleware ADK, hãy cấu hình một FastAPI endpoint hiển thị agent ADK được bao bọc bởi AG-UI của bạn ra frontend:
# FastAPI cho framework web
from fastapi import FastAPI
# AG-UI ADK imports cho chức năng agent
from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint
# Tạo instance ứng dụng FastAPI
app = FastAPI(title="ADK Middleware Proverbs Agent")
# Thêm endpoint ADK vào ứng dụng FastAPI
add_adk_fastapi_endpoint(app, adk_proverbs_agent, path="/")
# Khối thực thi chính
if __name__ == "__main__":
import os
import uvicorn
# Kiểm tra biến môi trường bắt buộc
if not os.getenv("GOOGLE_API_KEY"):
print("⚠️ Cảnh báo: Biến môi trường GOOGLE_API_KEY chưa được đặt!")
print(" Đặt nó với: export GOOGLE_API_KEY='your-key-here'")
print(" Lấy khóa từ: https://makersuite.google.com/app/apikey")
print()
# Lấy cổng từ môi trường hoặc mặc định là 8000
port = int(os.getenv("PORT", 8000))
# Chạy ứng dụng FastAPI với uvicorn server
uvicorn.run(app, host="0.0.0.0", port=port)Chúc mừng! Bạn đã tích hợp thành công ADK Agent và giao thức AG-UI, và nó hiện có sẵn tại endpoint http://localhost:8000 (hoặc cổng đã chỉ định). Bây giờ, hãy xem cách thêm frontend vào agent ADK được bao bọc bởi AG-UI của bạn.
Xây Dựng Frontend cho ADK + AG-UI Agent của bạn bằng CopilotKit
Trong phần này, bạn sẽ tìm hiểu cách thêm frontend vào agent ADK + AG-UI của mình bằng CopilotKit, một framework có thể chạy ở bất cứ đâu React chạy.
Hãy bắt đầu.
Bước 1: Cài đặt các gói CopilotKit
Để bắt đầu, hãy cài đặt các gói mới nhất cho CopilotKit vào frontend của bạn:
npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtimeBước 2: Thiết lập Copilot Runtime Instance
Sau khi bạn đã cài đặt các gói CopilotKit, hãy thiết lập Copilot runtime instance với một HttpAgent instance trong tuyến API `/api/copilotkit`, cho phép frontend của bạn thực hiện các yêu cầu HTTP đến backend:
import {
CopilotRuntime, // Runtime chính quản lý giao tiếp agent
ExperimentalEmptyAdapter, // Service adapter cho thiết lập agent đơn lẻ
copilotRuntimeNextJSAppRouterEndpoint, // Trình xử lý endpoint của Next.js App Router
} from "@copilotkit/runtime";
// Import AG-UI client để kết nối với ADK agents
import { HttpAgent } from "@ag-ui/client";
// Import các kiểu Next.js cho xử lý yêu cầu
import { NextRequest } from "next/server";
// Tạo một service adapter cho CopilotKit runtime
const serviceAdapter = new ExperimentalEmptyAdapter();
// Tạo instance CopilotRuntime chính quản lý giao tiếp giữa frontend và backend agents
const runtime = new CopilotRuntime({
// Định nghĩa các agent sẽ có sẵn cho frontend
agents: {
// Cấu hình kết nối ADK agent
my_agent: new HttpAgent({
// Chỉ định URL nơi ADK agent đang chạy
url: "http://localhost:8000/",
}),
},
});
// Export trình xử lý POST cho tuyến API
export const POST = async (req: NextRequest) => {
// Tạo trình xử lý yêu cầu bằng cách sử dụng helper của CopilotKit cho Next.js
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime, // Instance CopilotRuntime mà chúng ta đã cấu hình
serviceAdapter, // Service adapter cho phối hợp agent
endpoint: "/api/copilotkit", // Đường dẫn endpoint (khớp với vị trí tệp này)
});
return handleRequest(req);
};Bước 3: Thiết lập CopilotKit Provider
Sau khi thiết lập Copilot Runtime instance, hãy thiết lập thành phần CopilotKit provider quản lý các phiên ADK agent của bạn. Để thiết lập CopilotKit Provider, thành phần <CopilotKit> phải bao bọc các phần của ứng dụng của bạn có sử dụng Copilot. Đối với hầu hết các trường hợp sử dụng, việc bao bọc CopilotKit provider xung quanh toàn bộ ứng dụng là phù hợp, ví dụ, trong tệp layout.tsx của bạn:
// Bước 1: Import các kiểu và thành phần cần thiết từ Next.js và CopilotKit
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
// Bước 2: Định nghĩa metadata cho ứng dụng, được Next.js sử dụng cho SEO và tiêu đề trang
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
// Bước 3: Định nghĩa thành phần RootLayout, bao bọc toàn bộ ứng dụng
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Bước 4: Trả về cấu trúc JSX cho layout
return (
<html lang="en">
<body className={"antialiased"}>
{/* Bước 5: Bao bọc các thành phần con bằng CopilotKit provider để kích hoạt chức năng CopilotKit */}
<CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
{children}
</CopilotKit>
</body>
</html>
);
}Bước 4: Thiết lập Copilot UI Component
Khi bạn đã thiết lập CopilotKit Provider, hãy thiết lập một Copilot UI component cho phép bạn tương tác với ADK agent của mình. CopilotKit đi kèm với một số thành phần chat tích hợp, bao gồm CopilotPopup, CopilotSidebar và CopilotChat. Để thiết lập một Copilot UI component, hãy định nghĩa nó cùng với các thành phần trang cốt lõi của bạn, ví dụ, trong tệp page.tsx của bạn:
"use client";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { useState } from "react";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
// ... (Các đoạn mã khác liên quan đến giao diện)
return (
<main style={{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties}>
<YourMainContent themeColor={themeColor} />
<CopilotSidebar
clickOutsideToClose={false}
defaultOpen={true}
labels={{
title: "Popup Assistant",
initial: "👋 Xin chào! Bạn đang trò chuyện với một agent. Agent này đi kèm với một số công cụ để bạn bắt đầu.\n\nVí dụ, bạn có thể thử:\n- **Công cụ Frontend**: \"Đặt chủ đề thành màu cam\"\n- **Shared State**: \"Viết một tục ngữ về AI\"\n- **Generative UI**: \"Lấy thời tiết ở SF\"\n\nKhi bạn tương tác với agent, bạn sẽ thấy giao diện người dùng cập nhật theo thời gian thực để phản ánh **trạng thái**, **các cuộc gọi công cụ** và **tiến trình** của agent."
}}
/>
</main>
);
}Bước 5: Đồng bộ hóa Trạng thái ADK Agent với Frontend
Sau khi thiết lập một Copilot UI component, hãy đồng bộ hóa trạng thái ADK agent của bạn với frontend bằng cách sử dụng CopilotKit hooks. Để đồng bộ hóa trạng thái ADK agent với frontend, hãy sử dụng CopilotKit useCoAgent hook, cho phép bạn chia sẻ trạng thái hai chiều giữa ứng dụng của mình và agent:
"use client";
import { useCoAgent } from "@copilotkit/react-core";
// Trạng thái của agent, đảm bảo điều này phù hợp với trạng thái của agent của bạn.
type AgentState = {
proverbs: string[];
}
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state
const { state, setState } = useCoAgent<AgentState>({
name: "my_agent",
initialState: {
proverbs: [
"CopilotKit có thể mới, nhưng nó là điều tốt nhất kể từ khi có bánh mì cắt lát.",
],
},
})
// ... (Các đoạn mã khác liên quan đến logic component)
return (
// ... (JSX của component)
)Để hiển thị trạng thái, tiến trình, đầu ra hoặc các cuộc gọi công cụ của agent của bạn với các thành phần UI tùy chỉnh theo thời gian thực, bạn có thể sử dụng Generative UI dựa trên công cụ:
"use client";
import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
// ... (Các đoạn mã khác)
function YourMainContent({ themeColor }: { themeColor: string }) {
// ...
//🪁 Generative UI: https://docs.copilotkit.ai/coagents/generative-ui
useCopilotAction({
name: "get_weather",
description: "Lấy thời tiết cho một địa điểm cụ thể.",
available: "disabled",
parameters: [
{ name: "location", type: "string", required: true },
],
render: ({ args }) => {
return <WeatherCard location={args.location} themeColor={themeColor} />
},
});
return ( /* ... JSX của component ... */ )Sau đó, hãy thử yêu cầu agent lấy thời tiết cho một địa điểm. Bạn sẽ thấy thành phần UI tùy chỉnh mà chúng ta đã thêm để hiển thị cuộc gọi công cụ get_weather và hiển thị các đối số đã được truyền cho công cụ:
Bước 6: Truyền tải phản hồi của ADK Agent ở Frontend
Sau khi bạn đã đồng bộ hóa trạng thái ADK agent của mình với frontend, hãy truyền tải các phản hồi hoặc kết quả của ADK agent ở frontend. Để truyền tải các phản hồi hoặc kết quả của ADK agent ở frontend, hãy truyền các giá trị trường trạng thái của agent cho các thành phần frontend, như được hiển thị dưới đây:
"use client";
import { useCoAgent } from "@copilotkit/react-core";
// Trạng thái của agent, đảm bảo điều này phù hợp với trạng thái của agent của bạn.
type AgentState = {
proverbs: string[];
}
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state
const { state, setState } = useCoAgent<AgentState>({
name: "my_agent",
initialState: {
proverbs: [
"CopilotKit có thể mới, nhưng nó là điều tốt nhất kể từ khi có bánh mì cắt lát.",
],
},
})
// ... (Các đoạn mã khác liên quan đến logic component)
return (
<div
style={{ backgroundColor: themeColor }}
className="h-screen w-screen flex justify-center items-center flex-col transition-colors duration-300"
>
<div className="bg-white/20 backdrop-blur-md p-8 rounded-2xl shadow-xl max-w-2xl w-full">
<h1 className="text-4xl font-bold text-white mb-2 text-center">Proverbs</h1>
<p className="text-gray-200 text-center italic mb-6">Đây là một trang demo, nhưng nó có thể là bất cứ điều gì bạn muốn! 🪁</p>
<hr className="border-white/20 my-6" />
<div className="flex flex-col gap-3">
{state.proverbs?.map((proverb, index) => (
<div
key={index}
className="bg-white/15 p-4 rounded-xl text-white relative group hover:bg-white/20 transition-all"
>
<p className="pr-8">{proverb}</p>
<button
onClick={() => setState({
...state,
proverbs: state.proverbs?.filter((_, i) => i !== index),
})}
className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity
bg-red-500 hover:bg-red-600 text-white rounded-full h-6 w-6 flex items-center justify-center"
>
✕
</button>
</div>
))}
</div>
{state.proverbs?.length === 0 && <p className="text-center text-white/80 italic my-8">
Chưa có tục ngữ nào. Hãy yêu cầu trợ lý thêm một số!
</p>}
</div>
</div>
);
}Nếu bạn truy vấn ADK agent của mình, bạn sẽ thấy phản hồi hoặc kết quả của agent được truyền tải trong UI, như hình dưới đây:
Kết Luận
Trong hướng dẫn này, chúng ta đã cùng nhau khám phá các bước để xây dựng một giao diện người dùng (frontend) tương tác cho ADK agent của bạn, sử dụng sức mạnh của giao thức AG-UI và framework CopilotKit. Bạn đã học cách thiết lập một agent full-stack, tích hợp backend thông qua AG-UI và phát triển frontend linh hoạt để tương tác với agent của mình.
Mặc dù chúng ta chỉ mới chạm đến một vài tính năng, nhưng đây chỉ là bề nổi của vô số trường hợp sử dụng mà CopilotKit mang lại. Từ việc xây dựng các chatbot AI tương tác đến phát triển các giải pháp dựa trên agent phức tạp, CopilotKit cho phép bạn bổ sung hàng loạt khả năng AI hữu ích vào sản phẩm của mình chỉ trong vài phút.
Chúng tôi hy vọng hướng dẫn này sẽ giúp bạn dễ dàng hơn trong việc tích hợp các Copilot được hỗ trợ bởi AI vào ứng dụng hiện có của mình, mở ra cánh cửa cho những trải nghiệm người dùng độc đáo và thông minh hơn.
Hãy theo dõi CopilotKit trên Twitter để cập nhật những thông tin mới nhất và tham gia cộng đồng Discord nếu bạn muốn xây dựng những điều thú vị cùng chúng tôi.
