Plugin và MCP trong Claude Code qua một app paint

1. Chuyển một setup Claude Code sang cho người khác

Josh mở đầu (video đăng ngày 31/10/2026): bạn đã biết về skill và hook trong Claude Code. Nhưng theo anh, một chuyện nhiều người gặp khó là đã có một setup rồi, làm sao chuyển setup Claude Code đó sang cho người khác. Hôm nay anh nói về cách giải quyết chuyện đó bằng plugin, và về mảnh còn thiếu cuối cùng trong setup Claude của bạn: MCP server.

Slide The Problem: Sharing a setup means copying each piece by hand. A plugin installs skills, hooks and MCP servers as one. — Slide "The Problem" (slide trong video đăng ngày 31/10/2026): "Sharing a setup means copying each piece by hand.", và dòng màu cam "A plugin installs skills, hooks and MCP servers as one."

Tới cuối video (đăng ngày 31/10/2026), anh và Claude sẽ build một app paint nhỏ. Anh sẽ cho thấy cách dùng MCP server để agent tương tác với app đó, gắn thêm skill cho nó, rồi tạo một plugin đóng gói tất cả lại để bạn có thể đưa cho người khác.

Slide kế tiếp, "The Examples" (slide trong video đăng ngày 31/10/2026), ghi "One tiny Paint app, two builds": bản 01 là "A canvas Claude can draw on", gồm trang web cộng một MCP server, làm bằng một prompt; bản 02 là "One plugin, critic included", cùng canvas đó trong một folder trống. Trước khi bắt đầu, Josh muốn đưa ra một cái nhìn tổng quan về mọi thứ trông ra sao, để người xem có sẵn một hình dung trong đầu.

2. Plugin là một lần cài

Theo Josh (video đăng ngày 31/10/2026), có thể nghĩ về plugin đơn giản như một package cài mọi thứ cùng lúc. Một plugin gồm những thứ như skill và hook, và cả MCP server, thứ anh sẽ bàn ở phần sau của video này.

Với MCP server, anh nói sẽ đi vào chi tiết sau, nhưng trong ví dụ này nó sẽ tương tác với canvas, hay app paint mà anh và Claude làm ra (video đăng ngày 31/10/2026).

Slide A plugin is one install: Claude, khung The Plugin chứa skills and a hook và MCP server, mũi tên sang canvas live in the browser — Slide "A plugin is one install" (slide trong video đăng ngày 31/10/2026): Claude "calls tools by name"; khung "The plugin" chứa skills "and a hook" và MCP "server, stays running"; MCP nối sang canvas "live in the browser", và một mũi tên đứt "a picture back" từ MCP về Claude. Dòng dưới cùng: "the server is the part that stays running".

3. MCP server là gì

Ví dụ đầu tiên là tạo một MCP server. Vậy MCP server là gì? Theo Josh (video đăng ngày 31/10/2026), nói gọn thì MCP server giống như một server local. Bạn có thể nghĩ về nó như một script Python hay một background process Node sống trên máy bạn, cung cấp một bộ API để agent nói chuyện với nó.

Rồi script trung gian (middleware) đó, hay MCP server này, sẽ nói chuyện với API thật, hoặc chạy một logic deterministic nào đó, Josh nói (video đăng ngày 31/10/2026). Anh nói sẽ xem một ví dụ thật.

Hình 3.1MCP server như một middleware, theo lời Josh trong video đăng ngày 31/10/2026: agent nói chuyện với bộ API của server, rồi server nói chuyện với API thật hoặc chạy một logic deterministic.

4. File .mcp.json và một server mẫu bằng Python

Theo Josh (video đăng ngày 31/10/2026), để dùng MCP server, bạn tạo một file JSON cho setup Claude. Trong đó bạn ghi ví dụ, ghi lệnh bạn gọi để dùng nó, rồi truyền các tham số có sẵn; tất cả được nạp khi một session bắt đầu. Slide "Any MCP server, line by line" là file .mcp.json mẫu, với dòng dưới cùng ghi "the docs' example · in the project's .mcp.json, it travels with the folder" (slide trong video đăng ngày 31/10/2026). Nội dung file trên slide:

{
  "mcpServers": {
    "example": {
      "command": "npx",
      "args": ["-y", "@example/mcp-server"]
    }
  }
}

Các chú thích bên phải slide (slide trong video đăng ngày 31/10/2026): "example" là tên server, các tool của nó hiện dưới tên đó; "command" là chương trình mà session khởi chạy; "args" là thứ nó chạy.

Tiếp theo là một ví dụ server trông ra sao. Theo Josh (video đăng ngày 31/10/2026), bạn định nghĩa các hàm, trong ví dụ này là lấy thời tiết của một thành phố. Agent biết có những tool nào dựa vào các decorator đã định nghĩa, rồi nó gọi script, và bản thân script làm một việc gì đó. Bạn có thể hard-code giá trị thời tiết trả về như trong ví dụ, nhưng theo anh, một app thật nhiều khả năng sẽ gọi một weather API rồi trả kết quả về. Vì vậy anh nói có thể nghĩ về nó về cơ bản như một middleware giữa agent và các API thật mà ta gọi.

Slide A script with tools the agent calls: file weather_server.py dùng FastMCP, một tool fetch_weather trả về 52°F and rainy — Slide "A script with tools the agent calls" (slide trong video đăng ngày 31/10/2026), file `weather_server.py`: `FastMCP("Weather Service")` là server; `@mcp.tool()` là một tool agent gọi được; docstring "Fetches the current weather for a given city." là thứ agent đọc; dòng comment "a real app calls a weather API here" là chỗ làm việc thật; `return f"{city}: 52°F and rainy"` là kết quả gửi về; `mcp.run()` giữ server chạy và chờ lời gọi. Dòng dưới: "an example server (Python, the MCP SDK) · trimmed".

Khi đã có hiểu biết tổng quan về MCP server trông ra sao, Josh nói, bắt đầu với app thôi (video đăng ngày 31/10/2026).

5. Một prompt nói bằng giọng: app paint và MCP server

Josh vào Claude Code để build một thứ mới. Thanh đầu màn hình ghi Claude Code v2.1.316, "Opus 5.5 with high effort · Claude Max" (demo trong video đăng ngày 31/10/2026). Anh nói prompt bằng giọng thay vì gõ. Theo lời anh, prompt là:

please create me a paint app that we can use to draw things and then please help me create a MCP server so that our agent can help me draw things based off of what we want to do

Trong lúc chạy (demo trong video đăng ngày 31/10/2026), màn hình cho thấy Claude viết src/hub.mjs, comment đầu file ghi đây là paint hub: phục vụ app paint, giữ bản vẽ, và đẩy mọi thay đổi tới các trình duyệt đang mở qua Server-Sent Events, còn MCP server nói chuyện với nó qua HTTP thường trên localhost. Tiếp theo là src/mcp.mjs, với comment "MCP server (stdio, JSON-RPC 2.0, newline-delimited) that lets an agent draw on the paint app" và "Zero dependencies".

"Có vẻ xong rồi", anh nói, và AI đang test nó (demo trong video đăng ngày 31/10/2026). Anh không biết nó đang tự lái app bằng MCP server hay chuyện gì đang diễn ra, nhưng có gì đó đang xảy ra. Trên canvas hiện một dòng chữ anh đọc là "on by Josh", và anh không hiểu "on by Josh" ở đây nghĩa là gì. Theo anh, điều thật sự hay là agent cũng đang lái app trực tiếp.

Quay lại Claude xem nó đang làm gì, anh mới hiểu (demo trong video đăng ngày 31/10/2026): ý là "drawn by Josh", có vẻ một lỗi lạ làm chữ hiện thành "on by Josh". Josh nói đó lại là một điểm rất hay của setup Claude cá nhân của anh: agent tự kiểm tra công việc của mình. Nó mở trình duyệt, test, tìm ra vài bug, rồi cứ tiếp tục test. Anh còn thấy nó làm cả chức năng undo và redo.

Khi xong (demo trong video đăng ngày 31/10/2026), Claude đã build server và tạo một project cho nó, có thể cd vào để dùng. Bản tóm tắt trên màn hình mở đầu: Claude đã build app paint và MCP server, test cả hai trong một trình duyệt thật; trong lần test đó, nó vẽ bằng tay, một agent vẽ qua MCP server, và agent nhận lại một ảnh PNG của cả hai bản vẽ trên cùng canvas.

Bản tóm tắt của Claude sau khi build: How to use it, What's in it, MCP tools, What I checked, Two things need your OK — Bản tóm tắt Claude in ra sau 7 phút 37 giây (demo trong video đăng ngày 31/10/2026): cách dùng (mở Claude Code trong folder `paint-mcp` để nạp server từ `.mcp.json`, mở `http://localhost:3737`, rồi nhờ nó vẽ), app có những gì, các MCP tool, những gì đã kiểm, và hai việc cần anh đồng ý.

Theo bản tóm tắt đó (demo trong video đăng ngày 31/10/2026), app paint có brush, eraser, line, rectangle, ellipse, fill bucket, text và eyedropper, cộng màu, cỡ nét, một nút bật "Filled", undo/redo, clear và lưu PNG; bản vẽ tự lưu và còn nguyên sau khi khởi động lại. Nét của người dùng và shape của agent dùng chung một canvas và một lịch sử undo. Phần kiểm tra ghi npm run check:all pass, gồm kiểm cú pháp và một lần chạy thật MCP server gọi mọi tool (10/10); test trong trình duyệt cho mọi công cụ chạy được với 0 lỗi console, và bắt được một bug đã sửa: ô text làm rơi mấy chữ đầu bạn gõ. Hai việc cần anh đồng ý là có tạo repo trên GitHub và push không, và có đăng ký các tool paint cho mọi session không, vì hiện chúng chỉ nạp trong folder project đó.

6. Mở local host, và chữ "deploy" bị hiểu nhầm

App có một local host, nên Josh mở lại (demo trong video đăng ngày 31/10/2026). Có vẻ nó đã đóng, anh bấm mở link ngay đó, nhưng server đã chết, nên anh phải bảo Claude mở lại server. Dù vậy, anh nói giờ đã có chút tooling và mọi thứ, vậy là tốt.

Anh vào folder, xoá màn hình, rồi bảo Claude "deploy" app, cho xem app và vẽ gì đó cho anh (demo trong video đăng ngày 31/10/2026). Có chút nhầm lẫn, nên anh nói lại: "Please start the local host so we can play with it." Theo Josh, khi anh nói deploy, Claude tưởng anh muốn đưa nó lên server, vì anh cũng làm nhiều việc kiểu đó. Trên màn hình, Claude trả lời rằng app không deploy được nguyên trạng khi chưa có quyết định của anh, và đưa ra ba lựa chọn nơi đặt app; sau câu nhờ mở local host, nó báo đã có thứ trả lời ở cổng 3737 và đó chính là paint hub đang chạy sẵn. Anh nói không biết chuyện gì đã xảy ra ở đó, nhưng app paint đã lên.

Anh vẽ thử (demo trong video đăng ngày 31/10/2026): "tôi không biết, tôi đang vẽ một hình người que", với mắt, mặt, đầu, và "có lẽ đó là một cái tai hay gì đó". Anh không định chơi nhiều, nhưng thấy app có cả chức năng save. "Cái này khá hay đấy", anh nói.

Bức vẽ tay trên app Paint with your agent ở localhost:3737: cái đầu, hai mắt góc cạnh, nụ cười và một hình giống tai — Bức vẽ tay của Josh trên app "Paint · with your agent" ở `localhost:3737` (demo trong video đăng ngày 31/10/2026): một cái đầu lớn, hai mắt góc cạnh, một nụ cười và một hình giống cái tai. Thanh trên có bảng màu, Size, Filled, undo/redo, Clear, Save PNG và chấm xanh "Live · agent can draw".

7. Claude vẽ lại cái đầu, live trên canvas

Giờ Josh xem có thể bắt nó làm gì (demo trong video đăng ngày 31/10/2026). Prompt trên màn hình:

Okay, help me update the existing picture I have of this session that I have to make my picture of a person's head better and, you know, add some pizzazz or something cool to it.

Claude gọi tool paint; anh kéo các cửa sổ ra cạnh nhau để xem Claude làm gì live (demo trong video đăng ngày 31/10/2026). "Ồ, nó thật sự làm được gì đó. Khá ấn tượng." Anh không biết nó đã làm gì, nhưng nghĩ nó vẽ một vòng tròn nhỏ ở trên cùng để màu không tràn ra khi tô. Trên màn hình, Claude viết rằng lần fill bị rò vào đầu qua một khe chỗ nét viền chạy ra khỏi mép trên, nên nó undo, đóng khe lại rồi tô lại.

Anh vẫn không biết nó làm gì, nhưng thấy phần tô màu trông khá ấn tượng (demo trong video đăng ngày 31/10/2026). Nó vẽ cả một cái lưỡi nhỏ. "Không tệ, không tệ. Rất hay."

Josh đọc lời bình của AI trên màn hình (demo trong video đăng ngày 31/10/2026): khuôn mặt giờ trông ổn với da, mắt xanh, mũi và nụ cười đã vào chỗ; tiếp theo nó sẽ thêm các chi tiết khác, phụ kiện, tóc. "Cái này trông thật sự khá đẹp. Tôi ấn tượng. Kudos, kudos", anh nói.

Bức tranh sau khi Claude vẽ: da, mắt xanh, miệng mở có răng và lưỡi, tóc hồng dựng nhọn, khuyên tai, áo tím, chữ LOOKIN' FRESH — Cái đầu sau khi Claude vẽ qua MCP server (demo trong video đăng ngày 31/10/2026): giữ nét viền, mắt, nụ cười và tai của Josh, thêm da, mắt xanh, miệng mở có răng và lưỡi, má hồng, tóc hồng dựng nhọn, khuyên tai vàng, áo tím, các ngôi sao lấp lánh và dòng chữ "LOOKIN' FRESH".

Bản tóm tắt cuối của Claude, sau 2 phút 8 giây (demo trong video đăng ngày 31/10/2026), ghi rằng nét viền, mắt, nụ cười và cái tai của anh vẫn còn, và nó build thêm lên đó. Phần đầu: màu da, nền xanh nhạt, và một mảng nhỏ ở chỗ nét viền chạy ra mép trên, cần để màu giữ đúng chỗ. Phần mặt: mắt xanh có ánh sáng, một cái mũi, miệng mở có răng và lưỡi, má hồng, tàn nhang ở má phải. Phần "pizzazz": tóc hồng dựng nhọn, một khuyên tai vàng, cổ với áo tím, dây chuyền ngôi sao vàng, các đốm lấp lánh quanh đầu và một nhãn "LOOKIN' FRESH".

8. Undo, redo và hỏi đường dẫn MCP server

Josh nói giờ đã thấy MCP server và thật sự tương tác được với nó (demo trong video đăng ngày 31/10/2026). Anh cảm thấy nếu bấm Ctrl Z thì sẽ tiếc quá, nên anh save trước. Rồi anh bấm Ctrl Z để undo, và redo lại. "Thứ rất ấn tượng. Tôi rất ấn tượng, tôi chỉ nói được vậy thôi."

Claude còn gợi ý làm thêm những thứ khác như thêm kính râm (demo trong video đăng ngày 31/10/2026), nhưng anh không làm. Thứ anh quan tâm hơn là xem đã làm ra cái gì, nên anh hỏi:

Can you share me the file path to the MCP server that you use to draw all this?

Trên màn hình, Claude trả lời (demo trong video đăng ngày 31/10/2026): MCP server nó dùng để vẽ là src/mcp.mjs trong project paint-mcp, file mà process server đang chạy được khởi động từ đó. Kèm hai file liên quan: src/hub.mjs, server đứng sau trang ở http://localhost:3737 mà mcp.mjs gửi bản vẽ tới; và .mcp.json, config bảo Claude Code khởi chạy mcp.mjs.

Hình 8.1Các MCP tool mà bản tóm tắt của Claude liệt kê trong demo (video đăng ngày 31/10/2026): get_canvas_info cho cỡ canvas và các shape gần nhất; draw vẽ hình chữ nhật, hình tròn, đường thẳng, đa giác, đường cong, chữ, nét tự do và fill; view_canvas trả cho agent một PNG của canvas để nó tự kiểm công việc; cùng undo, clear_canvas, save_png.

9. Bên trong code MCP server

Josh mở các file Claude đưa (demo trong video đăng ngày 31/10/2026). Phần setup MCP là một file .mcp.json anh và Claude tạo ra, cho nó biết file server nằm ở đâu: trên màn hình, server tên "paint", "command": "node", và "args" trỏ tới src/mcp.mjs trong folder paint-mcp.

Nhìn vào logic của bản thân MCP server, cuộn lên đầu file, anh nghĩ nó được hard-code tới local host và kết nối tới server (demo trong video đăng ngày 31/10/2026). "Tôi thậm chí sẽ không giả vờ là mình biết đoạn code này làm gì. Ừ, thật lòng thì tôi không biết lắm." Anh chắc rằng có thể đào vào để hiểu nó được dựng ra sao, và đoán chỗ này có lẽ chạy theo một event hay gì đó.

Theo Josh (video đăng ngày 31/10/2026), MCP server nói gọn là vậy: cứ bảo AI viết nó, và AI sẽ giúp bạn định nghĩa nó. Nhìn chung là thứ rất hay, anh nói. Về cơ bản, MCP server là một middleware connector giữa AI của bạn và các chức năng khác như API, hay thậm chí chỉ là làm một phần xử lý nào đó.

10. Plugin là một folder

Đã chơi xong với MCP server, Josh chuyển sang nói một chút về plugin. Theo anh (video đăng ngày 31/10/2026), plugin là một khái niệm khá đơn giản: một cách để bạn có một bộ skill, hook và MCP server, cùng code hỗ trợ, evidence, ví dụ hay recipe bên trong nó.

Anh không đi sâu, nhưng đưa ra một ví dụ (video đăng ngày 31/10/2026): bạn có folder plugin, và bên trong folder plugin có vài MCP server và skill khác. Về cơ bản nó chỉ là một folder để bạn gom đồ của mình vào.

Slide A plugin's server and hook: .mcp.json với server deploy-api và hooks/hooks.json với một PostToolUse hook, đều dùng CLAUDE_PLUGIN_ROOT — Slide "A plugin's server and hook" (slide trong video đăng ngày 31/10/2026), ví dụ của docs với hai file ở gốc plugin: `.mcp.json` khai server `"deploy-api"` chạy `node` với `${CLAUDE_PLUGIN_ROOT}/server.js` ("a server, packed in the plugin", "the plugin's own folder"); `hooks/hooks.json` khai một hook `PostToolUse` chạy `scripts/process.sh` ("the event it runs on (mine: Stop)", "what it runs, as you").

Trong ví dụ này, anh tiếp tục build plugin (video đăng ngày 31/10/2026): chuyển app Paint để nó có một plugin đi kèm, và làm một critic, anh gọi là "critic app", để review bức tranh trên canvas.

11. Chuyển thành plugin, thêm một critic skill

Quay lại Claude Code, Josh bảo nó làm việc này (demo trong video đăng ngày 31/10/2026). Theo lời anh, prompt là:

can you help convert our mcp server that we have in our canvas app into a plugin and help me create a new critic skill that will review the session and give us honest feedback

"Xem mình bị roast thế nào", anh nói. Khi xong (demo trong video đăng ngày 31/10/2026), Claude đã làm một Claude Code plugin với một critic skill, và anh đoán là kèm cả MCP server. Anh nói sẽ xem nó trông ra sao, và có vẻ nó cũng tìm ra vài bug, không sao cả.

Trên màn hình, phần "What I built" (demo trong video đăng ngày 31/10/2026) liệt kê: .claude-plugin/plugin.json biến repo thành một plugin và khởi chạy paint server, nên canvas chạy được từ bất kỳ folder nào; .claude-plugin/marketplace.json cho repo tự cài như một plugin; skills/critic/SKILL.md là critic với các bước, honesty rules và một format báo cáo cố định, không bao giờ đổi canvas trừ khi bạn đồng ý; skills/critic/rubric.md là sáu điểm trên 5 kèm mốc chấm: Reads, Composition, Craft, Color, Character, Collaboration. Phần "One snag I fixed": bản đầu của đường dẫn server không kết nối được, bản plain thì chạy. Phần "Checks": plugin validator pass, chỉ có warning về thiếu license và icon. Claude chạy mất 6 phút 47 giây.

Điều quan trọng nhất, theo Josh, là agent nói gì về bức tranh (demo trong video đăng ngày 31/10/2026). Verdict: nụ cười to giữ được cả khuôn mặt, mắt của agent bỏ qua hình dáng mắt người dùng vẽ, và phần thêm vào thì trông như gắn vội ("bolted on"). Tổng điểm 3.3 trên 5. Anh nói không hiểu sao collaboration lại là một mục trong rubric chấm điểm, nhưng không sao.

Bài review đầu tiên của critic: VERDICT, OVERALL 3.3/5, điểm từng mục, ba vấn đề lớn nhất, Working, Session, Want me to apply fixes 1-3? — Bài review đầu tiên của critic (demo trong video đăng ngày 31/10/2026): OVERALL 3.3/5, với Reads 4, Composition 3, Craft 3, Color 4, Character 3, Collaboration 3. Ba vấn đề: mắt lệch nhau (mắt trái tròn nằm trong viền góc cạnh, mắt phải là một hình nêm trắng gọn), phần thêm gắn vội (bỏ dòng "LOOKIN' FRESH" và hai đốm lấp lánh), má lệch (má trái nhỏ hơn và không có tàn nhang).

Phần còn lại của bài review trên màn hình (demo trong video đăng ngày 31/10/2026): điểm đang ổn là nụ cười miệng mở nhìn rõ từ đầu kia căn phòng và tóc hồng đi theo đường đầu; phần session ghi người dùng vẽ 5 nét, agent khoảng 50 thao tác, kèm các "vết sẹo" như đường vá ở mép trên, nét miệng vẽ hai lần và màu da rò vào mắt trái. Cuối cùng là câu hỏi "Want me to apply fixes 1-3?".

12. Áp các fix: agent làm anh chàng trong tranh bị mù

Josh nói (demo trong video đăng ngày 31/10/2026) critic còn đưa feedback về những điểm có thể sửa và cách cải thiện, và nó còn hỏi có áp các fix không. "Biết sao không? Áp các fix xem nó làm gì." Anh đóng cửa sổ, gõ "yes, apply fixes 1-3". "Cho tôi xem nào, Claude. Làm sao để bức tranh này đẹp hơn?"

Trên màn hình (demo trong video đăng ngày 31/10/2026), Claude bắt đầu bằng một chỉnh sửa: fix 2 của critic bảo "undo 3 times", nhưng undo xoá cả một lần draw, mà dòng chữ và các đốm lấp lánh nằm chung một batch 33 shape với tóc, cổ và áo, nên nó sẽ sơn đè chúng bằng màu nền và sửa lời khuyên đó trong skill sau.

Rồi Claude thừa nhận đã có chuyện sai (demo trong video đăng ngày 31/10/2026). "Trời ơi. Nó làm gì vậy? Nó làm anh chàng của chúng ta bị mù", Josh nói. Trên màn hình, Claude viết rằng một điểm fill của nó rơi trúng nét viền thay vì vào trong mắt; các nét của người dùng nối liền nhau nên mọi đường viền chuyển thành màu trắng, và nó undo cả batch đó. Sau đó nó báo bản vẽ đã trở về như trước, và lần này làm lại con mắt một cách an toàn: đóng khe, phủ mắt cũ bằng màu trắng, rồi một lần fill nằm sâu bên trong mắt, và nhìn lại trước khi làm tiếp.

Claude Code bên trái báo That went wrong và làm lại con mắt; canvas bên phải với mắt trái đã trắng — Lúc áp các fix (demo trong video đăng ngày 31/10/2026): bên trái, Claude giải thích vì sao không undo 3 lần, báo "That went wrong" khi mọi đường viền chuyển trắng, rồi làm lại con mắt; bên phải, canvas với mắt trái đã trắng và má trái đã có tàn nhang.

Josh nói thật ra khá hay là agent đã tạo 14 shape, vẽ một thứ ở đây (demo trong video đăng ngày 31/10/2026). Điều anh đặc biệt thích là trong lúc vẽ, có vẻ agent cứ tìm ra bug, nên nó liên tục cập nhật những thứ như code, hay hướng dẫn trong CLAUDE.md về cách dùng skill cho đúng, và critic skill vì lý do nào đó.

Khá thú vị là có vẻ đã có vài fix (demo trong video đăng ngày 31/10/2026). Theo lời Josh, critic có vẻ "heartless", hay "headless", và đưa ra vài nhận xét khác, nhưng rồi anh và agent bắt đầu không đồng ý với những gì critic nói và bắt đầu làm những thay đổi khác. "Được thôi. Cứ tiếp tục. Cứ làm tiếp."

13. Kết quả sau các fix

Khi xong (demo trong video đăng ngày 31/10/2026), Josh nói Claude đã xử lý ba fix, tìm thêm bug, và anh đoán là làm khá nhiều thứ. Anh thích phần postmortem nó viết, và bảo người xem nhìn tất cả thay đổi anh và Claude đã làm, dù anh nói thật ra không chắc những thay đổi đó là gì.

Rồi anh nhìn lại bức tranh (demo trong video đăng ngày 31/10/2026): mắt đã khớp, rõ ràng hai mắt giờ giống nhau hơn; dòng caption đã bị bỏ, và hai má đều hơn. "Tuyệt. Làm tốt lắm, Claude."

Bản tóm tắt trên màn hình, sau 4 phút 36 giây (demo trong video đăng ngày 31/10/2026), chia làm hai phần. Trên canvas: mắt trái giờ trắng hoàn toàn bên trong viền góc cạnh, giống mắt phải, với tròng mắt vẽ lại; dòng "LOOKIN' FRESH" và hai đốm lấp lánh được sơn đè bằng màu trời, vì undo không gỡ riêng chúng được; má trái giờ cùng cỡ với má phải, có tàn nhang.

Phần những gì đã sai và cách sửa (demo trong video đăng ngày 31/10/2026): lời khuyên undo sai, vì critic không thấy shape nào thuộc batch nào nên đã đoán, và giờ get_canvas_info gắn mỗi shape với bước undo của nó, critic chỉ gợi ý undo khi mọi shape trong một bước đều nên bỏ, nếu không thì bảo sơn đè; tai nạn fill, nên skill, mô tả của tool draw và CLAUDE.md giờ ghi phải bắt đầu fill sâu bên trong một vùng, chạy chúng trong batch riêng và kiểm lại ngay sau; và nét của người dùng bị rơi khỏi record sau 60 shape, nên giờ record luôn liệt kê chúng và phần đầu đếm theo tác giả (user 5, agent 68). Một lần chạy critic mới cho ra fix kiểu sơn đè, không còn lời khuyên "undo N", và chấm lại 3.3/5; lời phàn nàn chính mới là mắt, miệng và má không theo độ nghiêng của cái đầu.

14. Bên trong folder plugin

Trước khi kết thúc, Josh mở folder plugin ra xem (demo trong video đăng ngày 31/10/2026). Theo lời anh, trong đó có khá nhiều thứ. Có file CLAUDE.md, theo anh là các hướng dẫn agent đọc khi vào đây; có package, và README với hướng dẫn cho repo. Anh tự hỏi phần kia nằm ở đâu, rồi chỉ tiếp: đây là một số ý tưởng vẽ; public để render script hay app; đây là bản thân skill, critic skill, gồm một file skill và một rubric; và MCP server nằm đâu đó, "à, đây là MCP server".

Hình 14.1Những phần của folder plugin mà Josh chỉ ra trong demo (video đăng ngày 31/10/2026), cùng tên các file plugin trong bản tóm tắt của Claude.

15. Critic skill: một art director thẳng thắn

Để khép lại, Josh mở critic skill xem nó làm gì (demo trong video đăng ngày 31/10/2026). Theo lời anh, skill ghi: bạn là một art director nhìn vào local host để xem và đánh giá session, rồi có một chuỗi bước để làm theo: đọc record, chấm theo file rubric.md được đưa kèm, và thẳng thắn. Một đoạn của SKILL.md trên màn hình:

# Paint critic

You are an art director reviewing the canvas at http://localhost:3737 and the session that made it.
Your job is honest feedback that makes the next drawing better, not encouragement.

## Steps

1. **Read the record.** Call `get_canvas_info`. The header gives the op count per author; the list holds the user's
   strokes plus the last 60 ops, each as `#id [author · step n]`. Note who drew what, the order, and anything drawn
   then covered or undone-and-redrawn (gaps in the `#id`s mean undone ops).
2. **Look.** Call `view_canvas`. If it says no window is open, stop and tell the user to open the app URL;
   never critique a canvas you have not seen.
3. **Score it** against `rubric.md` (same folder as this file; read it every run). Score each axis 1-5 using its
   anchors. Judge the picture as if a stranger made it.
4. **Review the session** (the collaboration, not just the picture): did the agent build on the user's marks or pave
   over them? Is the user's original idea still visible? Any process scars: fill leaks, patch lines, stray marks,
   shapes that don't line up with the strokes under them?
5. **Write the report** in the format below. Do NOT draw or change the canvas. Offer to apply the top fixes; apply
   them only if the user says yes.

VS Code mở skills/critic/SKILL.md: Paint critic, Steps và Honesty rules — File `skills/critic/SKILL.md` trong VS Code (demo trong video đăng ngày 31/10/2026): phần "Steps" và phần "Honesty rules (these are the point of the skill)".

Phần "Honesty rules" cùng file (demo trong video đăng ngày 31/10/2026) ghi: mở đầu bằng vấn đề lớn nhất, không "compliment sandwich", không "great start!"; mọi nhận xét phải chỉ vào canvas, nêu thứ đó và vị trí của nó; lời khen phải xứng đáng và cụ thể; công việc của agent chịu cùng mức chuẩn hoặc gắt hơn, vì phần lớn chỗ sai trong một bản vẽ có AI hỗ trợ là phần của AI; đừng nâng điểm vì có người xem, điểm 3 là "fine", không phải lời xúc phạm; và nét vẽ kiểu trẻ con cũng được chấm thẳng thắn, đó là một lựa chọn phong cách hợp lệ, hãy chấm xem nó có hiệu quả theo kiểu đó không. Phần "Report format" phía dưới là khuôn cho bài review: dòng VERDICT với OVERALL, sáu mục điểm, các vấn đề lớn nhất (xấu nhất trước) kèm fix đủ cụ thể để vẽ, những gì thật sự đang ổn, ghi chú session, và câu hỏi "Want me to apply fixes 1-3?"; một dòng bên dưới ghi giữ gọn: tối đa ba vấn đề trừ khi canvas là một mớ hỗn độn, hai hoặc ba gạch đầu dòng "working".

Theo Josh (video đăng ngày 31/10/2026), thời nay phần lớn bạn chỉ cần bảo AI giúp định nghĩa, tinh chỉnh và viết spec cho một skill, và anh nghĩ vậy là đủ. Rồi mọi thứ được đóng gói vào một plugin mà giờ có thể gửi cho người khác, để AI vẽ những bức tranh đẹp như anh và Claude vừa làm.

16. Trước và sau

Trước khi kết luận, Josh cho xem bản cuối trước và sau (demo trong video đăng ngày 31/10/2026): đây là bức anh tự vẽ, và đây là cách Claude sửa nó. "Tôi rất ấn tượng."

Hai ảnh PNG cạnh nhau: bên trái bức vẽ tay nét đen, bên phải bức tranh Claude đã tô màu và sửa — Trước và sau (demo trong video đăng ngày 31/10/2026): hai file PNG 1200 x 800 mở cạnh nhau, bên trái là nét vẽ tay của Josh, bên phải là bức tranh sau khi Claude vẽ qua MCP server và áp các fix của critic.

Tóm lại, Josh nói (video đăng ngày 31/10/2026), người xem vừa thấy anh và Claude build một app, tạo một MCP server, rồi gói tất cả vào một plugin cùng một skill bổ sung để giúp đẩy server và công việc đi.

17. Khi nào mới cần plugin

Theo Josh (video đăng ngày 31/10/2026), plugin rất tuyệt, nhưng bạn không phải lúc nào cũng phải lo đâu là setup đúng cho Claude Code của mình. Thật lòng, cứ build thứ bạn cần và để setup lớn dần theo thời gian. Nếu cần một skill cho việc gì đó, cứ bảo nó làm một skill. Nếu có một hook bạn muốn dùng để bảo đảm agent làm một việc gì đó theo thời gian, cứ làm hook đó.

Nếu muốn tương tác với service của chính bạn hay các trình duyệt khác, hoặc làm một thứ trừu tượng hoá bớt độ phức tạp của API hay của một hành động nào đó, bạn có thể tạo một MCP server để agent nói chuyện, Josh nói (video đăng ngày 31/10/2026). Và chỉ khi bạn đã sẵn sàng chia sẻ nó với ai đó, hoặc có quá nhiều thứ đang diễn ra mà bạn muốn giữ mọi thứ ngăn nắp và có version control, thì bạn mới gói nó thành một plugin, ghép tất cả lại để chia sẻ với người khác, hoặc chỉ để yên tâm rằng mọi thứ được đóng gói cùng nhau.

Slide Build your setup over time: ba dòng từ bảng features-overview của docs Claude Code — Slide "Build your setup over time" (slide trong video đăng ngày 31/10/2026), nguồn ghi "Claude Code docs · 2026-10-21", ba dòng của bảng ở `code.claude.com/docs/en/features-overview`: cứ phải chép dữ liệu từ một tab trình duyệt mà Claude không thấy thì nối hệ thống đó thành MCP server; muốn một việc xảy ra mọi lần mà không cần hỏi thì viết hook; một repository thứ hai cần cùng setup thì đóng gói thành plugin.

Trang "Extend Claude Code" của docs Claude Code (đọc ngày 01/11/2026), mục "Build your setup over time", có đủ ba dòng này trong một bảng dài hơn, cùng các dòng về CLAUDE.md, output style, skill, code intelligence plugin và subagent.

Đó là phần khép lại video về MCP server và plugin (video đăng ngày 31/10/2026), và Josh chào tạm biệt.