# Dựng văn phòng pixel cho Claude Code agent, chạy local

[Hikayat Developer](https://homus.dev/speakers/hikayat-developer) · [Hikayat Developer](https://homus.dev/orgs/hikayat-developer)

> Dựng một văn phòng pixel art chạy local cho các Claude Code agent: định nghĩa team, vẽ nhân vật, làm map, build theo 7 stage và test với workflow thật.

Topics: Coding Agents, Workflow, Dev Tools

Canonical: https://homus.dev/talks/how-i-built-my-real-time-ai-agent-office-100-local-full-claude-code-tutorial

## 1. Lời hứa ba tháng và một văn phòng pixel cho agent

Hikayat Developer mở đầu: hình như khoảng ba tháng trước đã hứa sẽ làm video về chủ đề này, và giờ, gần ba tháng sau, mới thật sự làm. "Tôi biết, tôi biết, hơi trễ một chút. Nhưng okay lah, ít nhất thì giờ chúng ta cũng ở đây rồi."

Nội dung của video đăng ngày 15/10/2026: cách tự build một "mission control office" chạy local cho các AI agent, bằng Claude Code. Tác giả mời người xem hình dung một văn phòng pixel art nhỏ ngay trên máy tính của mình. Trong văn phòng có nhiều AI agent khác nhau, mỗi agent được đại diện bằng một nhân vật. Có các bàn làm việc (workstation), có các khu vực khác nhau của văn phòng, và có một giao diện để bạn nhìn thấy những hoạt động đang diễn ra quanh AI workflow của mình.

![Giao diện Agent Office: bản đồ văn phòng pixel nhìn từ trên xuống với các phòng Briefing Room, Meeting, Approval, Workspace, Command Center, Lounge, Pantry và các nhân vật có bong bóng thoại](https://homus.dev/photos/knZuRQi2Gag-0031.jpg)

Văn phòng thành phẩm trong video đăng ngày 15/10/2026: các phòng Briefing Room, Meeting, Approval, Workspace, Command Center, Lounge, Pantry, Server Room; nhân vật có tên riêng và bong bóng thoại như "Got this." hay "Reviewing now.". Trên thanh công cụ ở cảnh mở đầu này có nhãn "DEMO" ghi chú "not real state", và dòng Team Chat ở dưới ghi "You gave Satoru a task".

## 2. Từ terminal đầy chữ sang một văn phòng nhìn thấy được

Thay vì cả ngày nhìn một terminal đầy chữ, bạn có một môi trường trực quan đại diện cho những gì đang xảy ra với các coding agent của mình. Theo tác giả (video đăng ngày 15/10/2026), điểm thú vị là đây không chỉ là tạo một bức tranh tĩnh về một văn phòng. Mục tiêu là nối phần artwork và ứng dụng vào hoạt động thật của agent. "Nghe thú vị đúng không?"

![Slide The Idea: From terminal text to a visual office, bên trái là log agent dạng chữ, bên phải là văn phòng pixel](https://homus.dev/photos/knZuRQi2Gag-0043.jpg)

Slide "From terminal text to a visual office" trong video đăng ngày 15/10/2026: bên trái là một khối log kiểu `[agent] reading repo structure...`, `[tool] Edit web/App.tsx`, `[hook] PostToolUse ok`, `[agent] 12 passed, 1 failed`, `[hook] session_end`, gắn nhãn "Walls of text"; bên phải là văn phòng pixel với nhãn "See your agents work".

Trong tutorial này, tác giả hứa đi qua toàn bộ workflow: lên kế hoạch cho AI team, tạo nhân vật pixel art, tạo office map, rồi dùng Claude Code để giúp build ứng dụng. Video cũng xem tới phần cấu hình, integration workflow và cách test kết quả. Tác giả nói sẽ cho xem các bước thực hành chứ không chỉ nói về ý tưởng. Vậy nên nếu bạn quan tâm tới AI agent, coding automation, hay chỉ muốn build một thứ gì đó vui vui với Claude Code (theo video đăng ngày 15/10/2026), hãy làm theo. "Okay, vào việc thôi."

## 3. Repo, prompt kit và những thứ cần chuẩn bị

Trước khi tạo ảnh hay viết code, tác giả xem qua chính project. Tác giả dừng một chút để người xem mở GitHub repository của project trên trình duyệt. Trong repository, theo lời tác giả trong video đăng ngày 15/10/2026, có tài liệu của project và workflow đã dùng để build ứng dụng Mission Control.

Một file quan trọng được tác giả gọi là `officepromptkit.html`. Đây là prompt kit: nó giúp sắp xếp những thông tin cần có và chuẩn bị prompt cho từng giai đoạn của project. Repository còn có một tutorial script ghi lại workflow dự kiến. (Danh sách file của repo, đọc ngày 25/10/2026, gồm `README.md`, `index.html` là bản kit, và `youtube-video-script.md`.) Ý tưởng là chia một project khá lớn thành các bước nhỏ, thay vì bảo một AI coding assistant build mọi thứ trong một lần (one shot).

Trên màn hình là trang "Office Prompt Kit" với năm bước đánh số: 1 Your team, 2 Characters, 3 Office, 4 Build, 5 Check & fix. Phần "1. Your team" hướng dẫn chọn một điểm xuất phát, đổi tên app, theme và art style nếu muốn, rồi với mỗi nhân vật thì điền một tên ngắn, một vai trò và "who they are". Một slide sau đó tóm workflow thành chuỗi Plan, Assets, Map, Build, Test, kèm dòng gạch chéo: không "build everything in one shot" (video đăng ngày 15/10/2026).

Chuỗi năm bước và bốn thứ cần chuẩn bị, theo slide "Break it into small steps" và "What you need" trong video đăng ngày 15/10/2026.

Vậy cần những gì? Theo video đăng ngày 15/10/2026: thứ nhất, ChatGPT hoặc một công cụ tạo ảnh khác có thể tạo nhân vật pixel art và một office map nhìn từ trên xuống (top-down). Thứ hai, Claude Code, vì đó là công cụ dùng để làm ứng dụng. Thứ ba, môi trường phát triển và các dependency mà project yêu cầu; tác giả nhắc hãy xem README hiện hành để có hướng dẫn setup chính xác, vì lệnh và yêu cầu có thể thay đổi theo thời gian. Slide "What you need" lúc này hiện một khung `README.md` với ba bước Setup: Install dependencies, Configure the app, Run the dev server. Cuối cùng, bạn cần một project folder để làm việc an toàn, không vô tình sửa vào một ứng dụng khác.

## 4. Memory system riêng và Mission Control là hai thứ khác nhau

Thêm một điều nữa. Nếu bạn đã có AI memory system riêng, custom instructions hay agent workflow của mình, cứ tiếp tục dùng. Tác giả lấy ví dụ: bản thân cũng đang khám phá một "AI memory core" tự làm, một project riêng xây quanh personality, skill và một bộ nhớ có cấu trúc hơn, thứ tác giả đang thử nghiệm với tư cách developer. Trên màn hình lúc này là editor mở các file của project đó. Nhưng theo tác giả (video đăng ngày 15/10/2026), bạn không cần nó để build Mission Control: bạn có thể dùng setup Claude Code và workflow của chính mình.

Memory system và office dashboard này là hai thứ tách biệt. Slide "Two separate things" đặt hai thẻ cạnh nhau: "AI Memory Core" ghi "my own experiment - optional", và "Mission Control" ghi "the office dashboard", "this video", với dòng chốt "Use your own Claude Code setup". Theo tác giả, điều quan trọng là coding assistant của bạn có chỉ dẫn rõ ràng, hiểu yêu cầu của project và làm theo những quyết định bạn đã đưa ra (video đăng ngày 15/10/2026).

Hai project tách biệt theo slide "Two separate things" trong video đăng ngày 15/10/2026: không cần memory core để làm văn phòng.

## 5. Định nghĩa team trước khi vẽ hay build

"Được rồi, trước khi chạm vào ứng dụng, hãy định nghĩa team." Trước khi tạo nhân vật hay bảo Claude Code build cả thứ, tác giả muốn xác định văn phòng này đại diện cho cái gì. Lý do tác giả đưa ra: nếu bạn chỉ bảo AI "build me a cool AI office", nó có lẽ sẽ build ra thứ trông thú vị, nhưng có thể không khớp với cách bạn thật sự làm việc (video đăng ngày 15/10/2026). Slide lúc này ghi "A vague prompt gets a vague result".

Vậy nên trước hết hãy nghĩ về các agent hoặc vai trò bạn muốn thể hiện. Ví dụ: một planning agent, một coding agent, một research agent và một testing agent. Hoặc setup của bạn hoàn toàn khác. Theo tác giả (video đăng ngày 15/10/2026), điều quan trọng là mỗi vai trò phải có lý do để tồn tại. Trên màn hình là slide "Which roles do you need?" rồi bảng nhân vật trong kit.

Với tutorial này, tác giả bắt đầu với một team nhỏ: không cần 20 agent chạy khắp văn phòng ngay ngày đầu, hãy giữ ở mức quản lý được. Có thể có một planner để sắp xếp công việc, một developer để implement, và một reviewer hay tester để kiểm tra kết quả. Theo tác giả (video đăng ngày 15/10/2026), các vai trò thật nên phản ánh những agent mà setup của bạn hỗ trợ. Ở bước này ta định nghĩa mô hình hình ảnh và tổ chức, chứ không phải tạo ra năng lực AI mới một cách thần kỳ chỉ bằng việc gán cho nhân vật một chức danh. "Bởi vì đổi chức danh của ai đó không tự động làm họ đủ năng lực, kể cả trong một văn phòng AI."

![Bước Your team của Office Prompt Kit: art style chibi pixel art và ba thẻ nhân vật Leader satoru, Member 2 nagato, Member 3 itachi](https://homus.dev/photos/knZuRQi2Gag-0323.jpg)

Bước "Your team" trong kit (video đăng ngày 15/10/2026): art style "chibi pixel art" với outline 1 pixel và 2 đến 3 tông đổ bóng mỗi màu; nhân vật đầu tiên là leader. Ba thẻ đầu: satoru (leader, "plans the work and runs the team", ngồi ở Command Center), nagato (product: requirements, scope), itachi (architect: system design, risks), mỗi thẻ có ô "Who is this character?" và "Extra details".

Tiếp theo, tác giả muốn ghi những thông tin này vào đâu đó trong project. Như vậy khi Claude Code bắt đầu build giao diện, nó có thứ cụ thể để làm việc (theo video đăng ngày 15/10/2026). Ta có thể định nghĩa tên agent, trách nhiệm, ngoại hình, và cách thể hiện trạng thái của từng agent. Ví dụ: nhân vật trông thế nào khi đang làm việc? Khi đang rảnh (idle)? Và nên thể hiện một task đã xong hay thất bại thế nào?

Chưa cần giải quyết mọi chi tiết ngay, nhưng cần một điểm xuất phát rõ ràng. Nếu chưa chắc về thiết kế hoàn hảo thì cũng không sao: bắt đầu đơn giản, rồi tinh chỉnh sau khi thấy phiên bản đầu (slide "Start simple, then refine it"). Mục tiêu ở đây, theo tác giả, là cho Claude Code đủ context để đưa ra những quyết định hợp lý thay vì bắt nó đoán mọi thứ (video đăng ngày 15/10/2026). Kit còn có phần "More settings": cách văn phòng trông ra sao, màu nhấn của dashboard, hệ điều hành của bạn, nơi tạo project mới, và tên sáu phòng (Briefing Room, Meeting Room, Approval Office, Workspace, Command Center, Server Room).

## 6. Vẽ nhân vật pixel art: nghĩ theo cả bộ

"Okay, giờ tới phần vui." Chương "Create the Characters" bắt đầu, trên màn hình là các nhân vật tham chiếu và artwork đã tạo. Với project trong video đăng ngày 15/10/2026, tác giả dùng phong cách pixel art vì muốn văn phòng có cảm giác hơi giống một game quản lý kiểu cũ: loại game mà bạn xây một nơi, quản lý các nhân vật nhỏ và nhìn mọi người đi lại. Chỉ khác là lần này, thay vì quản lý một khách sạn hay một nhà máy, ta đại diện cho các AI agent. "Và may là những nhân viên này không cần nghỉ uống cà phê, ít nhất là chưa."

Khi tạo artwork, đừng chỉ xin một nhân vật trông đẹp rồi coi như xong. Hãy nghĩ nhân vật sẽ thật sự xuất hiện thế nào trong ứng dụng: hướng nhân vật đang nhìn, tỷ lệ cơ thể, nền, và cách artwork khớp vào môi trường kiểu game. Ví dụ, theo video đăng ngày 15/10/2026, project có thể cần góc nhìn trước, nghiêng và sau, cộng thêm một portrait cho giao diện (slide "One character = a set: Front, side, back + portrait").

Các góc này không thay thế được cho nhau. Góc trước dùng khi nhân vật nhìn về phía trước. Góc nghiêng có thể phục vụ cả hướng trái lẫn phải, tuỳ renderer xử lý thế nào. Góc sau dùng khi nhân vật quay lưng đi. Với setup cụ thể này, artwork góc nghiêng phải quay mặt sang trái, vì ứng dụng sẽ lật ảnh khi cần bản quay sang phải (slide "Side view rule: Draw it facing LEFT", video đăng ngày 15/10/2026).

![Prompt trong ChatGPT cho nhân vật Gojo Satoru, góc nghiêng quay sang trái, với thẻ Tip: Attach a reference image](https://homus.dev/photos/knZuRQi2Gag-0703.jpg)

Prompt tạo góc nghiêng gửi vào ChatGPT trong video đăng ngày 15/10/2026: THEME là một team ninja Naruto và Jujutsu Kaisen ("personal fan project"), ART STYLE chibi pixel art, CHARACTER là Gojo Satoru làm lead và orchestrator, POSE "SIDE view, facing LEFT", và dòng IMPORTANT: nhân vật phải quay sang trái vì app sẽ lật ảnh để có bản quay phải. Thẻ Tip góc dưới: "Attach a reference image".

Trên màn hình, các góc trước, nghiêng và sau được đặt cạnh nhau. Tác giả lưu ý: ta đang nghĩ về artwork như một bộ, chứ không phải một tập ảnh rời rạc. Nếu một nhân vật to hơn hẳn những nhân vật khác, hay art style thay đổi giữa chừng, cả văn phòng có thể bắt đầu trông thiếu nhất quán. Vì thế hãy cố giữ scale, outline, màu và tỷ lệ nhất quán (slide "Keep it consistent: Same scale, same style" với bốn nhân vật áo choàng đứng trên cùng một đường nền). Và nếu bạn dùng công cụ tạo ảnh, hãy đưa nó một ảnh tham chiếu khi có thể; theo tác giả, việc đó có thể giúp giữ cùng một thiết kế nhân vật qua các góc nhìn khác nhau (video đăng ngày 15/10/2026).

Trong demo của video đăng ngày 15/10/2026, kit ở bước "2. Draw the characters" hướng dẫn mở chatgpt.com, bắt đầu một chat mới và dùng chính chat đó cho toàn bộ artwork, kể cả văn phòng ở bước 3; bắt đầu từ leader, mỗi nhân vật có bốn prompt. Prompt góc trước của leader (lưu thành `raw/satoru/front.png`) ghi rằng ảnh này là style reference cho cả team 7 nhân vật, rồi liệt kê quy tắc canvas: ảnh vuông 1024 x 1024, nền trong suốt thật, đúng một nhân vật căn giữa, nhân vật chiếm khoảng 80% chiều cao ảnh, tỷ lệ chibi với đầu khoảng 40% chiều cao, không bóng đổ, không chữ, và hình khối đậm vì nhân vật còn được hiển thị rất nhỏ (cao 48 pixel). Khi ChatGPT tạo ảnh, trên màn hình có nhãn "Timelapse: Image generating (sped up 6x)".

## 7. Tạo ra ảnh chưa phải là tích hợp ảnh

Rồi tác giả nhấn một điểm quan trọng: tạo ra một ảnh không giống với việc tích hợp ảnh đó vào ứng dụng (slide "Important: Generating is not integrating"). Ta vẫn phải kiểm tra file thật, chắc chắn chúng được lưu đúng chỗ, và xác nhận ứng dụng load được chúng.

Một nhân vật có thể trông hoàn hảo trong image viewer, nhưng lại hiện ra quá to, quá nhỏ hoặc sai vị trí khi đã vào văn phòng. Thẻ trên màn hình hỏi "Too big? Too small? Misplaced?". Vì thế đừng bỏ qua bước integration ("Don't skip the integration step"). Trên màn hình là các thư mục asset của project và các nhân vật bên trong ứng dụng đang chạy, cùng thẻ hồ sơ của một nhân vật với tab "Poses" hiện ba góc Front, Side, Back (video đăng ngày 15/10/2026).

Khác biệt giữa tạo ảnh và tích hợp ảnh mà video đăng ngày 15/10/2026 nhấn mạnh.

Khi artwork đã sẵn sàng, có thể chuyển sang môi trường, vì nhân vật của ta cần một chỗ để làm việc.

## 8. Dựng văn phòng: map là một phần logic của app

"Được rồi, hãy dựng văn phòng! Và không, ta không gọi nhà thiết kế nội thất cho vụ này." Tác giả nói sẽ dùng Claude Code (video đăng ngày 15/10/2026). Trước hết cần nghĩ về layout: bàn nằm ở đâu? Phòng nằm ở đâu? Khu vực nào nối với khu vực nào? Và làm sao để nhân vật đi lại mà không đi xuyên qua tường? Những thứ này nghe nhỏ, nhưng theo tác giả, chúng tạo khác biệt lớn cho việc văn phòng trông có đáng tin hay không. Slide "Office layout: Plan the space first" hiện lên.

![ChatGPT trong project mission control project trả về ảnh office map pixel nhìn từ trên xuống với các phòng, bàn và màn hình](https://homus.dev/photos/knZuRQi2Gag-0741.jpg)

Ảnh office map do ChatGPT tạo trong video đăng ngày 15/10/2026: bản đồ nhìn từ trên xuống với phòng họp, khu bàn làm việc, command center có màn hình bản đồ thế giới, lounge, pantry và server room. Dòng cuối prompt phía trên dặn để trống sàn phía trước mỗi bàn và ghế, vì nhân vật sẽ được đặt đứng ở đó.

Theo tác giả, map nên có cấu trúc rõ ràng: các workstation, phòng họp, hành lang, cửa và những khu vực khác hợp lý với team của bạn. Layout cũng phải khớp với cách ứng dụng thể hiện chuyển động và điều hướng. Ví dụ, nếu một nhân vật cần đi từ phòng này sang phòng khác, ứng dụng cần một đường đi hợp lệ (slide "Navigation: Characters need a valid path"). Nếu một cánh cửa bị chặn hay một hành lang không được nối đúng, nhân vật có thể bị kẹt hoặc không tới được đích. Đó là lý do ta không nên nghĩ về map như một ảnh nền: nó là một phần logic của ứng dụng (slide "The map is application logic", video đăng ngày 15/10/2026).

Đây là lúc một công cụ để click và đánh dấu văn phòng trở nên hữu ích. Thay vì sửa toạ độ bằng tay mỗi lần, ta có thể dùng một giao diện để định nghĩa phòng, cửa, chỗ ngồi và hành lang. Theo tác giả, cách đó cho một cách thực tế hơn để chỉnh layout trong lúc test (video đăng ngày 15/10/2026). Phần chọn và đánh dấu các thành phần map được nói rõ là chỉ áp dụng nếu tính năng này có trong bản build hiện tại của bạn.

![Prompt 4 of 15 Click-to-map tool trong bước Build của kit, mô tả các chế độ ROOM, SEAT, DOOR, NODE, CONNECT](https://homus.dev/photos/knZuRQi2Gag-0440.jpg)

Prompt "4 of 15: Click-to-map tool" trong bước Build của kit (video đăng ngày 15/10/2026): Claude được yêu cầu làm một trang dev-only `web/picker.html` hiển thị `office_full_map.png`, với các chế độ ROOM, SEAT, DOOR, NODE, CONNECT, lưu mọi thứ theo phần trăm chiều rộng và chiều cao ảnh, kèm một checklist sống báo đỏ tới khi đủ. Phần "Your turn after this" bảo bạn tự click ra văn phòng và lưu file `web/src/office-coordinates.json`, "About 5 minutes".

Ví dụ, ta có thể quyết định một cái bàn nằm ở đâu, thuộc phòng nào, và nhân vật nên ngồi chỗ nào khi được giao workstation đó. Rồi test (slide "Place & test: Desk, room, seat, then test"). Nhân vật có hiện ở đúng chỗ không? Nó có tới được bàn không? Vị trí có khớp với artwork không? Nếu có gì sai, ta sửa map hoặc các quy tắc định vị.

"Và thật lòng mà nói, hãy chuẩn bị tinh thần chỉnh cái này vài lần." Layout ban đầu hiếm khi là layout cuối cùng, và đó là chuyện bình thường (thẻ "The first layout is rarely the final one"). Tác giả thà có một văn phòng đơn giản mà mọi thứ đều chạy, còn hơn một văn phòng khổng lồ trông tuyệt đẹp nhưng gửi mọi nhân vật đâm vào tường (slide "Priorities: Simple & working beats big & broken"). Vậy nên hãy làm đúng phần cơ bản trước; làm đẹp hơn để sau.

## 9. Vào development với Claude Code: plan trước

"Okay, giờ ta vào phần development thật sự." Đây là phần ghép design, artwork và logic ứng dụng lại với nhau (chương "Development with Claude Code"). Mở một terminal trong thư mục project và khởi động Claude Code; trên màn hình là VS Code với terminal ở thư mục project (video đăng ngày 15/10/2026).

Việc đầu tiên: chắc chắn bạn đang ở đúng project folder. "Nghe thì hiển nhiên, nhưng tin tôi đi, bạn không muốn AI coding assistant của mình sửa nhầm repository." Khi đã ở đúng thư mục, hãy đưa cho Claude Code context nó cần. Tác giả nói sẽ không bắt đầu bằng một prompt khổng lồ bảo nó build toàn bộ ứng dụng trong một lần. Vì sao? Vì một project như thế này có nhiều phần chuyển động (slide "Why not one big prompt? Many moving parts"): giao diện, asset nhân vật, map, state của từng agent, và các integration, tất cả phải chạy cùng nhau (video đăng ngày 15/10/2026).

Nếu xin mọi thứ cùng lúc, sẽ khó hơn nhiều để hiểu cái gì sai khi có thứ hỏng. Vì thế, trong video đăng ngày 15/10/2026, tác giả chọn một workflow plan trước (plan-first): bảo Claude Code xem xét project hiện có, hiểu kiến trúc, xác định các thành phần chính và đề xuất một implementation plan trước khi thay đổi lớn. Tác giả nhập một prompt tương tự như sau:

```
Inspect this repository and explain the existing architecture. Identify the current application entry points, asset loading system, office map representation, agent state model and any existing integrations.

Then propose a phased implementation plan.
Do not modify files yet.
Clearly identify assumptions, missing dependencies, and features that need verification.
```

![Cửa sổ terminal claude ở ~/mission-control với prompt Inspect this repository and explain the existing architecture](https://homus.dev/photos/knZuRQi2Gag-1103.jpg)

Prompt plan-first được gõ vào cửa sổ `claude - ~/mission-control` trong video đăng ngày 15/10/2026; dòng "Do not modify files yet." được tô màu khác để nhấn mạnh.

Prompt đó cho ta một điểm xuất phát. Đọc câu trả lời. Kiểm tra xem Claude Code có hiểu đúng project không; nếu thiếu gì, làm rõ trước khi đi tiếp. Đừng bấm yes cho mọi thứ chỉ vì câu trả lời trông ấn tượng. "AI có thể viết ra một plan rất thuyết phục. Điều đó không có nghĩa plan tự động đúng." (slide "Reality check: Convincing is not correct", video đăng ngày 15/10/2026). Trên màn hình là một plan tên "Mission Control: next enhancements" có trạng thái "Approved" trong app, và một bản project brief liệt kê scope MVP, những thứ ngoài scope và tech stack. Khi plan đã hợp lý, ta bắt đầu implement nó theo từng stage.

## 10. Stage 1 đến 3: app chạy, asset nhân vật, office map

**Stage 1: cho ứng dụng cơ bản chạy được.** Bắt đầu từ nền móng. Ta muốn ứng dụng khởi động được, giao diện chính render được, và cấu trúc cơ bản chạy được trước khi thêm các tính năng khác. Hãy bảo Claude Code implement một phần nhỏ, test được của plan, rồi chạy ứng dụng và kiểm tra kết quả. Nếu nó không khởi động, sửa cái đó trước. Theo tác giả, chẳng có lý do gì build thêm năm tính năng lên trên một ứng dụng không launch được (slide "Rule: Don't stack features on a broken base", video đăng ngày 15/10/2026).

**Stage 2: tích hợp asset nhân vật.** Trên màn hình là các thư mục asset và ứng dụng: trong `public/assets` có thư mục `characters`, mỗi nhân vật một thư mục con (deidara, itachi, kisame, konan, nagato...), mỗi thư mục chứa các file back, front, portrait, side. Tiếp theo là nối artwork vào ứng dụng. Theo cách tác giả làm trong video đăng ngày 15/10/2026, hãy bảo Claude Code xem xét các file asset, xác nhận định dạng và kích thước của chúng, rồi tích hợp vào hệ thống render hiện có. Đảm bảo ứng dụng load đúng góc nhìn theo hướng của nhân vật.

Rồi test vị trí. Nhân vật có trông cân giữa không? Scale có đúng không? Artwork có bị lật đúng chiều không? Theo tác giả, đây là những chi tiết dễ bị bỏ sót nếu chỉ nhìn code; luôn kiểm tra kết quả thật trên màn hình (video đăng ngày 15/10/2026).

**Stage 3: nối office map.** Giờ nối layout vào ứng dụng. Phần này gồm hình học của văn phòng, vị trí các workstation, và mọi logic điều hướng hay di chuyển mà project hỗ trợ (slide "Connect the map: Geometry, workstations, movement"). Nếu map editor là một phần của bản build, hãy test nó bằng cách tạo một thay đổi nhỏ và kiểm tra thay đổi đó có được phản ánh đúng không. Ví dụ, dời một workstation hoặc chỉnh một hành lang. Lưu thay đổi, reload view liên quan nếu cần, và xác minh kết quả khớp với ý định. Tác giả dặn: đừng giả định rằng một nút bấm chạy được nghĩa là toàn bộ tính năng chạy đúng. Trên màn hình lúc này kit có prompt nhóm thành viên thành Claude Code subagent trong `.claude/agents/`, mỗi thành viên một file, trừ leader là phiên Claude chính (video đăng ngày 15/10/2026).

Bảy stage của phần development theo các thẻ "Stage N/7" trong video đăng ngày 15/10/2026.

## 11. Stage 4: terminal và đồng bộ

**Stage 4: nối terminal và đồng bộ (synchronization).** Trên màn hình là các thành phần terminal và đồng bộ có trong bản build: panel "Terminal - open" với nút "Launch Claude" và "Wake Satoru", bên trong là một phiên Claude Code đang chạy (video đăng ngày 15/10/2026). Giờ hãy xem văn phòng nối vào workflow development thật thế nào.

Dashboard trực quan cần một cách nào đó để nhận thông tin về hoạt động của agent. Theo tác giả (video đăng ngày 15/10/2026), tuỳ cách implement, việc đó có thể dùng một local service, một daemon, event handling, hoặc một cơ chế đồng bộ khác. Điều quan trọng là hiểu thông tin đến từ đâu và đi tới giao diện bằng đường nào. Hãy bảo Claude Code giải thích data flow hiện có trước khi thay đổi nó.

![Slide Follow the data flow: Claude Code, Events hooks/logs, Local service daemon/sync, Dashboard the office UI, với ba câu hỏi kiểm tra](https://homus.dev/photos/knZuRQi2Gag-1343.jpg)

Slide "How the office gets data: Follow the data flow" trong video đăng ngày 15/10/2026: Claude Code (your agents) sang Events (hooks / logs), sang Local service (daemon / sync), rồi Dashboard (the office UI). Dưới mỗi chặng là một câu hỏi: "Events arriving?", "Service starting?", "UI updating?".

Rồi xác minh từng phần. Local service có khởi động không? Nó có nhận được các event như mong đợi không? Giao diện có cập nhật khi có thông tin mới không? Và nếu ứng dụng dựa vào một background process, hãy chắc là bạn biết cách start nó, stop nó, và xem log của nó.

Tác giả nói (video đăng ngày 15/10/2026): đừng lo nếu phần này có vẻ kỹ thuật hơn. Bạn không cần thuộc lòng mọi chi tiết implement, nhưng nên hiểu đủ để chẩn đoán hệ thống khi có thứ không cập nhật.

## 12. Stage 5: hoạt động của agent và sub-agent

**Stage 5: thêm hoạt động của agent và sub-agent.** Giờ ta xem cách thể hiện hoạt động của các agent khác nhau. Ý tưởng, theo tác giả (video đăng ngày 15/10/2026), là văn phòng nên phản ánh thông tin có ý nghĩa từ workflow thật, thay vì chỉ cho nhân vật chuyển động độc lập với việc chúng đang làm. Ví dụ, một agent có thể đang làm một task, đang chờ input, hoặc vừa xong một việc. Chính xác những trạng thái nào có được phụ thuộc vào các event và integration mà ứng dụng thật sự hỗ trợ. Vậy nên trước hết hãy kiểm tra có những thông tin gì.

![Slide Show real states, not random animation: task_started thành Working at the desk, waiting_input thành Status bubble, task_done thành Counter + history](https://homus.dev/photos/knZuRQi2Gag-1423.jpg)

Slide "Events -> visuals: Show real states, not random animation" trong video đăng ngày 15/10/2026: `task_started` thành "Working at the desk", `waiting_input` thành bong bóng trạng thái "...", `task_done` thành "Counter + history", với cảnh báo "Only show states your events actually support".

Rồi mới quyết định thể hiện chúng bằng hình ảnh thế nào. Một agent đang làm việc có thể xuất hiện ở workstation của nó. Một agent đang chờ có thể có một chỉ báo trạng thái khác. Một task đã xong có thể cập nhật một bộ đếm hoặc một panel lịch sử; trên màn hình, bảng task của app có các cột Planned, In progress, Review, Done, Blocked, với cột Done chứa các thẻ như "Foundation" và "Daemon (REST + SSE + PTY) + live mirror dashboard + embedded terminal", mỗi thẻ gắn nhãn "unverified" (video đăng ngày 15/10/2026). Nhưng những thứ này chỉ hữu ích nếu các event bên dưới được nối đúng. "Nếu không, ta vừa build ra một cái screensaver rất đắt tiền. Và đó không phải thứ ta muốn."

## 13. Stage 6 và 7: telemetry hooks, rồi ghép mọi thứ lại

**Stage 6: thêm telemetry hooks.** Theo tác giả, phần tiếp theo này quan trọng nếu bạn muốn dashboard phản ứng theo hoạt động thật. Telemetry hooks là những cơ chế cho ứng dụng quan sát các event từ công cụ hay workflow bạn đang dùng (slide "Telemetry hooks: How the app observes real activity", nối từ "Your tools: Claude Code" sang "Hook"). Cách setup chính xác tuỳ vào integration được hỗ trợ. Vì thế hãy kiểm tra cấu hình, xác nhận các hook liên quan đã được cài, và làm theo hướng dẫn của project để restart những process cần nạp lại setting (video đăng ngày 15/10/2026).

![Prompt 9 of 15 Telemetry hooks, the heart of it, với các quy tắc đánh số và dòng Your turn after this: restart Claude Code](https://homus.dev/photos/knZuRQi2Gag-0919.jpg)

Prompt "9 of 15: Telemetry hooks, the heart of it" trong kit (video đăng ngày 15/10/2026). Phần "Your turn after this" bảo restart Claude Code (`/exit` rồi `claude`) vì hook chỉ được nạp lúc khởi động. Các quy tắc được ghi là "mỗi quy tắc là một bug chúng tôi đã gặp": không bao giờ làm hỏng phiên (bọc mọi thứ trong try/catch, luôn exit 0, không in ra stdout), cách xác định event thuộc project nào, agent nào, và cách ghi log các "phantom stops".

Rồi kích hoạt một event thật và xem ứng dụng có nhận được không. Đừng dừng ở việc kiểm tra file cấu hình có tồn tại hay không. Cần xác nhận rằng event thật sự đi qua hệ thống và tạo ra kết quả mong đợi. Theo tác giả (video đăng ngày 15/10/2026), đó là khác biệt giữa cấu hình một thứ và xác minh rằng nó chạy (slide "Verify, don't assume: Configured is not the same as verified", với thẻ "Config file: exists").

**Stage 7: ghép mọi thứ lại.** Cuối cùng, nối các phần khác nhau lại. Nhân vật, map, giao diện ứng dụng, trạng thái agent, và dữ liệu từ workflow local, tất cả phải hợp lý khi đặt cùng nhau (slide "Everything has to fit together"). Đến đây, tác giả nói sẽ bảo Claude Code review phần implement so với plan ban đầu (video đăng ngày 15/10/2026).

Bốn mục tác giả muốn Claude Code liệt kê khi review lại plan, theo slide "Ask for an honest status" trong video đăng ngày 15/10/2026.

Hãy để nó liệt kê cái gì đã xong, cái gì mới implement một phần, cái gì còn thiếu, và test nào đã thật sự được chạy. Rồi chạy các bước kiểm tra liên quan. Nếu có gì fail, sửa vấn đề gốc trước khi đi tiếp. Thêm một điều: để mắt tới những gì Claude Code thay đổi. Review các diff, chú ý các file cấu hình, và đừng ghi đè code đang chạy chỉ vì AI gợi ý một đợt refactor lớn. Theo tác giả (video đăng ngày 15/10/2026), bạn muốn tiến lên mà không mất dấu project.

"Được rồi, ta đã đi qua các stage development chính. Giờ hãy xem cách test cả hệ thống trong một workflow thực tế."

## 14. Test với một workflow thật

"Okay, đây là phần tôi quan tâm nhất", tác giả nói, vì làm cho một dashboard trông đẹp là một chuyện, còn làm cho nó thể hiện đúng một workflow thật là chuyện khác (slide "What matters most: Pretty is easy. Correct is the goal.", đặt "Looks nice" cạnh "Real workflow shown correctly"). Vậy hãy test nó.

Khởi động ứng dụng bằng các lệnh đã ghi trong repository; trên màn hình là output của terminal và giao diện đang chạy. Trước hết, xác nhận ứng dụng khởi động không lỗi. Tiếp theo, kiểm tra nhân vật và office map load đúng. Rồi kiểm tra các local service hay integration mà setup của bạn cần đang chạy. Nếu ứng dụng có chỉ báo kết nối hay panel trạng thái, hãy nhìn qua nó. Nhưng đừng chỉ dựa vào chỉ báo: ta muốn xác minh hành vi thật (video đăng ngày 15/10/2026).

![Thẻ Launch checks đè lên văn phòng: Starts without errors, Characters and map load, Local services running, Status panel connected](https://homus.dev/photos/knZuRQi2Gag-1705.jpg)

Thẻ "Launch checks" trong video đăng ngày 15/10/2026: "Starts without errors", "Characters & map load", "Local services running", "Status panel connected". Phía trên, thanh Phase ghi "Phase: idle -> Test" và "11/11 done, 2 verified".

Bắt đầu một task test nhỏ, an toàn qua agent workflow đã cấu hình (thẻ "First test: Real, but small and safe"). Kích hoạt một task thật bằng chính workflow mà bạn muốn theo dõi. Giữ task nhỏ: theo tác giả, kiểu xem xét một file hay một thay đổi nhỏ có thể hoàn tác là đủ cho lần test đầu (video đăng ngày 15/10/2026).

Quan sát chuyện gì xảy ra. Hệ thống có nhận được event không? Dashboard có cập nhật không? Agent hay task đúng có xuất hiện không? Lịch sử có ghi lại hoạt động không, nếu tính năng đó đã được implement? Nếu có gì không xảy ra, hãy lần theo luồng từng bước (slide "Debugging: Trace the flow step by step"). Event có được sinh ra không? Nó có tới được local service không? Service có chuyển tiếp nó không? Giao diện có nhận và render nó không? Bạn không phải giải quyết mọi thứ cùng lúc: tìm chỗ đầu tiên mà hành vi mong đợi bị gãy và bắt đầu từ đó. Trên màn hình, log được đặt cạnh dashboard để so sánh (video đăng ngày 15/10/2026).

Cũng phải cẩn thận với kết luận rút ra từ một lần test thành công. Theo tác giả (video đăng ngày 15/10/2026): nếu nhân vật di chuyển, điều đó không tự động chứng minh việc theo dõi task chạy đúng; nếu task xuất hiện trong lịch sử, điều đó chưa chắc chứng minh mọi telemetry event đều được bắt. Hãy test riêng từng phần quan trọng (thẻ "Be honest: Track what is really tested").

Và nếu bạn chưa hoàn tất test end-to-end, cũng không sao. Theo lời khuyên của tác giả trong video đăng ngày 15/10/2026, hãy ghi lại trạng thái lúc đó một cách trung thực và giữ các bước kiểm tra còn lại trong danh sách. "Cá nhân tôi thà nói với bạn rằng một tính năng vẫn cần test, còn hơn giả vờ mọi thứ hoàn hảo chỉ vì màn hình trông đẹp. Đó là cách bạn kết thúc với một bản demo đẹp và một bug report rất khó hiểu." (thẻ "Don't: Nice demo + confusing bug report"). Khi workflow cơ bản đã được xác minh, lúc đó mới bắt đầu test các task phức tạp hơn và nhiều agent hơn.

## 15. Biến văn phòng thành của riêng bạn

"Được rồi, khi nền móng đã chạy, đây là chỗ bạn có thể vui hơn một chút." Bạn không phải chép y nguyên setup của tác giả (slide "Make it yours: Customize everything"). Bạn có thể đổi nhân vật, thiết kế lại văn phòng, thêm vai trò team của riêng mình, hoặc chỉnh giao diện cho khớp với cách bạn làm việc. Trên màn hình là các khả năng tuỳ biến: thẻ hồ sơ nhân vật, các điểm xuất phát của kit (Blank template, Example: original team với 7 nhân vật cyber tự nghĩ ra, Example: anime team), và các ảnh office map khác nhau trong ChatGPT (video đăng ngày 15/10/2026).

Ví dụ, bạn có thể tạo một phong cách hình ảnh khác cho mỗi vai trò agent. Bạn có thể tổ chức lại văn phòng thành các phòng ban khác nhau. Bạn có thể thêm thông tin hữu ích lên dashboard, tuỳ vào những gì workflow của bạn để lộ ra. Có thể bạn muốn thấy task hiện tại, tên project, hoạt động gần đây, hay một timeline những gì đã xảy ra (video đăng ngày 15/10/2026).

![Trang Timeline của app với bộ lọc Window 7d 14d, Project, Agent, Type và danh sách event hôm nay, kèm thẻ Ideas: Current task, project, activity, timeline](https://homus.dev/photos/knZuRQi2Gag-1921.jpg)

Trang Timeline của app trong video đăng ngày 15/10/2026: lọc theo cửa sổ 7 hoặc 14 ngày, theo project, agent và loại event (command, file_touch, idle, prompt, session_end, session_start); mục "Today" liệt kê "gave Satoru a task", "session started", "session ended". Thẻ "Ideas" ghi "Current task, project, activity, timeline".

Bạn cũng có thể cải thiện giao diện bằng chỉ báo trạng thái tốt hơn, nhãn rõ hơn, hay một view lịch sử hữu ích hơn. Theo tác giả (video đăng ngày 15/10/2026), điều quan trọng là ưu tiên những tính năng giúp bạn hiểu điều đang xảy ra. Đừng thêm một tính năng chỉ vì nó trông ngầu. "Dù công bằng mà nói, việc biến các AI agent của bạn thành những nhân viên văn phòng tí hon vốn đã hơi thừa rồi." (slide "Honestly... Tiny office workers: unnecessary, but fun"). Nhưng theo tác giả, đó cũng là cái vui của việc tự build công cụ cho mình: bạn có thể làm ra thứ vừa hữu ích vừa dễ chịu khi dùng. Và vì tự build, bạn có thể tiếp tục tinh chỉnh nó khi workflow của bạn thay đổi.

Chỉ cần nhớ giữ các thay đổi ở mức quản lý được. Thêm một tính năng, test nó, rồi mới chuyển sang tính năng tiếp theo (slide "The golden rule: One feature at a time", vòng Add one feature, Test it, Move on). Như vậy nếu có gì hỏng, bạn sẽ biết rõ hơn nhiều cái gì gây ra nó.

## 16. Tổng kết, và bài học về ba tháng

Đó là ý tưởng cơ bản đằng sau việc tự build một AI mission control office với Claude Code (video đăng ngày 15/10/2026). Ta bắt đầu từ cấu trúc team, tạo nhân vật pixel art, lên kế hoạch layout văn phòng, và đi qua các stage của ứng dụng và integration. Rồi ta xem cách test workflow thật thay vì chỉ giả định mọi thứ chạy vì giao diện trông đẹp. Slide "Recap: What we covered" xếp sáu mốc: Plan the team, Pixel characters, Office map, Build the app, Config & integration, Test it.

Với tác giả, phần thú vị nhất không chỉ là có những nhân vật AI nhỏ ngồi ở bàn. Đó là ý tưởng biến một thứ bình thường vốn vô hình, tức toàn bộ hoạt động diễn ra giữa các AI agent và coding tool, thành thứ dễ hiểu hơn (video đăng ngày 15/10/2026). Và bạn không phải dừng ở đây. Khi đã hiểu workflow, bạn có thể áp dụng cùng cách tiếp cận cho project của mình. Bắt đầu nhỏ, giữ kiến trúc dễ hiểu, và chắc chắn từng phần chạy được trước khi nối mọi thứ lại với nhau.

"Và làm ơn, hãy học từ kinh nghiệm của tôi. Nếu bạn hứa với mọi người sẽ làm video, cố đừng mất ba tháng để làm nó. Lần sau tôi sẽ cố làm tốt hơn." Slide đi kèm là "Lesson learned: Don't take 3 months", với ba thẻ Month 1 "still editing...", Month 2 "still editing...", Month 3 "finally!" và dòng "I'll do better next time".

Ở phần kết, tác giả mời người xem tự khám phá GitHub repository của project: đọc code, làm theo hướng dẫn setup có trong đó và thử nghiệm phiên bản của riêng mình (video đăng ngày 15/10/2026). Nếu có ý tưởng cải thiện, tác giả mời để lại trong phần bình luận và muốn nghe bạn sẽ tuỳ biến văn phòng AI của mình thế nào. Tác giả hẹn gặp lại ở video sau.

## Nguồn và liên kết

- Tên gốc: How I Built My Real-Time AI Agent Office (100% Local) | Full Claude Code Tutorial
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=knZuRQi2Gag](https://www.youtube.com/watch?v=knZuRQi2Gag)

- Kênh YouTube Hikayat Developer (Hikayat Developer): [youtube.com/channel/UCT9SYqoZ-XdTp5iY1krIAbA](https://www.youtube.com/channel/UCT9SYqoZ-XdTp5iY1krIAbA)

- Repo của project trên GitHub, gồm bản kit (`index.html`) và kịch bản của tutorial (`youtube-video-script.md`), đọc ngày 25/10/2026: [github.com/noobster97/youtube-video-local-agent-mission-control-ui-dashboard](https://github.com/noobster97/youtube-video-local-agent-mission-control-ui-dashboard)

- Trang Office Prompt Kit với năm bước Your team, Characters, Office, Build, Check & fix, đọc ngày 25/10/2026: [noobster97.github.io/youtube-video-local-agent-mission-control-ui-dashboard](https://noobster97.github.io/youtube-video-local-agent-mission-control-ui-dashboard/)

Nguồn: https://homus.dev/talks/how-i-built-my-real-time-ai-agent-office-100-local-full-claude-code-tutorial · cập nhật 2026-10-25