Tự dựng trợ lý AI (1/5): trung tâm chỉ huy 3D bằng Claude Code
Bài 1 loạt Tự dựng trợ lý AI: dùng 7 prompt cho Claude Code dựng một dashboard 3D hình hệ mặt trời mang tên trợ lý của bạn. Có prompt, ảnh kết quả và kit tải về.
Hướng dẫn5 phút đọc
Loạt bài này giúp bạn tự dựng một trợ lý AI của riêng mình, chạy trên máy bạn: một trợ lý chính nhận việc, các trợ lý con chuyên từng nghề, và một trung tâm chỉ huy để nhìn mọi thứ đang chạy. Bài 1 dựng phần đẹp nhất trước: trung tâm chỉ huy 3D hình hệ mặt trời.
Đọc xong, bạn có 7 prompt để dán vào Claude Code, biết mỗi prompt dựng lớp nào, và kết quả mở bằng Chrome trông ra sao. Cuối bài có kit tải về.
Cả loạt làm gì
| Bài | Một việc | Kết quả |
|---|---|---|
| 1 | Trung tâm chỉ huy 3D | Hệ mặt trời mang tên trợ lý, chạy chế độ trình diễn |
| 2 | Trợ lý chính | Có tính cách, trí nhớ, hàng rào an toàn, lưu phiên bản |
| 3 | Trợ lý nghiên cứu | Báo cáo có nguồn và mục "điểm chưa chắc chắn" |
| 4 | Trợ lý thư ký + Gmail | Thư nháp thật trong Gmail, không tự gửi |
| 5 | Nối trung tâm chỉ huy | Gõ lệnh trên hệ mặt trời, bấm duyệt mới gửi thư |
Trong video, trợ lý tên Veyra. Bạn đặt tên nào cũng được.
- Trung tâm chỉ huyHệ mặt trời 3D, mở bằng Chrome
- Trợ lý chínhTính cách, trí nhớ, hàng rào an toàn
- Trợ lý nghiên cứuTrợ lý con, gắn Sao Thổ
- Trợ lý thư kýTrợ lý con, gắn Trái Đất, nối Gmail
- Máy chủ cầu nốiNối giao diện với trợ lý thật
= Trợ lý của bạn, chạy trên máy bạn
Ý tưởng chạy suốt loạt bài: Mặt Trời là trợ lý chính, mỗi hành tinh là một trợ lý con. Hành tinh chưa có trợ lý con thì tối, chờ "cắm phòng".
Bạn cần gì trước
- Claude Code: công cụ của Anthropic để Claude làm việc trực tiếp với các tệp trong một thư mục trên máy bạn. Video dùng tab Code trong app Claude trên máy tính. Nếu bạn chưa biết Claude Code, đọc trước bài Claude Code là gì.
- Node.js, Git và Google Chrome đã cài sẵn.
- Một thư mục dự án. Video dùng
I:\AI\Veyra, trong đó có thư mục congiao-diencho bài 1.
Mở Claude Code ở thư mục giao-dien, chọn mô hình Opus và chế độ quyền Tự động để Claude làm một mạch không dừng hỏi.
Prompt đầu tiên
Mỗi prompt kết thúc bằng cùng một yêu cầu: build xong thì trả link file:/// của dist/index.html. Bạn bấm link, mở bằng Chrome, thấy kết quả ngay. Prompt đầu tiên dựng khung dự án:
Khởi tạo một dự án web 3D trong thư mục hiện tại để làm "trung tâm chỉ huy" hình hệ mặt trời cho trợ lý AI của tôi.
Yêu cầu:
- Dùng Three.js (bản 0.169.0) và camera-controls (bản 2.10.1), đóng gói bằng esbuild (bản 0.24.2). Ghim đúng phiên bản trong package.json.
- Cấu trúc: src/main.js (điểm vào), src/config.js (mọi tham số hình ở một chỗ), src/scene/ (các phần 3D), src/ui/ (giao diện chữ), src/index.html, src/styles.css, assets/textures/.
- Viết build.mjs: build ra ĐÚNG MỘT file dist/index.html mở trực tiếp bằng Chrome (file:///), không cần máy chủ. Nhúng JS, CSS vào file; ảnh .jpg/.png nhúng dạng base64; file .glsl đọc dạng text. Có lệnh npm run build.
- Cảnh ban đầu: renderer toàn màn hình, nền gần đen (#010103), camera phối cảnh fov 38, tự đổi kích thước theo cửa sổ.
- Giao diện tiếng Việt, tiêu đề trang "Veyra · Trung tâm chỉ huy".
Chạy npm install rồi npm run build.
Build xong, trả về link file:/// của dist/index.html để tôi mở bằng Chrome.Vài chỗ đáng để ý:
- Ghim phiên bản thư viện. Làm theo video vào thời điểm khác, bạn vẫn có cùng bản Three.js. Mã Claude viết ra ít lệch hơn.
- Một file HTML duy nhất. Mở bằng cách bấm đúp, không cần chạy máy chủ. Bài 5 mới cần máy chủ.
- Mọi tham số ở
config.js. Sau này muốn chỉnh màu, độ sáng, tốc độ quay, bạn chỉ cần nói với Claude, nó biết sửa ở đâu.
Sáu prompt còn lại, mỗi prompt một lớp
Prompt 2 đến 7 dài hơn, nằm nguyên văn trong kit. Đây là việc từng prompt làm:
| Prompt | Lớp | Mở Chrome thấy gì |
|---|---|---|
| 2 | Nền vũ trụ: dải Ngân Hà sinh bằng thuật toán, tinh vân tím, ba lớp sao, hiệu ứng tỏa sáng (bloom), hậu kỳ điện ảnh | Vũ trụ trống, kéo chuột xoay được |
| 3 | Mặt Trời: bề mặt plasma chuyển động bằng shader (chương trình nhỏ chạy trên card đồ họa), quầng sáng, nguồn sáng | Mặt Trời vàng cam giữa vũ trụ |
| 4 | Tám hành tinh: tải texture (ảnh bề mặt), quỹ đạo, trạng thái "chờ phòng" | Hệ mặt trời quay chậm |
| 5 | Chuyển động: mở màn, camera tự lượn, bấm hành tinh thì bay tới, sao chổi | Cảnh chuyển động như phim |
| 6 | HUD (lớp chữ và nút trên cảnh 3D): tên trợ lý, ô lệnh, bảng thông tin, Cài đặt | Dashboard mang tên trợ lý |
| 7 | Chế độ trình diễn bằng dữ liệu giả lập | Hành tinh sáng lên, thư chờ duyệt |
Texture hành tinh lấy từ Solar System Scope, giấy phép CC BY 4.0. Prompt 4 dặn Claude ghi nguồn vào một file riêng và vào giao diện.
Prompt 6 làm phần "dashboard": tên trợ lý in hoa màu vàng kim ở góc trái, ô lệnh "Nói với Veyra…" ở giữa dưới, bảng thông tin trượt ra khi bấm một hành tinh. Trong Cài đặt, bạn đổi tên trợ lý và tên của mình, cả giao diện đổi theo.
Chế độ trình diễn
Prompt 7 làm một "hợp đồng" dữ liệu: một file trạng thái dạng JSON mô tả trợ lý đang làm gì, phòng nào đang bận, thư nào chờ duyệt. Giao diện chỉ đọc file này để vẽ. Ở bài 1, dữ liệu là giả lập. Đến bài 5, chính trợ lý thật sẽ ghi vào file này, và giao diện không phải viết lại.
- Gõ việcBạn nhập việc vào ô lệnh
- Sao ThổPhòng nghiên cứu sáng, nhấp nháy
- Trái ĐấtPhòng thư ký soạn thư
- Chờ duyệtBảng thông tin hiện thư nháp
- Duyệt gửiBấm hai lần mới gửi
Nút "Duyệt gửi" phải bấm hai lần. Lần đầu nút đổi thành "Bấm lần nữa để gửi". Thói quen này giữ nguyên tới bài 5, khi thư được gửi thật.
Chỉnh theo ý mình
Hình mỗi máy có thể hơi khác video, vì Claude viết mã mới mỗi lần. Chỗ nào chưa ưng, bạn nói bằng lời, không cần sửa mã. Hai câu dùng trong video:
Giảm độ tỏa của Mặt Trời, giữ độ sáng toàn cảnh — quầng sáng mềm hơn, gọn hơn quanh Mặt Trời.
Khi một phòng đang làm việc, quầng sáng quanh hành tinh nhấp nháy rõ hơn: một giây một lần, biên độ lớn.Tự kiểm và tải kit
Kit có script kiểm tra: dán một câu, Claude chạy script, báo PASS (đạt) hoặc FAIL (chưa đạt) từng mục, gặp FAIL thì tự sửa. Bản trong video đạt hết các mục.
Kit gồm HUONG-DAN.md (các bước chi tiết), 7 prompt, prompt tinh chỉnh, script kiểm tra và ảnh kết quả đúng để đối chiếu. Kit không có mã dựng sẵn: bạn tự dựng để hiểu từng lớp, sau này mới sửa được.
Bài sau: dựng trợ lý chính, có tính cách, trí nhớ và hàng rào an toàn.