# Agent-Native + Claude Code: app mà người và AI agent cùng làm việc

[AICodeKing](https://homus.dev/speakers/aicodeking) · [AICodeKing](https://homus.dev/orgs/aicodeking)

> Đi qua app Slides của Agent-Native: sửa tay rồi để agent làm tiếp, Revise with AI, defineAction, context awareness, và dùng Claude Code thêm review checklist.

Topics: Agents, Dev Tools, Coding Agents, AI UX

Canonical: https://homus.dev/talks/agent-native-claude-code-finally-apps-your-ai-agent-can-actually-work-in-open-source

## 1. Khi chat thôi là chưa đủ để sửa một bài thuyết trình

AICodeKing mở đầu bằng một tình huống: bạn nhờ một AI agent tạo một bài thuyết trình. Nó đưa bạn một bản nháp, nhưng bạn muốn đổi một heading, dời một slide, và làm cho một phần trở nên technical hơn. Đó là những việc hoàn toàn bình thường khi bạn làm việc với một bài thuyết trình.

Bạn có thể tiếp tục mô tả từng thay đổi nhỏ trong chat. Nhưng có những lúc bạn chỉ muốn bấm vào chữ và tự sửa nó. Và khi quay lại với agent, bạn muốn nó hiểu bài thuyết trình đúng như nó đang tồn tại lúc đó, kể cả những thay đổi bạn vừa làm bằng tay.

Tình huống AICodeKing đặt ra ở đầu video: người và agent cùng làm việc trên một bài thuyết trình, và khi quay lại với agent, bạn muốn nó hiểu tài liệu đúng như nó đang tồn tại, kể cả phần bạn vừa sửa tay.

## 2. Agent-Native là gì

Đó là thứ AICodeKing muốn khám phá trong video này với Agent-Native. Theo cách anh giới thiệu trong video đăng ngày 15/10/2026, đây là một framework TypeScript mã nguồn mở của Builder, dùng để xây agent có giao diện tương tác (interactive interface). Bạn có thể dùng React, tự mang model của mình (bring your own model), giữ code của ứng dụng trong repo của riêng bạn, và deploy lên một host được hỗ trợ tuỳ bạn chọn. Repo trên GitHub ghi giấy phép MIT (đọc ngày 22/10/2026).

Kế hoạch của video gồm hai phần. Phần đầu đi qua app Slides của họ: tạo một bài thuyết trình nhỏ, sửa nó bằng tay, rồi bảo agent làm tiếp từ phiên bản đã được cập nhật. Phần sau anh chỉ cách khởi tạo một bản sao của riêng bạn, và các action cùng application context nằm ở đâu trong code.

![Trang chủ Agent-Native với dòng chữ The agentic application framework và lệnh npx create my-app](https://homus.dev/photos/jouKaJ4qlAg-0033.jpg)

Trang chủ Agent-Native trong video đăng ngày 15/10/2026: tiêu đề "The agentic application framework", dòng phụ "Build autonomous agents with intuitive UIs. Bring your own LLM. Deploy anywhere.", hai nút Get Started và Try an App, cùng lệnh `npx @agent-native/core@latest create my-app`.

## 3. Vào Slides: đăng nhập và chọn cách kết nối model

Bắt đầu thôi. Đầu tiên, mở website Agent-Native, vào mục Slides và bấm Create a deck. Sau khi đăng nhập, theo video đăng ngày 15/10/2026, bạn có thể gặp một câu hỏi tuỳ chọn về vai trò của mình (trên màn hình là "What best describes your role?"). Bạn có thể trả lời, hoặc chọn Skip for now.

Tiếp theo là phần thiết lập model. Trong video đăng ngày 15/10/2026, màn hình đưa ra lựa chọn dùng Builder.io, hoặc bỏ qua lựa chọn đó để tự cấu hình provider của bạn. AICodeKing lưu ý rằng đăng nhập và kết nối model là hai bước riêng biệt, nên hãy kiểm tra phần này trước khi thử tạo bất cứ thứ gì. Trong lần làm mẫu này, provider được kết nối trong Model settings là một dịch vụ API trung gian cho model. Hãy kiểm tra luôn là đã có một default model được chọn.

![Màn hình Choose your setup với hai lựa chọn Use Builder.io và Configure manually](https://homus.dev/photos/jouKaJ4qlAg-0123.jpg)

Màn hình "Choose your setup" trong video đăng ngày 15/10/2026: bên trái là Use Builder.io (ghi "Included free with a Builder.io account" và "60 monthly Agent Credits", kèm AI model, file uploads, voice input, image generation, background agents...), bên phải là Configure manually, nơi bạn tự kết nối model AI của mình. Con trỏ đang bấm "Skip and configure manually".

Theo video đăng ngày 15/10/2026, nếu ô soạn tin (composer) vẫn hiện Connect Agent hoặc Connect Keys, hãy quay lại kiểm tra kết nối và phần cài đặt model trước khi gửi prompt.

## 4. Màn hình chính và template Launch Keynote

Đây là màn hình chính. Bạn có thể mô tả một bài thuyết trình ngay trong ô prompt lớn. Trong video đăng ngày 15/10/2026 còn có một menu Import với các lựa chọn PDF, Google Slides và PPT, và bên dưới là chỗ để duyệt các template.

AICodeKing xem nhanh một template trước. Trong video đăng ngày 15/10/2026, mở Launch Keynote cho ra một deck bảy slide. Anh đặt tên deck là "AICodeKing Walkthrough Demo" để dễ tìm lại. Slide đầu tiên có heading "Meet Lumen."

Theo video đăng ngày 15/10/2026, double-click vào heading, bạn có một text editor kèm các nút định dạng. Anh thay tiêu đề đó bằng "Agent UI". Một cách diễn đạt dài hơn mà anh thử trước đó đã tràn ra khỏi layout cố định của template này, nên cần để ý đến canvas khi sửa. Tiêu đề mới hiện ra, và nó vẫn còn đó khi anh mở lại deck.

![Deck AICodeKing Walkthrough Demo với slide đầu đổi thành Agent UI và film strip bên trái](https://homus.dev/photos/jouKaJ4qlAg-0223.jpg)

Deck "AICodeKing Walkthrough Demo" sau khi sửa (video đăng ngày 15/10/2026): slide 1 giờ là "Agent UI.", film strip bên trái cho thấy slide "Three ideas. One product." đã được kéo lên vị trí 3, đứng trước slide số liệu mẫu "00x". Dòng "Sample launch event · Month 00, 2026" vẫn là chữ giữ chỗ của template.

Theo video đăng ngày 15/10/2026, bạn cũng có thể kéo một thumbnail trong film strip để dời slide. Ví dụ, anh dời slide "three ideas" lên trước slide sample benchmark. Như vậy, bạn có thể bắt đầu từ một layout có sẵn và làm những thao tác sửa tay bình thường trước khi cần đến agent. Các con số mẫu và chữ giữ chỗ (placeholder copy) vẫn phải thay trước khi deck này trở thành một bài thuyết trình thật.

## 5. Prompt tạo một deck sáu slide

Khi đã có model, anh quay lại mục Decks và dùng ô prompt cho ví dụ của riêng mình. Anh muốn làm một bài thuyết trình ngắn cho developer về việc thêm một AI agent vào một content workflow. Ví dụ này cho chúng ta một thứ cụ thể để làm việc, và đủ nhỏ để có thể kiểm tra kỹ. Đây là prompt anh dùng:

```
Create a six-slide presentation for React developers about building an AI content assistant. Cover the problem, a proposed workflow, shared actions, human review, a practical example, and a closing takeaway. Use short headings, a dark background, and one accent color. Keep the language practical and do not invent statistics.
```

Gửi đi và xem kết quả. Trong lúc deck được dựng, hãy nhìn vào editor. Theo workflow được mô tả trong tài liệu (video đăng ngày 15/10/2026), các slide được đưa vào bài thuyết trình ngay khi agent tạo ra chúng, nên bạn có thể theo dõi công việc ngay trong app.

Khi tạo xong, anh bấm qua từng slide. Anh xem nó có theo đúng dàn ý không, chữ có vừa khung không, và phần giải thích có dễ hiểu với một người chưa dùng framework này bao giờ không. Đây là chỗ anh dành chút thời gian trước khi yêu cầu thêm thay đổi. Theo anh, một slide có thể trông rất chỉn chu mà phần giải thích vẫn yếu. Ví dụ, nếu slide về shared action chỉ nói rằng mọi thứ đều được kết nối với nhau, anh sẽ muốn có một ví dụ thật về cái gì được kết nối.

Trong video đăng ngày 15/10/2026, khung chat bên phải ghi agent đã làm trong 7 giây và trả lời rằng deck sáu slide đã sẵn trong editor: the problem, một workflow draft, edit, continue, shared actions, human review, practical example và closing takeaway, với ngôn ngữ thực tế và không thêm số liệu thống kê nào. Slide đầu có heading "Chat alone loses the draft".

## 6. Tự tay sửa heading và đổi thứ tự slide

Giờ đến lượt chúng ta tự sửa. Mở slide human review, double-click vào heading và thay nó bằng "Always review before publishing". Anh chọn cách diễn đạt đó vì muốn bài thuyết trình có một quan điểm rõ ràng: agent có thể giúp chuẩn bị công việc, nhưng người dùng app phải được kiểm tra nó và quyết định khi nào nó sẵn sàng.

Tiếp theo, kéo slide đó trong film strip để nó đứng ngay sau slide proposed workflow. Việc này đưa bước review lên sớm hơn trong mạch câu chuyện, trước khi đi vào chi tiết implementation. Vậy là chúng ta đã đổi cả câu chữ lẫn thứ tự qua giao diện. Hãy để các thay đổi đó được lưu trước khi đi tiếp.

Hai thao tác tay: đổi heading của slide human review thành "Always review before publishing" và kéo nó lên ngay sau proposed workflow, để bước review đứng trước phần implementation.

## 7. Bảo agent làm tiếp từ bản đã sửa

Giữ slide review đang mở và quay lại với agent. Đây là prompt tiếp theo:

```
Make this slide more technical for a React developer. Keep the heading I just edited exactly as it is. Replace the body with three concise points about validating inputs, checking permissions, and reviewing a draft before publishing. Leave the other slides unchanged.
```

Hãy để ý là anh đang nói "slide này", và nói tới heading anh đã sửa tay mà không dán lại heading đó vào cuộc trò chuyện. Trên màn hình (video đăng ngày 15/10/2026), ô soạn tin có gắn một nhãn "Slide 3" phía trên prompt. Gửi đi rồi kiểm tra kết quả.

Những thứ cần kiểm ở đây rất cụ thể. Nó có sửa đúng slide đang mở không? Nó có giữ heading mới không? Và slide có ở yên vị trí chúng ta đã đặt không? Những chi tiết đó quan trọng vì chúng cho biết agent có đang làm việc với trạng thái đang có của ứng dụng hay không. Nếu nó mang heading cũ trở lại hoặc sửa nhầm slide khác, đó là thứ cần sửa trước khi đi tiếp.

![Slide Always review before publishing với ba ý Validate inputs, Check permissions, Review the draft và câu trả lời của agent](https://homus.dev/photos/jouKaJ4qlAg-0503.jpg)

Kết quả trong video đăng ngày 15/10/2026: heading "Always review before publishing" giữ nguyên, phần thân giờ là ba ý Validate inputs (parse mọi action payload bằng zod schema trước khi ghi), Check permissions (xác nhận người dùng được sửa draft này trước khi action chạy) và Review the draft (lưu output của agent thành draft, chỉ publish sau khi được duyệt). Agent trả lời rằng nó giữ đúng heading, slide vẫn ở vị trí 3 và các slide khác không đổi.

## 8. Revise with AI: sửa đúng một câu được chọn

Muốn sửa nhắm trúng hơn nữa thì chọn một câu trong slide và bấm Revise with AI trong bubble menu. Theo video đăng ngày 15/10/2026, thao tác này mở một ô prompt nhỏ hiển thị đoạn chữ được chọn, kèm nút gửi cho agent (send to agent). Anh yêu cầu nó giải thích câu đó bằng một ví dụ duyệt nội dung (content approval), không quá 20 từ, rồi gửi đi.

```
Explain this using a content approval example, in no more than 20 words.
```

Theo video đăng ngày 15/10/2026, phần chọn đó cho yêu cầu một mục tiêu rõ ràng. Khi anh nói "làm cái này rõ hơn", app có cách để cho agent biết anh đang nói tới đoạn chữ nào.

![Kết quả Revise with AI: câu Review the draft được viết lại thành ví dụ agent soạn blog post và editor duyệt](https://homus.dev/photos/jouKaJ4qlAg-0543.jpg)

Sau Revise with AI (video đăng ngày 15/10/2026): ý thứ ba giờ là "Example: the agent drafts a blog post, and an editor approves it before the publish action runs." Khung chat ghi agent đã cập nhật đúng câu được chọn, dài 17 từ.

Trong video đăng ngày 15/10/2026, AICodeKing nhận xét đây là một kiểu tương tác hữu ích cho công việc hằng ngày. Bạn có thể giao một bản nháp lớn, tự xử lý một thay đổi câu chữ nhỏ, rồi trao lại một phần cụ thể cho agent. Bạn quyết định mình cần giúp đến mức nào ở từng thời điểm.

## 9. Practical example, Present và Export

Dùng tiếp deck đó cho một lần tinh chỉnh nữa. Mở slide practical example và nhờ agent mô tả một workflow trong đó agent soạn một video description, người sáng tạo nội dung (creator) sửa nó, rồi agent rút gọn bản đã sửa đó trong khi giữ lại cách dùng từ của creator ở chỗ có thể. Trên màn hình, prompt anh gõ (gắn nhãn "Slide 5") là:

```
Describe a workflow where you draft a video description, the creator edits it, and you then shorten that edited version while preserving the creator's wording where possible
```

Anh giữ ví dụ này gần với thứ anh thật sự muốn có từ một content tool. Có những lúc một câu đúng về kỹ thuật nhưng nghe không giống bạn. Việc tự sửa được câu đó rất có giá trị. Trong video đăng ngày 15/10/2026, slide "A practical example" sau đó có bốn bước: agent soạn video description từ script, creator sửa câu chữ bằng tay, agent rút gọn bản đã sửa và giữ các cụm từ của creator khi có thể, creator duyệt bản ngắn trước khi publish.

Khi bản sửa đã sẵn, đọc nó ngay trên slide. Kiểm tra xem nó có mô tả một bản nháp và một bước review không, và nó có lặng lẽ biến ví dụ của chúng ta thành publish tự động hay không. Sau đó, như trong video đăng ngày 15/10/2026, bấm Present và đi qua deck từ đầu. Kiểm tra thứ tự slide mới, heading đã đổi, và phần giải thích technical. Đây cũng là lúc tốt để bắt những chỗ chữ quá nhỏ hoặc slide đã trở nên quá chật.

Nếu muốn đưa bài thuyết trình sang một editor khác, mở menu ba chấm rồi chọn Export. Trong video đăng ngày 15/10/2026, menu có Download as HTML, Export as PDF, Export as PPTX và Export to Google Slides. AICodeKing vẫn sẽ kiểm tra lại mọi file xuất ra, vì font và layout có thể hiển thị khác nhau giữa các editor.

![Menu Slide tools với submenu Export: Download as HTML, Export as PDF, Export as PPTX, Export to Google Slides](https://homus.dev/photos/jouKaJ4qlAg-0643.jpg)

Menu ba chấm trên slide takeaway "Let people edit. Let the agent continue.": danh sách Slide tools (Transitions, Layers, Tweaks, Annotate slide, Pin comments, Comments, History...) và submenu Export. Trong lần quay này (video đăng ngày 15/10/2026), mục Export to Google Slides đang mờ, kèm chữ "Unavailable".

## 10. Chạy bản Slides của riêng bạn

Giờ xem cách tự chạy và tuỳ biến nó. Theo video đăng ngày 15/10/2026, bạn cần Node phiên bản 22.22 trở lên và pnpm. Mở terminal ở thư mục bạn để các project. Với bản khởi đầu của Slides, trên màn hình, lệnh anh chạy là:

```
npx --yes @agent-native/core@latest create my-slides --standalone --template slides
cd my-slides
pnpm install
pnpm dev
```

Trong video đăng ngày 15/10/2026, kết quả trên terminal của anh báo "Standalone app ready", "Included: Slides", và gợi ý ba bước tiếp theo đúng như trên. Nếu chưa có pnpm, hướng dẫn Getting started dùng `corepack enable`. Chạy `pnpm install`, rồi `pnpm dev`, và mở địa chỉ local được in ra trong terminal.

Phần onboarding local đưa ra lựa chọn Continue as local dev, và sau đó bạn cần kết nối một model. Các lựa chọn được ghi trong tài liệu gồm Builder, một kết nối provider của riêng bạn, hoặc một model chạy local qua Ollama. Theo video đăng ngày 15/10/2026, bản thân framework là mã nguồn mở và không mất tiền, nhưng việc dùng model và hạ tầng bạn chọn vẫn có thể tốn chi phí.

Trong video đăng ngày 15/10/2026, phần thiết lập của Builder có kèm credit không mất phí, nhưng AICodeKing nhắc hãy kiểm tra hạn mức thực tế khi bạn đăng nhập. Với lần thử đầu tiên, anh sẽ dùng một deck nhỏ và tránh tạo ảnh không cần thiết. Như vậy dễ tập trung vào workflow chỉnh sửa và hiểu mình đang tiêu tốn vào đâu.

## 11. defineAction: một action cho cả UI lẫn agent

Giờ mở project vừa tạo trong code editor, và mở Slides developer guide bên cạnh, bắt đầu từ ví dụ action update slide đã được rút gọn.

Theo tài liệu được mở trong video đăng ngày 15/10/2026, ví dụ dùng một hàm tên `defineAction`. Description của nó giải thích thao tác này làm gì, schema định nghĩa các input, và hàm run chứa code thật sự thực hiện việc sửa. Với việc cập nhật một slide, các input gồm deck ID và slide ID, cùng với hoặc một lần thay thế có mục tiêu (targeted replacement), hoặc toàn bộ nội dung slide mới.

![Code action update slide dùng defineAction với schema deckId, slideId, find, replace, fullContent](https://homus.dev/photos/jouKaJ4qlAg-0823.jpg)

Ví dụ action trong Slides developer guide (video đăng ngày 15/10/2026): `defineAction` với description "Surgically edit a slide's content using search-replace or full replacement. Syncs live to open editors. Prefer this over full deck rewrites.", schema zod gồm `deckId`, `slideId`, `find`, `replace`, `fullContent`, và hàm run gọi `assertAccess("deck", deckId, "editor")` rồi `withDeckLock`.

Theo video đăng ngày 15/10/2026, ví dụ này kiểm tra quyền editor trước khi đổi deck, và báo cho các client đang kết nối sau khi lưu. Như vậy agent có một thao tác được định nghĩa rõ ràng để gọi lên một bài thuyết trình thật. Bạn có thể đọc thao tác đó, đổi hành vi của nó, và quyết định nó được phép làm gì.

Trên toàn framework, React có thể gọi action qua hook, chẳng hạn `useActionQuery` để đọc và `useActionMutation` để thay đổi. Theo video đăng ngày 15/10/2026, các action đó cũng có thể được mở ra cho agent, qua HTTP và qua MCP.

Với app của riêng bạn, hãy hình dung một action rename draft. Một ô text trong giao diện có thể gọi nó khi người dùng lưu tiêu đề. Agent có thể gọi nó khi người dùng yêu cầu một tiêu đề khác. Bạn giữ phần validation và logic đổi tên trong action dùng chung đó. Điều này cũng cho bạn một chỗ duy nhất để áp một quy tắc, ví dụ từ chối tiêu đề rỗng. Nếu sau này bạn đổi quy tắc, cả hai bên gọi đều dùng được hành vi mới.

![VS Code mở project my-slides với sơ đồ One action, two callers: Title field, rename-draft, Agent](https://homus.dev/photos/jouKaJ4qlAg-0903.jpg)

Trong video đăng ngày 15/10/2026: project `my-slides` mở trong VS Code, thư mục `actions` có add-slide, create-deck, get-deck, patch-deck, rename-draft, update-slide, view-screen, cùng sơ đồ "One action · two callers": ô Title field trong React UI gọi `rename.mutate({ title })`, Agent gọi bằng tool call "call it Launch notes", cả hai đi vào action `rename-draft` (validate, check access, rename).

## 12. patch-deck, update-slide và chung một khoá

Có một chi tiết implementation đáng chú ý trong Slides. Theo tài liệu được mở trong video đăng ngày 15/10/2026, editor trên browser gửi các thao tác sửa nhỏ (granular editing operations) qua một action patch deck, trong khi agent cũng có những action riêng như update slide. Các thao tác này dùng chung dữ liệu deck bên dưới và cùng cơ chế khoá (locking).

![Mục Persistence model trong tài liệu Slides: mỗi deck là một JSON blob, agent actions và browser editor dùng chung khoá](https://homus.dev/photos/jouKaJ4qlAg-0923.jpg)

Mục "Persistence model" trong tài liệu Slides lúc quay video (15/10/2026): mỗi deck là một JSON blob trong `decks.data`, mọi lần ghi đi qua một action read-modify-write phía server giữ khoá theo từng deck, nên người và agent sửa các slide khác nhau không ghi đè lên nhau. Agent actions (`add-slide`, `update-slide`) dùng chung khoá đó; browser editor đẩy các op như `patch-slide`, `delete-slide`, `reorder-slides` qua `patch-deck` thay vì PUT cả deck.

Vì vậy khi đọc source, hãy xem các thao tác thật sự nối với nhau thế nào. Các nút sửa khác nhau có thể cần input khác nhau, trong khi vẫn cùng làm việc trên một dữ liệu ứng dụng.

## 13. Context awareness: agent biết bạn đang nhìn gì

Câu hỏi tiếp theo là làm sao agent biết "slide này" nghĩa là gì. Mở tài liệu Context Awareness.

Theo tài liệu này (video đăng ngày 15/10/2026), giao diện cung cấp các thông tin như view hiện tại và phần đang được chọn (selection), và một action view screen có thể dùng thông tin đó để lấy các record liên quan. Trong một bài thuyết trình, context đó có thể xác định deck bạn đang làm và slide hoặc phần tử bạn đã chọn. Trong một content editor, bạn có thể cung cấp bản nháp hiện tại và đoạn văn đang được sửa.

![Hộp What the agent received with Revise with AI hiển thị deck, slide id, slide number, selected element và URL](https://homus.dev/photos/jouKaJ4qlAg-1003.jpg)

Hộp chú thích "What the agent received with Revise with AI" trong video đăng ngày 15/10/2026: resource context là deck đang mở, "The user is currently viewing this deck.", current slide id `slide-review`, current slide number 3, selected element targets `[data-builder-id="b-6"]` và URL hiện tại. Dòng cuối ghi: UI ghi deck, slide và selection; view-screen biến chúng thành record.

Là developer, bạn cần tự nối phần context có ý nghĩa với app của mình. AICodeKing sẽ bắt đầu với vài ID hữu ích và phần đang được chọn, rồi đảm bảo agent lấy được nội dung tương ứng. Ví dụ, nếu ai đó chọn một video description và bảo rút gọn nó, anh muốn yêu cầu đó gắn với đúng bản nháp được chọn. Để agent phải đoán giữa vài tài liệu có tên na ná nhau thì sẽ rất khó chịu.

Bạn có thể kiểm tra hành vi đó trực tiếp khi phát triển. Mở một bản nháp, sửa tay một chút, rồi bảo agent tóm tắt phiên bản đang có. Sau đó chuyển sang một bản nháp khác và lặp lại yêu cầu. Câu trả lời phải đi theo đối tượng bạn đang thật sự mở. Đó là một cách thực tế để đánh giá lớp context trước khi xây cả một workflow lớn hơn quanh nó.

## 14. Dữ liệu chung, state và bắt đầu từ một workflow

Theo video đăng ngày 15/10/2026, framework cũng hỗ trợ dữ liệu database dùng chung. Nhờ đó UI và agent làm việc trên cùng các record được lưu, trong khi application state mô tả những thứ như selection hiện tại. Hai phần này phục vụ hai mục đích khác nhau, và cả hai đều hữu ích trong kiểu editor này.

Hai lớp dữ liệu AICodeKing phân biệt: record dùng chung mà cả UI lẫn agent cùng đọc và ghi, và application state mô tả người dùng đang xem và chọn gì.

Cá nhân anh sẽ bắt đầu bằng việc tuỳ biến một workflow duy nhất trong một app mẫu. Với Slides, đó có thể là một format thuyết trình lặp lại cho kênh của bạn. Với một content app, đó có thể là soạn và sửa description. Chọn một thao tác mà bạn làm được cả bằng tay lẫn qua agent, rồi kiểm tra xem điều gì xảy ra khi bạn luân phiên giữa hai cách.

Agent có giữ lại phần người vừa sửa không? Giao diện có hiện kết quả vừa cập nhật không? Bạn có khôi phục được không nếu lần sửa đi sai hướng? Theo anh, đó là những chi tiết cần làm đúng trước khi thêm khả năng mới.

## 15. Dùng Claude Code để thêm review checklist

Theo video đăng ngày 15/10/2026, vì bạn có source code, bạn còn có thể dùng một coding agent như Claude Code hay Codex để tuỳ biến chính ứng dụng. Đây là chỗ mọi thứ trở nên khá thú vị.

Mở thư mục project đã tạo trong coding agent của bạn, bảo nó đọc cấu trúc hiện có trước, rồi mô tả thay đổi bạn muốn bằng ngôn ngữ thường. Ví dụ, anh muốn thêm một review checklist cho mỗi bài thuyết trình, cho phép đánh dấu Content, Design và Technical accuracy là đã review qua giao diện, lưu các lựa chọn đó cùng deck, và để agent nhúng trong app đọc và cập nhật cùng checklist đó qua shared actions, theo đúng các pattern có sẵn trong project. Trên màn hình, prompt anh gửi cho Claude Code là:

```
Inspect the existing structure of this project first (actions/, app/, shared/), then make this change: Add a review checklist to each presentation. Let me mark Content, Design and Technical accuracy as reviewed through the interface, save those choices with the deck, and let the embedded agent read and update the same checklist through shared actions. Follow the existing patterns in this project.
```

Như vậy là chúng ta giao cho coding agent một tính năng cụ thể để build, kể cả cách nó phải hoạt động cho cả người dùng giao diện lẫn agent bên trong app.

![Claude Code trong terminal đọc AGENTS.md, tìm useActionMutation và ghi các file review checklist](https://homus.dev/photos/jouKaJ4qlAg-1231.jpg)

Claude Code trong video đăng ngày 15/10/2026: đọc `AGENTS.md` (74 dòng) và một action có sẵn, tìm `useActionMutation` trong `app`, rồi ghi `shared/review-checklist.ts`, `actions/get-review-checklist.ts`, `actions/update-review-checklist.ts`, `app/components/editor/ReviewChecklist.tsx` và thêm 4 dòng vào `SlideEditor.tsx`. Tóm tắt cuối: checklist theo từng deck lưu trong dữ liệu deck, hai action mới dùng chung khoá per-deck với `patch-deck`, và editor gọi chúng qua `useActionQuery` / `useActionMutation`.

Khi nó sửa xong, chạy app ở local và kiểm tra kết quả. Tự tick một mục, rồi hỏi agent trong app xem những mục nào còn chưa xong. Đó là cách đơn giản để xem hai bên có đang làm việc trên cùng một thông tin đã lưu hay không. Trong video đăng ngày 15/10/2026, lệnh `git diff --stat` sau đó báo 5 file thay đổi, 161 dòng thêm vào.

![App Slides chạy local với thanh Review 0/3 gồm Content, Design, Technical accuracy dưới slide](https://homus.dev/photos/jouKaJ4qlAg-1216.jpg)

App chạy ở `localhost:8080` sau khi Claude Code thêm tính năng (video đăng ngày 15/10/2026): dưới slide có thanh "Review · 0/3" với ba mục Content, Design và Technical accuracy.

Bạn có thể tiếp tục tinh chỉnh: dời checklist sang cạnh phần xem trước slide, làm nó gọn hơn, hoặc thêm trạng thái review vào danh sách deck. Mô tả thứ bạn muốn, kiểm tra các thay đổi, rồi test lại workflow. Cá nhân AICodeKing nghĩ (video đăng ngày 15/10/2026) điều này làm cho phần mã nguồn mở hữu ích hơn nhiều: bạn có một ứng dụng có sẵn để bắt đầu, và một coding agent có thể giúp bạn chỉnh nó theo cách bạn thật sự làm việc.

## 16. Giới hạn và khi nào cách làm này đáng dùng

Có vài giới hạn cần nhớ. Theo video đăng ngày 15/10/2026, các app mẫu đang được gắn nhãn alpha, và việc nối một agent vào một editor không bảo đảm mọi lần sửa đều tốt. Bạn vẫn cần đánh giá model, các prompt, và cách các action của bạn xử lý thay đổi. Và nếu toàn bộ nhu cầu của bạn chỉ là hỏi một câu rồi đọc một câu trả lời ngắn, thì một giao diện chat đơn giản có lẽ đã đủ.

Theo AICodeKing (video đăng ngày 15/10/2026), cách làm này hữu ích hơn khi người dùng cần duyệt, chọn, sửa và review công việc qua nhiều vòng. Một bài thuyết trình là ví dụ tốt, vì thứ tự, layout và câu chữ chính xác đều quan trọng. Một lịch nội dung (content calendar) hay một document editor cũng có thể được lợi vì những lý do tương tự.

Điều anh thích ở kiến trúc này (theo nhận xét của anh trong video đăng ngày 15/10/2026) là nó cho bạn những chỗ cụ thể để làm việc với các tương tác đó: có các action của ứng dụng để đọc, có dữ liệu để cập nhật, và có context để truyền từ giao diện. Điều đó biến workflow thành thứ bạn có thể build và đánh giá từng bước.

Nếu muốn thử, hãy mở website Agent-Native. Bắt đầu với một app có sẵn, làm một thứ nhỏ, tự sửa nó, rồi bảo agent làm tiếp. Sau đó mở source và tuỳ biến phần sẽ làm nó hữu ích cho workflow của riêng bạn. Nhìn chung, trong video đăng ngày 15/10/2026, anh thấy nó khá hay. Cuối video, anh mời người xem để lại suy nghĩ trong phần bình luận.

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

- Tên gốc: Agent-Native + Claude Code: Finally! Apps Your AI Agent Can Actually Work In (Open Source)
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=jouKaJ4qlAg](https://www.youtube.com/watch?v=jouKaJ4qlAg)

- Kênh YouTube AICodeKing (AICodeKing): [youtube.com/channel/UC0m81bQuthaQZmFbXEY9QSw](https://www.youtube.com/channel/UC0m81bQuthaQZmFbXEY9QSw)

- Website Agent-Native: [agent-native.com](https://www.agent-native.com/)

- Repo Agent-Native của Builder trên GitHub (mô tả "A framework for building agentic apps", giấy phép MIT, đọc ngày 22/10/2026): [github.com/BuilderIO/agent-native](https://github.com/BuilderIO/agent-native)

- Tài liệu template Slides (đọc ngày 22/10/2026: lệnh create my-slides, persistence model, action update slide): [agent-native.com/docs/template-slides](https://www.agent-native.com/docs/template-slides/)

- Getting started (đọc ngày 22/10/2026: yêu cầu Node.js 22.22 trở lên, pnpm, `corepack enable`; để chạy agent cần [Builder.io](https://builder.io), một key Anthropic/OpenAI hoặc Ollama local): [agent-native.com/docs](https://www.agent-native.com/docs/)

- Actions overview (đọc ngày 22/10/2026: một action gọi được từ agent tool, UI hook, HTTP, MCP, A2A và CLI): [agent-native.com/docs/actions-overview](https://www.agent-native.com/docs/actions-overview/)

- Context Awareness (đọc ngày 22/10/2026: navigation state, selection state, action view-screen): [agent-native.com/docs/context-awareness](https://www.agent-native.com/docs/context-awareness/)

Nguồn: https://homus.dev/talks/agent-native-claude-code-finally-apps-your-ai-agent-can-actually-work-in-open-source · cập nhật 2026-10-22