Tóm tắt nhanh:
ak-tanstacklàm ba mảng của TanStack: Start (route, server function, middleware), Form (state và validation) và AI (chat streaming). Nó đọc gói và bản đã cài trước, viết theo types của bản đó rồi kiểm bằng script của dự án. Nó chỉ làm phần bạn hỏi, và từ chối TanStack Query, Table, Virtual vì ngoài phạm vi.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn làm app React với TanStack Start, cần form có kiểm tra dữ liệu bằng TanStack Form, muốn thêm chat AI bằng TanStack AI, hoặc đang so sánh Start với Next.js và Remix. Không dùng cho TanStack Query, Table, Virtual hay các mẫu React chung.
flowchart LR
A["App TanStack Start"] --> B["ak-tanstack"]
C["Form cần validation"] --> B
D["Cần chat AI streaming"] --> B
B --> E["Code đúng bản đã cài, đã kiểm type và build"]
F["TanStack Query, Table, Virtual"] -.-> G["Ngoài phạm vi, skill từ chối"]Nó dựa trên 4 ý:
| Ý | Câu hỏi | Ví dụ |
|---|---|---|
| Bản đang cài | Dự án dùng gói TanStack nào, bản nào? | Đọc package.json, lockfile, import, thấy @tanstack/react-start thì viết theo types của gói đó |
| Ba mảng được hỗ trợ | Yêu cầu thuộc phần nào? | Route, server function thuộc Start; validation thuộc Form; chat, streaming thuộc AI |
| File sinh ra tự động | Đổi route thì sửa ở đâu? | Tạo file route trong src/routes/, chạy generator để routeTree.gen.ts tự cập nhật |
| Giữ đúng phạm vi | Sửa một chỗ có kéo theo việc khác không? | Sửa validation form đăng ký thì chỉ form đổi |
TanStack AI đang ở giai đoạn Alpha, skill ghi rõ là chưa sẵn sàng cho production.
Prompt mẫu để thêm route có server function:
/ak-tanstack start Thêm trang chi tiết hoá đơn /invoices/$invoiceId cho <tên app>.
Dữ liệu lấy qua server function, có kiểm tham số đầu vào.
Chỉ người đã đăng nhập mới xem được (dùng middleware auth đang có).
Xong khi: typecheck và build pass, trang hiện đúng hoá đơn.Skill này không có cờ. Sau tên skill bạn ghi phần TanStack cần làm (Start, Form hoặc AI) rồi tới tính năng, ví dụ form validation đăng ký.
Phần dưới đây là bản chi tiết: luồng chạy, 4 tình huống kèm prompt, cách ghi đầu vào, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-tanstack: làm TanStack Start, Form, AI theo đúng bản đã cài" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-tanstack". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-tanstack
