Làm khu rừng AI Agent 3D với Claude API: 7 bước (kèm PDF)

Mục lục

Vibe code mãi cũng chán, nên mình làm một khu rừng cho AI Agent làm việc

Nhiều bạn hỏi mình về chuyện một đội AI Agent tự giao việc cho nhau: có bạn lên kế hoạch, bạn viết code, bạn test, bạn review. Nghe thì hay, nhưng nhìn log toàn chữ thì rất khó hình dung ai đang làm gì, task đang kẹt ở đâu, ai đang rảnh.

Nên mình dựng hẳn một khu rừng 3D chạy ngay trên trình duyệt, nhân vật là những chú gấu Taro trắng tròn dễ thương. Bạn gõ một task, Orion (gấu điều phối ngồi cạnh lửa trại) giao cho Pia lập kế hoạch, Nova nghiên cứu, Rex viết code, Qin test, Ada review. Mỗi bạn đi tới chỗ Orion nhận việc, về bàn làm rồi nói qua bong bóng chat. Nếu Qin hoặc Ada thấy lỗi, task quay về cho Rex sửa.

Ở chế độ Live, mỗi chú gấu là một lần gọi Claude API thật, kết quả bước trước làm bối cảnh cho bước sau. Mình gom toàn bộ cách làm thành một file PDF 19 trang và file source, nhận miễn phí ngay bên dưới (để lại email là có link tải). Không cần cài Node hay Python, chỉ cần máy Windows, trình duyệt Chrome hoặc Edge (và API key nếu muốn chạy Live).

MIỄN PHÍ

Nhận PDF 19 trang + source khu rừng AI Agent

PDF hướng dẫn chi tiết 7 bước và file source (index.html + server.ps1). Để lại email, link tải sẽ hiện ngay và được gửi vào hộp thư của bạn.

Không spam. Huỷ đăng ký bất cứ lúc nào.

Bạn sẽ làm ra cái gì?

Orion (Orchestrator): nhận task, giao việc, nhận kết quả, bàn giao.
Pia (Planner): chia task thành 3-5 bước.
Nova (Researcher): nêu cách tiếp cận, công nghệ, rủi ro.
Rex, Rex2 (Developer): viết code triển khai.
Qin (Tester): nghĩ test case, báo pass hoặc fail.
Ada (Reviewer): review chất lượng, bảo mật.

Hệ thống có 2 chế độ. Giả lập không cần API key, các bạn gấu chỉ “diễn” bằng timer, hợp để chỉnh giao diện. Live · Claude thì mỗi agent gọi Claude thật. Toàn bộ chia làm 3 lớp: cảnh 3D (Three.js), bộ điều phối (JavaScript) và cầu nối AI (server PowerShell giữ API key). Mình đi qua 7 bước dưới đây.

Bước 1: Dựng khung 3D bằng Three.js

Three.js là thư viện vẽ 3D trên trình duyệt. Mình tải nó từ CDN bằng importmap, nên không cần cài gì. Một file index.html là đủ để có scene, camera, ánh sáng và vòng lặp vẽ.

<script type="importmap">
{ "imports": {
  "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
  "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
} }
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

Để nhìn giống tranh vẽ thay vì nhựa bóng, mình dùng MeshToonMaterial với dải sáng tối chỉ 4 bậc, cộng ánh sáng vàng ấm kiểu giờ vàng.

Mẹo: nếu mở lên màn hình trắng, bấm F12, vào tab Console xem dòng đỏ. 9/10 lần là mất mạng nên không tải được Three.js.

Bước 2: Tạo khu rừng, lều và lửa trại

Mọi thứ trong rừng đều dựng từ hình khối cơ bản (cầu, trụ, nón, hộp). Bí quyết là lặp lại có ngẫu nhiên: viết một hàm tạo 1 cái cây, rồi gọi 110 lần với vị trí và kích thước khác nhau. 20% cây được tô vàng kiểu ginkgo cho giống tranh minh hoạ.

for (let i = 0; i < 110; i++) {
  const a = rnd(0, Math.PI * 2), r = rnd(16, 44);   // rải theo vòng tròn quanh bãi
  tree(Math.cos(a) * r, Math.sin(a) * r, rnd(1.0, 1.8));
}

Lều là một tam giác được kéo dài thành lăng trụ bằng ExtrudeGeometry. Lửa trại là 3 hình nón lồng nhau (đỏ, cam, vàng), mỗi khung hình đổi chiều cao bằng hàm sin để nhấp nháy, kèm một PointLight cam cho ánh lửa hắt ra xung quanh. Thêm bướm vàng, mây trôi, tia nắng là có không khí ngay.

Mẹo: thêm chi tiết nhỏ như hoa cam, nấm đỏ chấm trắng, đèn lồng trên cọc. Mấy món này rẻ mà làm cảnh “có hồn” hơn hẳn.

Bước 3: Tạo nhân vật gấu Taro

Đây là phần quyết định độ dễ thương. Công thức của mình: đầu to hơn thân và gần như không có cổ, mắt nhỏ đặt thấp, má hồng, tai tròn, tay chân ngắn. Mỗi bộ phận là một hình cầu kéo giãn theo 3 trục.

Đường viền nâu như nét vẽ tay làm bằng mẹo “inverted hull”: vẽ thêm một bản sao to hơn 7%, tô màu nâu và chỉ hiện mặt sau.

const outMat = new THREE.MeshBasicMaterial({ color: 0x7a5236, side: THREE.BackSide });
function outline(mesh, k = 1.07) {
  const o = new THREE.Mesh(mesh.geometry, outMat);
  o.scale.setScalar(k);
  mesh.add(o);
}

Mẹo: mỗi agent có mảng acc liệt kê phụ kiện (mũ, balo, khăn, máy ảnh, guitar). Muốn thêm một bạn gấu mới chỉ cần thêm một dòng vào AGENT_DEFS với tên, vai trò, màu lông và phụ kiện.

Bước 4: Bộ não điều phối

Phần này không có gì về 3D, chỉ là logic với 3 khái niệm. Danh sách bước (quy trình), trạng thái agent (rảnh, đang đi, đang làm) và bộ lập lịch. Cứ nửa giây, schedule() duyệt các task đang chờ, tìm agent rảnh đúng vai trò rồi giao việc.

const STAGES = [
  { name: 'Planning',       role: 'planner'    },
  { name: 'Research',       role: 'researcher' },
  { name: 'Implementation', role: 'dev'        },
  { name: 'Testing',        role: 'tester'     },
  { name: 'Code review',    role: 'reviewer'   },
];

Có 2 bạn Dev nên 2 task có thể cùng làm Implementation song song, còn các vai khác chỉ có 1 người nên task phải xếp hàng. Bạn nhìn thấy “nút cổ chai” bằng mắt luôn.

Mẹo: nếu Tester luôn fail thì task làm lại mãi. Mình giới hạn tối đa 2 lần làm lại rồi cho đi tiếp để khỏi lặp vô hạn.

Bước 5: Bong bóng chat trên đầu nhân vật

Bong bóng chat là một Sprite (tấm hình luôn quay mặt về camera) có texture vẽ bằng canvas 2D. Mỗi lần nhân vật nói, mình đo chữ để tự ngắt dòng (tối đa 4 dòng), vẽ hình chữ nhật bo góc có đuôi tam giác, rồi gắn lên ngay trên nhãn tên.

const s = new THREE.Sprite(new THREE.SpriteMaterial({
  map: new THREE.CanvasTexture(canvas), depthTest: false, transparent: true }));
s.center.set(0.5, 0);   // neo ở đáy để bong bóng mọc lên phía trên đầu

Mẹo: đặt depthTest: false để bong bóng luôn hiện đè lên cây hay lều, không bị che mất. Nhớ dispose() texture cũ mỗi lần nói để khỏi rò rỉ bộ nhớ.

Bước 6: Server PowerShell nối Claude API

Trình duyệt không nên giữ API key vì ai mở DevTools cũng thấy. Nên mình viết một server nhỏ cầm key và gọi Claude. Máy Windows nào cũng có sẵn PowerShell với lớp HttpListener, nên không cần cài Node hay Python. Server làm 3 việc: trả trang index.html, báo trang biết có key chưa (/api/health) và nhận yêu cầu từ agent rồi gọi Claude (/api/run).

Mỗi agent thực chất chỉ là một system prompt khác nhau gửi cho cùng một model. Mình ép Claude trả về JSON gồm câu thoại ngắn cho bong bóng chat, kết quả chi tiết và phán quyết pass hoặc fail.

$listener = New-Object System.Net.HttpListener
$listener.Prefixes.Add("http://localhost:8787/")
$listener.Start()

Mẹo: lưu file server.ps1 với mã hoá UTF-8 có BOM. PowerShell 5.1 đọc file không BOM theo ANSI nên tiếng Việt trong prompt sẽ hỏng.

Bước 7: Nối giao diện với Claude thật

Khi mở trang, mình hỏi server xem có key chưa. Có thì vào chế độ Live, không có (hoặc mở file trực tiếp) thì tự rơi về Giả lập. Ở chế độ Live, khi agent về tới bàn, trình duyệt gửi vai trò, tên task và kết quả các bước trước lên server. Nhờ vậy Dev đọc được kế hoạch của Pia, Tester đọc được code của Dev, và khi bị trả lại Dev đọc được phản hồi lỗi để sửa.

const r = await fetch('/api/run', {
  method: 'POST', headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ role: st.role, title: t.title, stage: st.name, context: t.notes }),
});

runId: mỗi lần Reset tăng một đơn vị, kết quả trả về muộn của phiên cũ sẽ bị bỏ qua.
Chịu lỗi JSON: nếu Claude không trả JSON chuẩn thì vẫn lấy nguyên văn làm kết quả, không sập.
Escape HTML: tiêu đề task và kết quả của Claude đều được xử lý trước khi hiển thị.

Mẹo: mặc định mình dùng model nhỏ claude-haiku-5-5 cho rẻ. Muốn kết quả tốt hơn thì đặt $env:CLAUDE_MODEL sang model lớn hơn.

Chạy thử chế độ Live

Giải nén file source, mở PowerShell trong thư mục đó.
Chạy lệnh bên dưới (thay bằng key của bạn).
Mở http://localhost:8787. Nhãn góc trên là Live · Claude là đã nối được.
Gõ task vào ô trên cùng, bấm Enter và xem đội gấu làm việc. Mở “Kết quả từng bước” ở thẻ task để đọc chi tiết.

$env:ANTHROPIC_API_KEY = "sk-ant-..."
powershell -ExecutionPolicy Bypass -File .\server.ps1

Mỗi task gọi API tối thiểu 5 lần nên bạn nhớ theo dõi chi phí trong trang quản lý của Anthropic. Key chỉ nằm trong biến môi trường trên máy bạn, đừng dán vào file code hay đăng lên mạng.

Kết luận

Nhìn một đội AI Agent làm việc trong khu rừng thú vị hơn đọc log nhiều. Quan trọng là bạn hiểu 3 lớp: cảnh 3D, bộ điều phối và cầu nối AI, rồi thay quy trình, nhân vật, bối cảnh theo ý mình, ví dụ một tiệm bánh, một trạm vũ trụ hay một văn phòng. Tải file về, chạy chế độ Giả lập trước để làm quen, sau đó mới thử Live. Có chỗ nào chưa chạy được thì để lại bình luận, mình trả lời.

Follow mình để biết thêm nhiều hơn về Marketing & AI tips nhé:

Tự làm khu rừng AI Agent 3D với gấu Taro: 7 bước kèm code (tải PDF miễn phí)