CopilotKit：Xây dựng SDK hàng đầu cho AI Agent toàn diện, UI sinh và ứng dụng trò chuyện
CopilotKit：Xây dựng SDK hàng đầu cho AI Agent toàn diện, UI sinh và ứng dụng trò chuyện
Tổng quan về bối cảnh
CopilotKit là một khung mã nguồn mở được thiết kế đặc biệt để xây dựng AI Copilot và ứng dụng gốc của Agent, với hơn 28.9k sao trên GitHub và được hơn 100,000 nhà phát triển sử dụng. Giá trị cốt lõi của khung này là tích hợp sâu sắc AI Agent với giao diện người dùng, cho phép Agent kiểm soát UI theo thời gian thực, truyền đạt thông tin ngữ cảnh và động lực hóa các thành phần giao diện thông qua UI sinh.
Phát hiện cốt lõi
1. Thiết kế kiến trúc và chức năng cốt lõi
CopilotKit áp dụng thiết kế kiến trúc ba lớp, bao gồm lớp thành phần front-end, lớp runtime CopilotRuntime và lớp kết nối Agent.
Lớp thành phần front-end cung cấp một phổ hoàn chỉnh từ UI hoàn toàn không có đầu (Headless) đến các thành phần tùy chỉnh được xây dựng sẵn, cho phép các nhà phát triển linh hoạt lựa chọn theo nhu cầu. CopilotRuntime là động cơ điều phối backend, chịu trách nhiệm xử lý các yêu cầu từ khách hàng front-end, quản lý các cuộc gọi LLM và tương tác với Agent. Lớp kết nối Agent kết nối bất kỳ khung Agent nào thông qua giao thức AG-UI, bao gồm LangGraph, CrewAI, LlamaIndex, v.v.
Các tính năng cốt lõi của CopilotKit bao gồm UI sinh (Generative UI), cho phép Agent động lực hóa các thành phần UI theo thời gian thực; trạng thái chia sẻ (Shared State), thực hiện đồng bộ trạng thái hai chiều giữa front-end và Agent; và Human-in-the-Loop (hợp tác giữa người và máy), hỗ trợ Agent yêu cầu đầu vào hoặc phê duyệt từ con người trong quá trình thực hiện. Những tính năng này giúp việc xây dựng các ứng dụng AI thực sự tương tác trở nên khả thi, thay vì chỉ là các hệ thống hỏi đáp đơn giản.
Sơ đồ quy trình làm việc:
2. Giao thức AG-UI: Nền tảng của hệ sinh thái
AG-UI (Giao thức Tương tác Người dùng-Đại lý) là tiêu chuẩn giao thức mở, nhẹ, dựa trên sự kiện do nhóm CopilotKit phát hành, nhằm chuẩn hóa cách thức giao tiếp giữa AI Agent và người dùng trong các ứng dụng. Giao thức này đã được các nhà cung cấp và khung chính như Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, v.v. áp dụng rộng rãi, hình thành một hệ sinh thái ngày càng phát triển.
Giao thức AG-UI giải quyết một vấn đề quan trọng: mô hình giao tiếp truyền thống giữa front-end và back-end (yêu cầu - phản hồi) không thể đáp ứng nhu cầu phức tạp của các ứng dụng Agent. Agent cần truyền tải trạng thái cập nhật theo thời gian thực, xử lý các gián đoạn và quy trình phê duyệt, đồng bộ hóa trạng thái UI và Agent, tất cả đều cần một cơ chế giao tiếp linh hoạt hơn. AG-UI đã thực hiện những chức năng này thông qua luồng sự kiện (Event Streaming), hỗ trợ luồng văn bản theo thời gian thực, gọi công cụ, đồng bộ trạng thái và sự kiện tùy chỉnh.
Hiện tại, lĩnh vực giao thức Agent đang có ba trụ cột chính: AG-UI tập trung vào lớp tương tác giữa Agent và người dùng, MCP (Giao thức Ngữ cảnh Mô hình) chịu trách nhiệm kết nối giữa Agent với công cụ và dữ liệu, trong khi A2A (Agent-to-Agent) xử lý giao tiếp phối hợp giữa các Agent. Đáng chú ý, AG-UI đã thực hiện tích hợp bắt tay với giao thức A2A và hoàn toàn hỗ trợ tiêu chuẩn A2UI của Google cho việc động lực hóa UI.Tích hợp CopilotKit với LangGraph là một trong những trường hợp sử dụng trưởng thành nhất. Thông qua cấu hình đơn giản, các nhà phát triển có thể kết nối đại lý LangGraph với giao diện người dùng của CopilotKit, thực hiện chia sẻ trạng thái và phản hồi theo thời gian thực. Quá trình tích hợp thường bao gồm việc sử dụng hook useCoAgent để kết nối đại lý, phát tín hiệu cập nhật trạng thái từ phía đại lý thông qua hàm copilotkitemitstate, và sử dụng useCopilotAction để định nghĩa các điểm ngắt trong sự hợp tác giữa người và máy.
Đối với các nhà phát triển CrewAI, CopilotKit cũng cung cấp giải pháp tích hợp sẵn sàng sử dụng. Thông qua giao thức AG-UI, các nhà phát triển có thể làm cho bất kỳ đại lý CrewAI nào trở thành ứng dụng giao diện người dùng hỗ trợ tương tác theo thời gian thực. Ngoài LangGraph và CrewAI, giao thức AG-UI còn hỗ trợ nhiều khung khác như Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex, tạo ra khả năng tương tác đa khung thực sự.
4. Phân tích so sánh với các khung tương tự
So với Vercel AI SDK, định vị của CopilotKit có sự khác biệt rõ rệt. Vercel AI SDK chủ yếu tập trung vào việc đơn giản hóa việc truyền tải văn bản theo dòng trong giao diện trò chuyện, cung cấp hook useChat và các thành phần UI xuất sắc; trong khi CopilotKit nhấn mạnh vào tích hợp đại lý sâu, UI tạo sinh và khả năng hợp tác giữa người và máy.
Mối quan hệ với LangChain thì giống như bổ sung hơn là cạnh tranh. LangChain tập trung vào việc xây dựng "bộ não" của đại lý (logic và quy trình làm việc), trong khi CopilotKit cung cấp "gương mặt, giọng nói và đôi tay" của bộ não đó - tức là giao diện tương tác với ứng dụng. Các nhà phát triển thường sử dụng LangChain/LangGraph để định nghĩa logic của đại lý, sau đó xây dựng lớp tương tác người dùng thông qua CopilotKit.
5. Các trường hợp ứng dụng điển hình
Các trường hợp sử dụng điển hình của CopilotKit bao gồm nhiều lĩnh vực. SaaS Copilot là trường hợp ứng dụng phổ biến nhất, trợ lý thông minh có thể hướng dẫn người dùng hoàn thành các quy trình làm việc phức tạp, cung cấp sự trợ giúp có nhận thức về ngữ cảnh. Co-creation Copilot nhấn mạnh vào sự hợp tác giữa người và máy, AI và người dùng cùng nhau tạo ra nội dung, nâng cao đáng kể năng suất. Điền biểu mẫu theo cuộc hội thoại chuyển đổi các biểu mẫu phức tạp thành tương tác hội thoại tự nhiên, người dùng có thể hoàn thành việc nhập dữ liệu phức tạp chỉ qua trò chuyện. Ứng dụng đại lý nghiên cứu như ứng dụng canvas nghiên cứu được trình diễn chính thức, cho thấy cách tích hợp sâu đại lý LangGraph với giao diện người dùng, thực hiện quy trình tạo dàn bài nghiên cứu, viết chương và phê duyệt của con người.
Hướng dẫn nhanh: Ví dụ mã
Ví dụ tích hợp cơ bản
Dưới đây là một ví dụ tối thiểu có thể chạy sử dụng CopilotKit với LangGraph:
Giao diện người dùng (Next.js/React):
// app/page.tsx "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css";
export default function Home() { return (
Trợ lý nghiên cứu
); }API định tuyến thời gian chạy:
// app/api/copilotkit/route.ts import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime"; import { NextRequest } from "next/server";const copilotKit = new CopilotRuntime({ remoteEndpoints: [ { url: process.env.LANGGRAPHURL || "http://localhost:8000" }, ], });
const serviceAdapter = new OpenAIAdapter();
export const POST = async (req: NextRequest) => { const { handleRequest } = copilotKit; return handleRequest(req, { serviceAdapter }); };
Ví dụ về trạng thái chia sẻ
// Sử dụng useCoAgent để đồng bộ trạng thái giữa frontend và backend import { useCoAgent } from "@copilotkit/react-core";
function ResearchCanvas() { const { state, setState } = useCoAgent({ name: "researchagent", initialState: { topic: "", outline: [], currentSection: null, }, });
return (
setState({ ...state, topic: e.target.value })} placeholder="Nhập chủ đề nghiên cứu" />
); }
Ví dụ về hợp tác giữa người và máy (Human-in-the-Loop)
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Cần xác nhận của người dùng trước khi phát hành tài liệu", parameters: [ { name: "title", type: "string", description: "Tiêu đề tài liệu" }, { name: "content", type: "string", description: "Nội dung tài liệu" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "Tài liệu đã được phát hành thành công"; } return "Phát hành đã bị hủy"; }, });
return ...; }`
Các ứng dụng điển hình
Trường hợp 1: Trợ lý thông minh SaaS
Tình huống: Một công cụ quản lý dự án cấp doanh nghiệp, tích hợp trợ lý AI giúp người dùng nhanh chóng tạo nhiệm vụ, phân bổ tài nguyên, tạo báo cáo.
Điểm thực hiện:
- Sử dụng chức năng trạng thái chia sẻ của CopilotKit để AI hiểu rõ về chế độ xem dự án hiện tại
- Thông qua UI sinh động để động render các thẻ nhiệm vụ, biểu đồ Gantt và các thành phần khác
- Các nút hợp tác giữa người và máy đảm bảo rằng các thao tác quan trọng (như xóa dự án) cần có sự xác nhận của người dùngNgười dùng có thể thực hiện các thao tác phức tạp chỉ bằng ngôn ngữ tự nhiên, chẳng hạn như "Giúp tôi phân công nhiệm vụ sẽ hết hạn vào tuần tới cho đội ngũ frontend và tạo báo cáo tiến độ".
Trường hợp 2: Trợ lý nghiên cứu AI
Cảnh: Công cụ hỗ trợ nghiên cứu học thuật, giúp các nhà nghiên cứu thu thập tài liệu, tổ chức cấu trúc bài báo, hợp tác viết.
Điểm thực hiện:
- Đại lý LangGraph chịu trách nhiệm tìm kiếm thông tin và suy luận logic
- CopilotKit hiển thị phác thảo nghiên cứu và danh sách tài liệu
- Đồng bộ trạng thái đảm bảo tiến độ nghiên cứu được lưu và hiển thị theo thời gian thực
- Điểm phê duyệt nhắc nhở người dùng xác nhận khi trích dẫn tài liệu bên ngoài
Trường hợp 3: Điền biểu mẫu thông minh
Cảnh: Chuyển đổi biểu mẫu yêu cầu bảo hiểm phức tạp thành tương tác đối thoại.
Điểm thực hiện:
- Đại lý quyết định câu hỏi tiếp theo một cách động dựa trên câu trả lời của người dùng
- Sử dụng render điều kiện để hiển thị các thành phần UI khác nhau dựa trên ngữ cảnh
- Tự động lưu biểu mẫu đã hoàn thành một phần, hỗ trợ tiếp tục từ điểm dừng
- Tóm tắt tất cả thông tin để người dùng xác nhận trước khi gửi
Gợi ý kỹ thuật
Việc thực hiện kỹ thuật của CopilotKit dựa trên ngăn xếp Web hiện đại. Phía trước sử dụng React (cũng hỗ trợ Angular) làm khung UI chính, cung cấp các hook như useAgent và useCoAgent để quản lý trạng thái và tương tác với đại lý. Phía sau chạy thời gian CopilotRuntime như một bộ điều phối trung tâm, xử lý xác thực yêu cầu, gọi LLM và truyền tải phản hồi theo luồng. Giao thức truyền thông sử dụng Server-Sent Events (SSE) để thực hiện việc đẩy luồng thời gian thực từ máy chủ đến khách hàng, đồng thời xử lý yêu cầu của khách hàng qua HTTP POST.
Phiên bản v1.50 mang đến nâng cấp kiến trúc lớn, giới thiệu kiến trúc điểm cuối đơn rõ ràng hơn, khả năng quan sát tốt hơn (telemetry tích hợp sẵn) và tích hợp sâu với CopilotKit Next, đơn giản hóa hơn nữa trải nghiệm phát triển.
