Giới Thiệu

Các agent AI đang dần trở nên gần gũi với các ứng dụng thực tế, nhưng nhiều lập trình viên vẫn cảm thấy việc xây dựng chúng là một thách thức phức tạp. Trong bài viết này, chúng ta sẽ cùng nhau xây dựng hai agent thực tiễn: Post Generator - tạo bài viết cho LinkedIn/X sử dụng tìm kiếm web trực tiếp và Stack Analyzer - phân tích các kho GitHub và tạo báo cáo có cấu trúc.

Chúng ta sẽ sử dụng Next.js cho frontend, FastAPI cho backend, CopilotKit, LangGraph workflows, và Google Gemini. Bạn sẽ tìm thấy kiến trúc, các khái niệm, cách sử dụng prompts, và các thông tin thực tiễn hữu ích.

Hãy bắt đầu nào!

1. Chúng Ta Đang Xây Dựng Gì?

Chúng ta sẽ xây dựng hai agent thực tiễn bằng cách thiết lập full-stack:

✅ Post Generator Agent: tạo các bài viết trên LinkedIn/X dựa trên kết quả tìm kiếm Google trực tiếp.
✅ Stack Analyzer Agent: phân tích một kho GitHub công khai (metadata, README, manifest mã) và suy luận về ngăn xếp công nghệ của nó.

Sơ Đồ Gọi

Dưới đây là sơ đồ gọi đơn giản của quy trình khi người dùng tạo một bài viết:

Copy

[Người dùng nhập prompt]
     ↓
Giao diện Next.js (CopilotChat)
     ↓ (POST /api/copilotkit → GraphQL)
Đường dẫn API Next.js (copilotkit)
     ↓ (chuyển tiếp)
Backend FastAPI (/copilotkit)
     ↓ (workflow LangGraph)
Các nút trong đồ thị Post Generator
     ↓ (gọi → Google Gemini + tìm kiếm web)
Phản hồi streaming & nhật ký công cụ
     ↓
Giao diện frontend hiển thị chat + nhật ký công cụ + bài viết cuối cùng

2. Công Nghệ & Kiến Trúc

Chúng ta sẽ sử dụng các công nghệ chính sau đây để xây dựng các agent:

Next.js 15: framework frontend với TypeScript
CopilotKit SDK: nhúng các agent vào UI (@copilotkit/react-core, @copilotkit/runtime, @copilotkit/react-ui)
FastAPI & Uvicorn: framework backend để phục vụ các agent như API
LangGraph (StateGraphs): để xây dựng workflows cho agent có trạng thái
Google Gemini qua google-genai (SDK chính thức): LLM cho lý luận & sinh văn bản
LangChain’s Google adapter: để kết nối Gemini vào workflows của LangChain
Pydantic: cho đầu ra JSON có cấu trúc

Cấu Trúc Dự Án

Dưới đây là cách mà thư mục dự án sẽ được tổ chức:

Copy

.
├── assets/
├── frontend/                ← Ứng dụng Next.js 15 (UI + API routes)
│   ├── app/
│   │   ├── layout.tsx       ← Bọc ứng dụng với `<CopilotKit>`
│   │   ├── post-generator/  ← Đường dẫn UI cho Post Generator
│   │   ├── stack-analyzer/  ← Đường dẫn UI cho Stack Analyzer
│   │   └── api/             ← Đường dẫn API Next.js được UI sử dụng
│   │   ...
│   ├── contexts/LayoutContext.tsx
│   ├── wrapper.tsx            ← Bọc nhà cung cấp CopilotKit
│   ├── components/          ← Các thành phần UI dùng chung
│   │   ...
├── agent/                   ← FastAPI + LangGraph “agents” (Python)
│   ├── main.py              ← Đăng ký các agent và cung cấp chúng qua FastAPI
│   ├── posts_generator_agent.py  ← Workflow cho agent tạo nội dung
│   ├── stack_agent.py       ← Workflow cho agent phân tích kho
│   ├── prompts.py           ← Các mẫu prompt dùng chung
│   ├── agent.py             ← Các lớp agent chính và các trợ giúp
│   ...
└── README.md                ← Tổng quan dự án và hướng dẫn thiết lập

Bạn có thể khám phá mã nguồn trên GitHub và triển khai tại copilot-kit-deepmind.vercel.app.

3. Frontend

Bước 1: Nhà Cung Cấp CopilotKit & Bố Cục

Cài đặt các gói CopilotKit cần thiết:

Copy

pnpm install copilotkit @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @copilotkit/runtime-client-gql

Bọc ứng dụng của bạn trong thành phần <CopilotKit> trong tệp layout.tsx:

javascript Copy

import "./globals.css"
import { LayoutProvider } from "./contexts/LayoutContext"
import Wrapper from "./wrapper"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <LayoutProvider>
        <Wrapper>
          <body>{children}</body>
        </Wrapper>
      </LayoutProvider>
    </html>
  )
}

Bước 2: Các Đường Dẫn API Next.js: Proxy đến FastAPI

Đường dẫn API CopilotKit tại app/api/copilotkit/route.ts chỉ là proxy chuyển tiếp tất cả các cuộc gọi agent/graph đến backend FastAPI:

javascript Copy

import { CopilotRuntime, copilotRuntimeNextJSAppRouterEndpoint, GoogleGenerativeAIAdapter } from "@copilotkit/runtime";
import { NextRequest } from "next/server";

const serviceAdapter = new GoogleGenerativeAIAdapter();
const runtime = new CopilotRuntime({
  remoteEndpoints: [{ url: process.env.NEXT_PUBLIC_LANGGRAPH_URL || "http://localhost:8000/copilotkit" }],
});

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });
  return handleRequest(req);
};

Bước 3: Tự Động Chuyển Hướng đến Post Generator

Chuyển hướng đến đường dẫn /post-generator khi ai đó vào trang chủ / trong frontend/app/page.tsx.

javascript Copy

import { useEffect } from "react";
import { useRouter } from "next/navigation";

export default function GoogleDeepMindChatUI() {
  const router = useRouter();
  useEffect(() => {
    router.push("/post-generator");
  }, [router]);
  return (
    <></>
  )
}

Bước 4: Giao Diện Agent Tạo Bài Viết

Tạo giao diện frontend cho Post Generator:

javascript Copy

import { CopilotChat } from "@copilotkit/react-ui";

return (
  <div className="…">
    <CopilotChat className="h-full p-2" />
  </div>
)

Bước 5: Giao Diện Agent Phân Tích Ngăn Xếp

Trang phân tích ngăn xếp (frontend/app/stack-analyzer/page.tsx) cũng tương tự như trước, kết nối với stack_analysis_agent và hiển thị các thẻ phân tích.

4. Dịch Vụ Backend Agent (FastAPI + CopilotKit SDK)

Tại thư mục /agent, có một server FastAPI phục vụ các agent dựa trên LangGraph:

python Copy

from fastapi import FastAPI
import uvicorn
from copilotkit import CopilotKitSDK

app = FastAPI()

sdk = CopilotKitSDK(
    agents=[...]
)

add_fastapi_endpoint(app, sdk, "/copilotkit")

Khởi Chạy Backend

Chạy các lệnh sau trong thư mục agent:

Copy

cd agent
poetry install
poetry run python main.py

5. Quy Trình Agent (LangGraph StateGraphs)

Mỗi agent được định nghĩa như một state machine trong LangGraph với các nút (nodes) kết nối với nhau.

6. Prompts & Công Cụ

Các prompts định nghĩa cách mà mô hình sẽ hành xử. Chúng ta sẽ sử dụng các mẫu prompt cho Post Generator và Stack Analyzer.

Mẫu Prompt cho Tạo Bài Viết

python Copy

system_prompt = """Bạn có quyền truy cập vào công cụ google_search..."""

7. Dòng Chảy Hoàn Chỉnh

Sơ đồ dòng chảy dữ liệu khi tích hợp tất cả các phần.

8. Demo Cuối Cùng

Chạy ứng dụng và kiểm tra đầu ra từ cả hai agent. Bạn sẽ thấy chúng hoạt động hiệu quả và tạo ra các đầu ra chính xác.

Kết Luận

Hy vọng bạn tìm thấy bài viết này hữu ích và có thể áp dụng để xây dựng các ứng dụng agent của riêng bạn. Hãy chia sẻ trải nghiệm của bạn trong phần bình luận bên dưới!

| Bạn có thể xem thêm công việc của tôi tại anmolbaranwal.com. Cảm ơn bạn đã đọc! 🥰 |

Xây Dựng Ứng Dụng Agent Fullstack với Gemini và CopilotKit

Giới Thiệu

1. Chúng Ta Đang Xây Dựng Gì?

Sơ Đồ Gọi

2. Công Nghệ & Kiến Trúc

Cấu Trúc Dự Án

3. Frontend

Bước 1: Nhà Cung Cấp CopilotKit & Bố Cục

Bước 2: Các Đường Dẫn API Next.js: Proxy đến FastAPI

Bước 3: Tự Động Chuyển Hướng đến Post Generator

Bước 4: Giao Diện Agent Tạo Bài Viết

Bước 5: Giao Diện Agent Phân Tích Ngăn Xếp

4. Dịch Vụ Backend Agent (FastAPI + CopilotKit SDK)

Khởi Chạy Backend

5. Quy Trình Agent (LangGraph StateGraphs)

6. Prompts & Công Cụ

Mẫu Prompt cho Tạo Bài Viết

7. Dòng Chảy Hoàn Chỉnh

8. Demo Cuối Cùng

Kết Luận

Bình luận