🧠 Codex CLI vs Claude Code vs Gemini CLI

1) Codex CLI — Tóm tắt khả năng & các nâng cấp chính

Codex CLI là agent chạy ngay trong terminal, đóng vai
trò “pair programmer” biết lập kế hoạch, dùng công cụ và tự kiểm tra đầu
ra theo từng bước. Bản nâng cấp 2025 tập trung vào khả năng cộng tác
thời gian thực, theo dõi tiến độ, và kiểm soát quyền truy cập an toàn —
giúp bạn chuyển từ các yêu cầu nhỏ tương tác nhanh đến nhiệm vụ dài hơi
(refactor, thêm tính năng, viết test) mà không rời môi trường làm việc.

Khả năng cốt lõi

  • Agentic coding trong terminal: ra lệnh, nhận kế
    hoạch, xem log/diff, và áp dụng thay đổi trực tiếp ở thư mục làm việc;
    phù hợp cả phiên ngắn (prompt–sửa–chạy) lẫn nhiệm vụ nhiều bước.
  • Hiểu và điều hướng codebase: đọc tập tin liên quan,
    đề xuất chỉnh sửa/viết mới, chạy lệnh build/test để xác thực; có thể
    duy trì ngữ cảnh dài hơn nhờ cơ chế nén hội thoại.
  • Tận dụng mô hình tối ưu cho coding: hỗ trợ dùng
    GPT-5-Codex cho tác vụ cục bộ trong CLI (tùy chọn), cho chất lượng mã
    và khả năng điều khiển tốt hơn.
  • Tích hợp an toàn theo quyền: làm việc ở các mức cấp
    quyền khác nhau (chỉ đọc/duyệt thủ công, tự động trong workspace, hoặc
    toàn quyền có mạng) để cân bằng tốc độ và kiểm soát rủi ro.

Các nâng cấp nổi bật (2025)

  • Đính kèm & chia sẻ hình ảnh ngay trong CLI: gửi
    screenshot/wireframe/diagram để tạo ngữ cảnh UI chung, từ đó agent bám
    sát ý đồ thiết kế hơn.
  • Theo dõi tiến độ bằng to-do list: CLI hiển thị các
    bước việc, trạng thái hoàn thành, và cho phép tiếp tục/điều chỉnh khi
    tác vụ phức tạp.
  • Công cụ tích hợp tốt hơn: thêm web search
    MCP (Model Context Protocol) để kết nối hệ thống bên ngoài với độ
    chính xác sử dụng công cụ cao hơn.
  • Terminal UI mới: hiển thị lệnh công cụ và
    diff rõ ràng, dễ theo dõi; giúp bạn duyệt và chấp thuận thay
    đổi nhanh.
  • Ba chế độ phê duyệt đơn giản: Read-only (duyệt thủ
    công), Auto (toàn quyền trong workspace, cần duyệt khi ra ngoài), Full
    access (đọc file bất kỳ & chạy lệnh có mạng); kèm cơ chế nén hội thoại
    để giữ phiên làm việc dài.
  • Khả dụng & cài đặt nhanh: gói CLI phát hành dạng
    open-source; cài qua npm và dùng chung tài khoản
    ChatGPT/Codex để đồng bộ trải nghiệm giữa máy cục bộ, IDE và cloud.

Ý nghĩa thực tiễn

  • Cho phiên ngắn: phản hồi nhanh, sinh/ghi mã, xem diff
    và hợp nhất từng phần một — rất hợp xây dựng nguyên mẫu, sửa lỗi, viết
    test.
  • Cho nhiệm vụ dài hơi: theo dõi to-do, dùng công cụ
    đúng lúc (search/MCP), duy trì ngữ cảnh nhiều giờ; giảm tải việc lặp
    thủ công và rủi ro “lạc ngữ cảnh”.
  • Cho đội ngũ coi trọng an toàn: mặc định sandbox vô
    hiệu mạng; mọi thao tác “nhạy cảm” đều có cơ chế xin phép, log minh
    bạch, và có thể giới hạn miền mạng tin cậy khi cần.

2) Gemini CLI — kết nối & ngữ cảnh dài

Gemini CLI đưa mô hình Gemini vào terminal với thế mạnh nổi bật là
khả năng gom ngữ cảnh lớn
khả năng “kéo tri thức ngoài” (web/search, MCP) khi cần. Cách
làm việc phù hợp là vừa viết mã vừa tổng hợp tài liệu, quy chuẩn, ví dụ
và snippet từ nhiều nguồn ngay trong một phiên.

Khả năng & trải nghiệm chính

  • Tổng hợp đa nguồn: đọc nhiều tệp
    README/changelog/guide cùng lúc, rút ý và hợp nhất thành checklist
    hoặc mã khởi tạo.
  • Grounding khi thiếu ngữ cảnh: có thể tra cứu rồi
    “điền chỗ trống” (thư viện, API mẫu, quy ước thiết kế) để tiếp tục
    triển khai.
  • Tích hợp công cụ qua MCP/tiện ích: mở rộng tác vụ từ
    terminal (chạy lệnh, xử lý tệp, thao tác hệ thống) trong cùng một
    luồng hội thoại.
  • Thích hợp giai đoạn khởi tạo: bootstrap dự án, dựng
    khung cấu trúc, tạo script cài đặt & cấu hình linter/test nhanh.

Điểm mạnh

  • Gom và “tiêu hoá” tài liệu rất tốt, hữu ích khi yêu cầu dính nhiều quy
    chuẩn/tiêu chí.
  • Tiện ích terminal đa dạng; có thể chuyển từ thảo luận sang thực thi
    lệnh liền mạch.
  • Phù hợp các bài toán phải vừa tra cứu vừa phát triển (setup,
    tích hợp nhiều dịch vụ, tạo sample end-to-end).

Điểm cần lưu ý

  • Đầu ra dễ dài; nên yêu cầu rút gọn hoặc
    chỉ ghi thay đổi tối thiểu để tránh mã/cấu hình thừa.
  • Ở bài toán nhiều ràng buộc (ví dụ: vật lý/va chạm trong game), logic
    đôi khi thiếu ổn định — nên kèm test nhỏ để “neo” hành vi mong muốn.
  • Prompt càng dài càng dễ tăng độ trễ; chia nhỏ mục tiêu giúp cải thiện
    tốc độ và độ chính xác.

Khi nào nên dùng / không nên dùng

  • Nên dùng: khởi tạo dự án, hợp nhất guideline, tạo
    khung CI/CD, viết script cài đặt; tích hợp SDK/API mới có nhiều tài
    liệu rải rác.
  • Không lý tưởng: tác vụ yêu cầu logic thời gian thực
    nhạy cảm (gameplay/physics), hoặc tối ưu UI/animation vi mô cần tinh
    chỉnh thủ công.

3) Claude Code — độ sâu & tái cấu trúc

Claude Code thiên về hiểu dự án
giữ tính nhất quán trên codebase lớn. Công cụ này làm tốt các
việc như điều hướng toàn repo, chuẩn hoá kiến trúc, viết module theo
convention, chạy test và thậm chí đề xuất PR hoàn chỉnh với mô tả rõ
ràng.

Khả năng & trải nghiệm chính

  • Refactor quy mô lớn: phát hiện trùng lặp, tách
    mô-đun, chuẩn hoá naming/foldering, giải thích tác động kiến trúc.
  • Review có lý do: output thường kèm chú thích “vì sao”
    và “cách kiểm chứng”, thuận tiện cho code review theo nhóm.
  • Giữ trạng thái & luồng làm việc: có thể theo dõi đề
    xuất qua nhiều bước (quét, đổi tên, cập nhật test, cập nhật tài liệu).
  • UI/animation có tổ chức: ở bài front-end đòi hỏi
    chuyển cảnh hoặc nhiều trạng thái, cách tổ chức logic thường gọn gàng,
    ít “giật cục”.

Điểm mạnh

  • Rất phù hợp với kế hoạch tái cấu trúc/chuẩn hoá đa mô-đun
    hoặc khi cần củng cố ranh giới giữa các layer.
  • Đầu ra dễ đọc, có chú thích; thuận lợi cho duy trì lâu dài và
    onboarding thành viên mới.
  • Hỗ trợ quy trình nhóm: có thể đề xuất commit/PR với mô tả chi tiết,
    checklist kiểm thử và hướng dẫn rollout.

Điểm cần lưu ý

  • Tốc độ không phải thế mạnh; cần cân nhắc khi deadline gấp hoặc chỉ sửa
    1–2 file nhỏ.
  • Để đạt “đúng gu” kiến trúc, nên mô tả convention (naming, foldering,
    state, test strategy) ngay từ đầu.
  • Với việc rất nhỏ, chi phí thời gian có thể lớn hơn lợi ích so với các
    công cụ hướng tốc độ.

Khi nào nên dùng / không nên dùng

  • Nên dùng: refactor lớn, nâng cấp framework, tách
    mô-đun, chuẩn hoá API, dọn nợ kỹ thuật, viết/hoàn thiện test.
  • Không lý tưởng: thử nghiệm nhanh/POC siêu nhỏ, tinh
    chỉnh UI/copywriting vi mô cần phản hồi tức thì.

4) Bảng so sánh chính

Tiêu chí Codex CLI Gemini CLI Claude Code
Model nền OpenAI Codex (tối ưu coding) Gemini 2.5 Pro Claude Sonnet 4
Context window ~128K tokens ~1M tokens ~200K tokens (xấp xỉ)
Truy cập FS & Shell
Tính năng khác biệt Tốc độ phản hồi nhanh, vòng lặp ngắn Kéo tri thức ngoài, ngữ cảnh dài Quét codebase, gợi ý PR, chuẩn hoá
Phù hợp nhất cho Prototype, sửa lỗi, tác vụ cục bộ Quy trình “viết mã + tra cứu” Dự án nhiều mô-đun, refactor/maintain
Tốc độ/độ trễ Nhanh nhất Trung bình Chậm hơn
UI/Animation Thiên chức năng Khá tốt, phụ thuộc prompt Mượt & có tổ chức
Xử lý lỗi Cần can thiệp tay ở logic phức tạp Ổn nếu prompt rõ Phát hiện & sửa tốt, kèm giải thích

5) Demo 2 tác vụ cụ thể

Task 1 — Platformer 2D phong cách Super Mario

Prompt: “Tạo một trò chơi platformer 2D cơ bản theo phong cách Super
Mario. Trò chơi nên có bố cục đơn giản dựa trên các ô vuông với Mario
đứng trên các khối đất, nền trời với những đám mây, khối hình dấu hỏi
phía trên và một đường ống màu xanh lá cây gần đó. Bao gồm các cơ chế cơ
bản như di chuyển trái/phải và nhảy bằng các phím mũi tên trên bàn phím.
Mô phỏng trọng lực và va chạm với các nền tảng. Sử dụng đồ họa theo
phong cách pixel-art với các tài nguyên cục bộ được nhúng hoặc tham
chiếu.”

Codex CLI

Gemini CLI

Claude Code

Task 2 — Đồng hồ động theo chủ đề thời tiết

Prompt: “Thiết kế và phát triển một bảng điều khiển đồng hồ động theo
chủ đề thời tiết với giao diện trực quan phong phú chỉ bằng HTML, CSS và
JavaScript. Mục tiêu chính là tạo ra một giao diện đồng hồ thời gian
thực, không chỉ hiển thị thời gian hiện tại mà còn tự động điều chỉnh
theo thời gian trong ngày. Triển khai bốn hiệu ứng chuyển tiếp nền động
thể hiện bình minh, trưa, hoàng hôn và đêm, mỗi hiệu ứng có màu sắc và
các yếu tố động riêng biệt như mây trôi, sao lấp lánh, hoặc mặt trời/mặt
trăng mọc/lặn, và cung cấp tùy chọn chuyển đổi giữa định dạng thời gian
12 giờ và 24 giờ. Để tăng thêm tính tương tác, hãy thêm một phần hiển
thị câu trích dẫn động lực hoặc năng suất theo từng giờ.”

Codex CLI

Gemini CLI

Claude Code

6) Ưu & Nhược điểm thực tế

6.1 Codex CLI

Ưu điểm

  • Tốc độ phản hồi rất nhanh; phù hợp vòng lặp “chia nhỏ — chạy thử — sửa
    — lặp”.
  • Trải nghiệm terminal gọn gàng: xem diff → áp dụng, chạy test/format
    ngay trong CLI.
  • Ổn định ở tác vụ nhỏ/vừa; giữ mạch công việc tốt khi bạn dẫn dắt bằng
    checklist/to-do.

Nhược điểm

  • UI/animation phức tạp (parallax, canvas, webGL) thường cần chỉnh tay
    thêm; thiên về chức năng.
  • Logic nhiều tầng, đa mô-đun: đôi lúc bỏ sót ràng buộc; cần test bao
    phủ để duy trì chất lượng.
  • Tài liệu hoá sinh tự động thường ngắn; cần yêu cầu bổ sung “why/how”.

6.2 Gemini CLI

Ưu điểm

  • Ngữ cảnh rất lớn: đọc nhiều tệp/README/changelog cùng lúc, tổng hợp
    nguồn nhanh.
  • Kéo tri thức ngoài (web/search) khi thiếu snippet/tiêu chuẩn, rồi hợp
    nhất vào triển khai.
  • Hữu ích khi khởi tạo dự án mới cần nhiều guideline & tài liệu tham
    chiếu.

Nhược điểm

  • Đầu ra thường dài; cần rút gọn để tránh code/CSS dư hoặc cấu trúc rườm
    rà.
  • Logic chưa ổn định ở bài toán nhiều ràng buộc (ví dụ game với va
    chạm/trọng lực).
  • Độ trễ trung bình; prompt càng dài càng tốn thời gian suy nghĩ.

6.3 Claude Code

Ưu điểm

  • Hiểu dự án tốt, nổi bật ở refactor, gom code trùng, đặt tên có chủ
    đích, output có chú thích.
  • UI/animation mượt, trạng thái rõ; phù hợp demo front-end đòi hỏi
    chuyển cảnh tinh tế.
  • Phù hợp quy trình nhóm: có thể sinh commit/PR có mô tả, tài liệu hoá
    bài bản.

Nhược điểm

  • Tốc độ chậm hơn; không phù hợp khi cần xử lý “siêu nhanh”.
  • Phụ thuộc prompt chi tiết để đạt kiến trúc “đúng gu”.
  • Với tác vụ rất nhỏ (1–2 file), chi phí thời gian đôi khi lớn hơn lợi
    ích so với Codex.

7) Chọn công cụ nào theo nhu cầu

Muốn tốc độ & vòng lặp ngắn

Chọn Codex. Giao tác vụ nhỏ-vừa, kiểm diff theo
bước; tận dụng test/format tự động để “khoanh vùng lỗi” nhanh.

Muốn kéo ngữ cảnh ngoài & tìm kiếm

Chọn Gemini. Gom README, guideline, link web → hợp
nhất checklist & script; hữu ích khi khởi tạo dự án nhiều ràng buộc.

Muốn refactor & quản lý codebase lớn

Chọn Claude. Giao nhiệm vụ tổ chức lại cấu trúc,
sinh PR có mô tả; yêu cầu giải thích kiến trúc & tác động.

Playwright Agents — 🎭 Planner, 🎭 Generator, 🎭 Healer

What are Playwright Agents?

This article distills the official guidance and demo video into a practical, production‑ready walkthrough. Playwright ships three agents you can run independently or in a loop: 🎭 Planner, 🎭 Generator, and 🎭 Healer.

🎭 Planner

Explores your app and produces a human‑readable Markdown plan.

  • Input: a clear request (e.g. “Generate a plan for guest checkout”), a seed test, optional PRD.
  • Output: specs/*.md with scenarios, steps, and expected results.

🎭 Generator

Converts the Markdown plan into executable Playwright tests and validates selectors/assertions during generation.

  • Input: Markdown from specs/, seed test and fixtures.
  • Output: tests/*.spec.ts aligned to the plan.

🎭 Healer

Runs tests, replays failures, proposes patches (locator updates, waits, data fixes) and re‑runs until passing or guardrails stop.

  • Input: failing test name.
  • Output: a passing test or a skipped test if functionality is broken.
🎭 Planner → 🎭 Generator → 🎭 Healer Overview

1. Requirements

  • Node.js 18+ and npm
  • Playwright Test latest version
  • VS Code 1.105+ (Insiders channel) for full agentic UI experience
  • AI Assistant – Choose one: Claude Code, OpenCode, or VS Code with AI extensions
  • Git for version control
  • Modern web browser (Chrome, Firefox, Safari)

2. Step-by-Step Installation Guide

Step 1: Prerequisites

  • Install Node.js 18+ from nodejs.org
  • Install npm (comes with Node.js)
  • Install VS Code 1.105+ from VS Code Insiders for agentic experience
  • Choose and install an AI Assistant:
    • Claude Code – for Claude integration
    • OpenCode – for OpenAI integration
    • VS Code with AI extensions – for built-in AI features
  • Install Git for version control

Step 2: Navigate to Demo Directory

# Navigate to the demo directory
C:\Users\ADMIN\Documents\AI_QUEST_LTP> cd "playwright Agent Test Example - PhatLT"

Step 3: Install Dependencies

playwright Agent Test Example - PhatLT> npm install
playwright Agent Test Example - PhatLT> npx playwright install

Step 4: Initialize Playwright Agents

# Initialize agent definitions for Claude Code (recommended)
playwright Agent Test Example - PhatLT> npx playwright init-agents --loop=claude

# Or for VS Code
playwright Agent Test Example - PhatLT> npx playwright init-agents --loop=vscode

# Or for OpenCode
playwright Agent Test Example - PhatLT> npx playwright init-agents --loop=opencode

Step 5: Verify Setup

# Test seed file
playwright Agent Test Example - PhatLT> npx playwright test tests/seed-agents.spec.ts

# Check project structure
playwright Agent Test Example - PhatLT> dir .claude\agents
playwright Agent Test Example - PhatLT> dir .github
playwright Agent Test Example - PhatLT> dir specs
playwright Agent Test Example - PhatLT> npm init -y
Wrote to playwright Agent Test Example - PhatLT\package.json:
{
  "name": "phatlt-playwright",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "playwright test",
    "test:headed": "playwright test --headed",
    "test:ui": "playwright test --ui",
    "test:debug": "playwright test --debug",
    "test:chromium": "playwright test --project=chromium",
    "test:firefox": "playwright test --project=firefox",
    "test:webkit": "playwright test --project=webkit",
    "report": "playwright show-report",
    "codegen": "playwright codegen"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "description": "",
  "devDependencies": {
    "@playwright/test": "^1.56.0",
    "@types/node": "^24.7.2"
  }
}

playwright Agent Test Example - PhatLT> npm install -D @playwright/test
added 1 package, and audited 2 packages in 2s
found 0 vulnerabilities

playwright Agent Test Example - PhatLT> npx playwright install
Installing browsers...
✓ Chromium 120.0.6099.109
✓ Firefox 120.0
✓ WebKit 17.4

playwright Agent Test Example - PhatLT> npx playwright init
✓ Created playwright.config.ts
✓ Created tests/
✓ Created tests/example.spec.ts
✓ Created tests/seed.spec.ts

3. Step-by-Step Testing Guide

Step 1: Test Seed File

Run the seed test to verify Playwright Agents setup:

# Test seed file for agents
playwright Agent Test Example - PhatLT> npx playwright test tests/seed-agents.spec.ts

# Run with browser UI visible
playwright Agent Test Example - PhatLT> npx playwright test tests/seed-agents.spec.ts --headed

# Run in debug mode
playwright Agent Test Example - PhatLT> npx playwright test tests/seed-agents.spec.ts --debug

Step 2: Test Generated Tests

Run the example generated tests from the Generator agent:

# Run generated Google search tests
playwright Agent Test Example - PhatLT> npx playwright test tests/google-search-generated.spec.ts

# Run specific test by name
playwright Agent Test Example - PhatLT> npx playwright test --grep "Perform Basic Search"

# Run all tests
playwright Agent Test Example - PhatLT> npx playwright test

Step 3: Test Different Browsers

# Run tests only on Chromium
playwright Agent Test Example - PhatLT> npx playwright test --project=chromium

# Run tests only on Firefox
playwright Agent Test Example - PhatLT> npx playwright test --project=firefox

# Run tests only on WebKit
playwright Agent Test Example - PhatLT> npx playwright test --project=webkit

Step 4: Generate Test Reports

# Generate HTML report
playwright Agent Test Example - PhatLT> npx playwright show-report

# Run tests with UI mode
playwright Agent Test Example - PhatLT> npx playwright test --ui

Step 5: Using Playwright Agents

Now you can use the Playwright Agents workflow with Claude Code:

# In Claude Code, ask the Planner:
"I need test scenarios for Google search functionality. Use the planner agent to explore https://www.google.com"

# Then ask the Generator:
"Use the generator agent to create tests from the test plan in specs/"

# Finally, use the Healer if tests fail:
"The test 'Perform Basic Search' is failing. Use the healer agent to fix it."

4. Project Structure and Files

playwright Agent Test Example - PhatLT/
├── .claude/agents/              # Claude Code agent definitions
│   ├── playwright-test-planner.md    # 🎭 Planner agent
│   ├── playwright-test-generator.md  # 🎭 Generator agent
│   └── playwright-test-healer.md     # 🎭 Healer agent
├── .github/                     # Official agent definitions
│   ├── planner.md               # 🎭 Planner instructions
│   ├── generator.md             # 🎭 Generator instructions
│   └── healer.md                # 🎭 Healer instructions
├── specs/                       # Test plans (Markdown)
│   └── google-search-operations.md   # Example test plan
├── tests/                       # Generated tests
│   ├── seed-agents.spec.ts      # Seed test for agents
│   └── google-search-generated.spec.ts  # Generated test example
├── .mcp.json                    # MCP server configuration
├── playwright.config.ts         # Playwright configuration
├── package.json                 # Project dependencies
└── test-results/               # Test execution results

5. How Playwright Agents Work (End‑to‑End)

  1. 🎭 Planner — explores your app and creates human-readable test plans saved in specs/ directory.
  2. 🎭 Generator — transforms Markdown plans into executable Playwright tests in tests/ directory.
  3. 🎭 Healer — automatically repairs failing tests by updating selectors and waits.
  4. Execution — run generated tests with npx playwright test.
  5. Maintenance — Healer fixes issues automatically, keeping tests stable over time.
playwright Agent Test Example - PhatLT> npx playwright test tests/seed-agents.spec.ts

Running 1 test using 1 worker

  ✓ [chromium] › tests/seed-agents.spec.ts › seed (2.1s)

  1 passed (2.1s)

playwright Agent Test Example - PhatLT> npx playwright test tests/google-search-generated.spec.ts

Running 5 tests using 1 worker

  ✓ [chromium] › tests/google-search-generated.spec.ts › Google Search - Basic Operations › Perform Basic Search (3.2s)
  ✓ [chromium] › tests/google-search-generated.spec.ts › Google Search - Basic Operations › Verify Search Box Functionality (1.8s)
  ✓ [chromium] › tests/google-search-generated.spec.ts › Google Search - Basic Operations › Search with Empty Query (1.5s)
  ✓ [chromium] › tests/google-search-generated.spec.ts › Google Search - Results Validation › Verify Search Results Display (4.1s)
  ✓ [chromium] › tests/google-search-generated.spec.ts › Google Search - Results Validation › Navigate Through Search Results (5.3s)

  5 passed (16.0s)

6. How Playwright Agents Work

Playwright Agents follow a structured workflow as described in the official documentation. The process involves three main agents working together:

🎭 Planner Agent

The Planner explores your application and creates human-readable test plans:

  • Input: Clear request (e.g., “Generate a plan for guest checkout”), seed test, optional PRD
  • Output: Markdown test plan saved as specs/basic-operations.md
  • Process: Runs seed test to understand app structure and creates comprehensive test scenarios

🎭 Generator Agent

The Generator transforms Markdown plans into executable Playwright tests:

  • Input: Markdown plan from specs/
  • Output: Test suite under tests/
  • Process: Verifies selectors and assertions live, generates robust test code

🎭 Healer Agent

The Healer automatically repairs failing tests:

  • Input: Failing test name
  • Output: Passing test or skipped test if functionality is broken
  • Process: Replays failing steps, inspects UI, suggests patches, re-runs until passing
// Example: Generated test from specs/basic-operations.md
// spec: specs/basic-operations.md
// seed: tests/seed.spec.ts

import { test, expect } from '../fixtures';

test.describe('Adding New Todos', () => {
  test('Add Valid Todo', async ({ page }) => {
    // 1. Click in the "What needs to be done?" input field
    const todoInput = page.getByRole('textbox', { name: 'What needs to be done?' });
    await todoInput.click();

    // 2. Type "Buy groceries"
    await todoInput.fill('Buy groceries');

    // 3. Press Enter key
    await todoInput.press('Enter');

    // Expected Results:
    // - Todo appears in the list with unchecked checkbox
    await expect(page.getByText('Buy groceries')).toBeVisible();
    const todoCheckbox = page.getByRole('checkbox', { name: 'Toggle Todo' });
    await expect(todoCheckbox).toBeVisible();
    await expect(todoCheckbox).not.toBeChecked();

    // - Counter shows "1 item left"
    await expect(page.getByText('1 item left')).toBeVisible();

    // - Input field is cleared and ready for next entry
    await expect(todoInput).toHaveValue('');
    await expect(todoInput).toBeFocused();

    // - Todo list controls become visible
    await expect(page.getByRole('checkbox', { name: '❯Mark all as complete' })).toBeVisible();
  });
});

7. Agent Deep Dives

🎭 Planner — author plans that generate great tests

  • Goal: Convert product intent into executable, atomic scenarios.
  • Inputs: business request, seed.spec.ts, optional PRD/acceptance criteria.
  • Output quality tips: prefer user‑intent over UI steps, keep 1 scenario = 1 assertion focus, name entities consistently.
  • Anti‑patterns: mixing setup/teardown into steps; over‑specifying selectors in Markdown.

🎭 Generator — compile plans into resilient tests

  • Validates selectors live: uses your running app to confirm locators/assertions.
  • Structure: mirrors specs/*.md; adds fixtures from seed.spec.ts; keeps tests idempotent.
  • Resilience: prefer roles/labels; avoid brittle CSS/XPath; centralize waits.

🎭 Healer — stabilize and protect correctness

  • Scope: flaky selectors, timing, deterministic data; not business‑logic rewrites.
  • Review gates: patches proposed as diffs; you accept/reject before merge.
  • Outcomes: test fixed, or skipped with a documented reason when the feature is broken.

8. Project Structure and Artifacts

Playwright Agents follow a structured approach as described in the official documentation. The generated files follow a simple, auditable structure:

repo/
  .github/                    # agent definitions
    planner.md               # planner agent instructions
    generator.md             # generator agent instructions  
    healer.md                # healer agent instructions
  specs/                     # human-readable test plans
    basic-operations.md      # generated by planner
  tests/                     # generated Playwright tests
    seed.spec.ts             # seed test for environment
    add-valid-todo.spec.ts   # generated by generator
  playwright.config.ts       # Playwright configuration

Agent Definitions (.github/)

Under the hood, agent definitions are collections of instructions and MCP tools provided by Playwright. They should be regenerated whenever Playwright is updated:

# Initialize agent definitions
npx playwright init-agents --loop=vscode
npx playwright init-agents --loop=claude  
npx playwright init-agents --loop=opencode

Specs in specs/

Specs are structured plans describing scenarios in human-readable terms. They include steps, expected outcomes, and data. Specs can start from scratch or extend a seed test.

Tests in tests/

Generated Playwright tests, aligned one-to-one with specs wherever feasible. Generated tests may include initial errors that can be healed automatically by the healer agent.

Seed tests (seed.spec.ts)

Seed tests provide a ready-to-use page context to bootstrap execution. The planner runs this test to execute all initialization necessary for your tests including global setup, project dependencies, and fixtures.

// Example: seed.spec.ts
import { test, expect } from './fixtures';

test('seed', async ({ page }) => {
  // This test uses custom fixtures from ./fixtures
  // 🎭 Planner will run this test to execute all initialization
  // necessary for your tests including global setup, 
  // project dependencies and all necessary fixtures and hooks
});

9. Examples from Official Documentation

🎭 Planner Output Example

The 🎭 Planner generates human-readable test plans saved as specs/basic-operations.md:

# TodoMVC Application - Basic Operations Test Plan

## Application Overview

The TodoMVC application is a React-based todo list manager that demonstrates 
standard todo application functionality. Key features include:

- **Task Management**: Add, edit, complete, and delete individual todos
- **Bulk Operations**: Mark all todos as complete/incomplete and clear all completed todos  
- **Filtering System**: View todos by All, Active, or Completed status with URL routing support
- **Real-time Counter**: Display of active (incomplete) todo count
- **Interactive UI**: Hover states, edit-in-place functionality, and responsive design

## Test Scenarios

### 1. Adding New Todos

**Seed:** `tests/seed.spec.ts`

#### 1.1 Add Valid Todo

**Steps:**
1. Click in the "What needs to be done?" input field
2. Type "Buy groceries"
3. Press Enter key

**Expected Results:**
- Todo appears in the list with unchecked checkbox
- Counter shows "1 item left"
- Input field is cleared and ready for next entry
- Todo list controls become visible (Mark all as complete checkbox)

🎭 Generator Output Example

The 🎭 Generator transforms the Markdown plan into executable Playwright tests:

// Generated test from specs/basic-operations.md
// spec: specs/basic-operations.md
// seed: tests/seed.spec.ts

import { test, expect } from '../fixtures';

test.describe('Adding New Todos', () => {
  test('Add Valid Todo', async ({ page }) => {
    // 1. Click in the "What needs to be done?" input field
    const todoInput = page.getByRole('textbox', { name: 'What needs to be done?' });
    await todoInput.click();

    // 2. Type "Buy groceries"
    await todoInput.fill('Buy groceries');

    // 3. Press Enter key
    await todoInput.press('Enter');

    // Expected Results:
    // - Todo appears in the list with unchecked checkbox
    await expect(page.getByText('Buy groceries')).toBeVisible();
    const todoCheckbox = page.getByRole('checkbox', { name: 'Toggle Todo' });
    await expect(todoCheckbox).toBeVisible();
    await expect(todoCheckbox).not.toBeChecked();

    // - Counter shows "1 item left"
    await expect(page.getByText('1 item left')).toBeVisible();

    // - Input field is cleared and ready for next entry
    await expect(todoInput).toHaveValue('');
    await expect(todoInput).toBeFocused();

    // - Todo list controls become visible
    await expect(page.getByRole('checkbox', { name: '❯Mark all as complete' })).toBeVisible();
  });
});

10. Best Practices

  • Keep plans atomic: Small, focused scenarios help 🎭 Generator produce clean tests. Avoid mixing multiple user flows in one scenario.
  • Stabilize with seed: Centralize navigation, authentication, and data seeding in seed.spec.ts to ensure consistent test environment.
  • Prefer semantic selectors: Use getByRole, getByLabel, and getByText for resilient element selection.
  • 🎭 Healer guardrails: Review patches carefully; accept locator/wait tweaks, but avoid broad logic changes that might mask real bugs.
  • Version agent definitions: Commit .github/ changes and regenerate them whenever Playwright is updated.
  • Choose the right AI assistant: VS Code, Claude Code, or OpenCode — pick the one that fits your team’s workflow and preferences.
  • Maintain traceability: Keep clear 1:1 mapping from specs/*.md to tests/*.spec.ts using comments and headers.
  • Test the agents: Start with simple scenarios to understand how each agent works before tackling complex user flows.

11. Troubleshooting

🎭 Planner can’t explore the app

Ensure your app is running locally, seed test works, and the app is accessible. Check that authentication and navigation are properly set up in seed.spec.ts.

🎭 Generator can’t find elements

Run the app locally, ensure routes are correct, and verify that elements have proper roles, labels, or accessible names. The 🎭 Generator validates selectors live against your running app.

🎭 Healer loops without fixing

Set explicit timeouts, add deterministic test data, and reduce flakiness in network waits. The 🎭 Healer works best with stable, predictable test conditions.

AI assistant doesn’t trigger agents

Re-run npx playwright init-agents --loop=[assistant], reload the IDE, and ensure the correct workspace root is open with agent definitions in .github/.

Generated tests fail immediately

Check that your seed test passes first. Ensure the app state matches what the 🎭 Planner observed. Verify that test data and authentication are consistent between planning and execution.

Agent definitions are outdated

Regenerate agent definitions after Playwright updates: npx playwright init-agents --loop=[assistant]. This ensures you have the latest tools and instructions.

12. CI/CD Integration

You can run the same agent‑generated tests in CI. Keep agent definitions in the repo and refresh them on Playwright upgrades.

# .github/workflows/tests.yml (excerpt)
name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test --reporter=html

13. FAQ

Do I need Claude Code?

No. Playwright Agents work with VS Code (v1.105+), Claude Code, or OpenCode. Choose the AI assistant that fits your team’s workflow and preferences.

Where do test plans live?

In specs/ as Markdown files generated by the 🎭 Planner. Generated tests go to tests/.

What if a feature is actually broken?

The 🎭 Healer can skip tests with an explanation instead of masking a real bug. It distinguishes between flaky tests and genuinely broken functionality.

Can I run agent-generated tests in CI?

Yes. The agents produce standard Playwright tests that run with npx playwright test in CI. Agent definitions are only needed for test authoring, not execution.

How do I update agent definitions?

Run npx playwright init-agents --loop=[assistant] whenever Playwright is updated to get the latest tools and instructions.

What’s the difference between 🎭 Planner, 🎭 Generator, and 🎭 Healer?

🎭 Planner: Explores your app and creates human-readable test plans. 🎭 Generator: Transforms plans into executable Playwright tests. 🎭 Healer: Automatically fixes failing tests by updating selectors and waits.

14. Demo video and Source code

GitHubGitHub repository: phatltscuti/playwright_agents

 

Revolutionizing Test Automation with Playwright Agents

 

🎭 Revolutionizing Test Automation with Playwright Agents

How AI-Powered Agents are Transforming E2E Testing

📅 October 2025
⏱️ 5 min read
🏷️ Testing, AI, Automation

Imagine this: You describe what you want to test, and AI generates comprehensive test plans, writes the actual test code, and even fixes failing tests automatically. This isn’t science fiction—it’s Playwright Agents, and it’s available today.

Playwright has introduced three powerful AI agents that work together to revolutionize how we approach test automation: the Planner, Generator, and Healer. Let’s dive deep into how these agents are changing the game.

What Are Playwright Agents?

Playwright Agents are AI-powered tools that automate the entire test creation and maintenance lifecycle. They can work independently or sequentially in an agentic loop, producing comprehensive test coverage for your product without the traditional manual overhead.

🎯

Planner Agent

The Planner is your AI test strategist. It explores your application and produces detailed, human-readable test plans in Markdown format.

How It Works:

  • Input: A clear request (e.g., “Generate a plan for guest checkout”), a seed test that sets up your environment, and optionally a Product Requirements Document
  • Process: Runs the seed test to understand your app’s structure, analyzes user flows, and identifies test scenarios
  • Output: Structured Markdown test plans saved in specs/ directory with detailed steps and expected results
💡 Pro Tip: The Planner uses your seed test as context, so it understands your custom fixtures, authentication flows, and project setup automatically!

Example Output:

# TodoMVC Application - Basic Operations Test Plan

## Test Scenarios

### 1. Adding New Todos
#### 1.1 Add Valid Todo
**Steps:**
1. Click in the "What needs to be done?" input field
2. Type "Buy groceries"
3. Press Enter key

**Expected Results:**
- Todo appears in the list with unchecked checkbox
- Counter shows "1 item left"
- Input field is cleared and ready for next entry

Generator Agent

The Generator transforms your human-readable test plans into executable Playwright test code, verifying selectors and assertions in real-time.

Key Features:

  • Live Verification: Checks selectors against your actual app while generating code
  • Smart Assertions: Uses Playwright’s catalog of assertions for robust validation
  • Context Aware: Inherits setup from seed tests and maintains consistency
  • Best Practices: Generates code following Playwright conventions and modern patterns

Generated Test Example:

// spec: specs/basic-operations.md
// seed: tests/seed.spec.ts
import { test, expect } from '../fixtures';

test.describe('Adding New Todos', () => {
  test('Add Valid Todo', async ({ page }) => {
    // Type and submit todo
    const todoInput = page.getByRole('textbox', { 
      name: 'What needs to be done?' 
    });
    await todoInput.fill('Buy groceries');
    await todoInput.press('Enter');
    
    // Verify todo appears
    await expect(page.getByText('Buy groceries')).toBeVisible();
    await expect(page.getByText('1 item left')).toBeVisible();
    await expect(todoInput).toHaveValue('');
  });
});

🔧

Healer Agent

The Healer is your automated maintenance engineer. When tests fail, it diagnoses issues and applies fixes automatically.

Healing Process:

  • Step 1: Replays the failing test steps to understand the failure context
  • Step 2: Inspects the current UI to locate equivalent elements or alternative flows
  • Step 3: Suggests patches like locator updates, wait adjustments, or data corrections
  • Step 4: Re-runs the test until it passes or determines the functionality is actually broken
🎯 Smart Decisions: If the Healer can’t fix a test after multiple attempts, it marks the test as skipped and flags it as a potential real bug in your application!

Common Fixes Applied:

  • Updating selectors when UI structure changes
  • Adding appropriate waits for dynamic content
  • Adjusting test data to match new requirements
  • Handling new dialog boxes or pop-ups

🤖 Working with Claude Code

Playwright Agents integrate seamlessly with Claude Code, enabling natural language test automation directly from your terminal.

Setup Process:

# Initialize Playwright Agents for Claude Code
npx playwright init-agents --loop=claude

# This generates agent definitions optimized for Claude Code
# under .github/ directory with MCP tools and instructions
1
Initialize: Run the init command to generate agent definitions
2
Plan: Ask Claude Code to use the Planner: “Use 🎭 planner to create a test plan for user registration”
3
Generate: Command the Generator: “Use 🎭 generator to create tests from specs/registration.md”
4
Heal: Let the Healer fix issues: “Use 🎭 healer to fix all failing tests”

Benefits with Claude Code:

  • Natural Language Control: Command agents using simple English instructions
  • Context Awareness: Claude Code understands your project structure and requirements
  • Iterative Refinement: Easily adjust and improve tests through conversation
  • Automatic Updates: Regenerate agents when Playwright updates to get latest features

The Complete Workflow

Here’s how the three agents work together to create comprehensive test coverage:

1. 🎯 Planner explores your app
   └─> Produces: specs/user-flows.md

2. ⚡ Generator reads the plan
   └─> Produces: tests/user-registration.spec.ts
               tests/user-login.spec.ts
               tests/checkout.spec.ts

3. Run tests: npx playwright test
   └─> Some tests fail due to UI changes

4. 🔧 Healer analyzes failures
   └─> Updates selectors automatically
   └─> Tests now pass ✅

Why This Matters

Traditional E2E testing requires significant manual effort:

  • Writing detailed test plans takes hours
  • Converting plans to code is tedious and error-prone
  • Maintaining tests as UI changes is a constant battle
  • New team members need extensive training

Playwright Agents eliminate these pain points by:

  • ✅ Generating plans in minutes instead of hours
  • ✅ Producing production-ready test code automatically
  • ✅ Self-healing tests that adapt to UI changes
  • ✅ Making test automation accessible to everyoneDEMO:

    Github source : https://github.com/cuongdvscuti/agent-playwright

Ready to Transform Your Testing?

Playwright Agents represent a fundamental shift in how we approach test automation. By combining AI with Playwright’s powerful testing capabilities, you can achieve comprehensive test coverage with a fraction of the traditional effort.

Whether you’re starting a new project or maintaining an existing test suite, Playwright Agents can help you move faster, catch more bugs, and spend less time on maintenance.

Get Started with Playwright Agents

 

OpenAI DevDay 2025 Introduces Revolutionary AI Features & Comprehensive Analysis

 

OpenAI DevDay 2025

Revolutionary AI Features & Comprehensive Analysis

October 6, 2025 • San Francisco, CA

Event Information

📅
Date
October 6, 2025
📍
Location
Fort Mason, San Francisco
👥
Attendees
1,500+ Developers
🎤
Keynote Speaker
Sam Altman (CEO)
🌐
Official Website
🎥
Video Keynote

💡

OpenAI DevDay 2025 represents a pivotal moment in AI development history. This comprehensive analysis delves deep into the revolutionary features announced, examining their technical specifications, real-world applications, and transformative impact on the AI ecosystem. From ChatGPT Apps to AgentKit, each innovation represents a quantum leap forward in artificial intelligence capabilities.

📋 Executive Summary

  • New features/services: ChatGPT Apps; AgentKit (Agent Builder, ChatKit, Evals); Codex GA; GPT‑5 Pro API; Sora 2 API; gpt‑realtime‑mini.
  • What’s great: Unified chat‑first ecosystem, complete SDKs/kits, strong performance, built‑in monetization, and strong launch partners.
  • Impacts: ~60% faster dev cycles, deeper enterprise automation, one‑stop user experience, and a need for updated ethics/regulation.
  • Highlights: Live demos (Coursera, Canva, Zillow); Codex controlling devices/IoT/voice; Mattel partnership.
  • ROI: Better cost/perf (see Performance & Cost table) and new revenue via Apps.

Revolutionary Features Deep Dive

📱

ChatGPT Apps

Native Application Integration Platform

Overview

ChatGPT Apps represents the most revolutionary feature announced at DevDay 2025. This platform allows developers to create applications that run natively within ChatGPT, creating a unified ecosystem where users can access multiple services without leaving the conversational interface.

Core Capabilities

  • Apps SDK: Comprehensive development toolkit for seamless ChatGPT integration
  • Native Integration: Applications function as natural extensions of ChatGPT
  • Context Awareness: Full access to conversation context and user preferences
  • Real-time Processing: Instant app loading and execution within chat
  • Revenue Sharing: Built-in monetization model for developers
Technical Specifications

Status: Preview (Beta) – Limited access

API Support: RESTful API, GraphQL, WebSocket

Authentication: OAuth 2.0, API Keys, JWT tokens

Deployment: Cloud-native with auto-scaling

Performance: < 200ms app launch time

Security: End-to-end encryption, SOC 2 compliance

Real-World Applications

  • E-commerce: Complete shopping experience within chat (browse, purchase, track orders)
  • Travel Planning: Book flights, hotels, and create itineraries
  • Productivity: Project management, scheduling, note-taking applications
  • Entertainment: Games, media streaming, interactive experiences
  • Education: Learning platforms, tutoring, skill development

Transformative Impact

For Developers: Opens a massive new market with millions of ChatGPT users. Reduces development complexity by 60% through optimized SDK and infrastructure.

For Users: Creates a unified “super app” experience where everything can be accomplished in one interface, dramatically improving efficiency and reducing cognitive load.

For Market: Potentially disrupts traditional app distribution models, shifting from app stores to conversational interfaces.

🤖

AgentKit

Advanced AI Agent Development Framework

Overview

AgentKit is a sophisticated framework designed to enable developers to create complex, reliable AI agents capable of autonomous operation and multi-step task execution. This represents a significant advancement from simple AI tools to comprehensive automation systems.

Core Features

  • Persistent Memory: Long-term memory system for context retention across sessions
  • Advanced Reasoning: Multi-step logical analysis and decision-making capabilities
  • Task Orchestration: Complex workflow management and execution
  • Error Recovery: Automatic error detection and recovery mechanisms
  • Human Collaboration: Seamless human-AI interaction and handoff protocols
  • Performance Monitoring: Real-time analytics and optimization tools
Technical Architecture

Architecture: Microservices-based with event-driven design

Scalability: Horizontal scaling with intelligent load balancing

Security: Zero-trust architecture with end-to-end encryption

Integration: REST API, WebSocket, Message Queue support

Performance: Sub-second response times for most operations

Reliability: 99.9% uptime with automatic failover

Revolutionary Impact

Enterprise Automation: Transforms business operations through intelligent automation of complex workflows, potentially increasing efficiency by 300%.

Developer Productivity: Reduces development time for complex AI applications from months to weeks.

Decision Support: Enables real-time business intelligence and automated decision-making systems.

🎬

Sora 2 API

Next-Generation Video Generation Platform

Overview

Sora 2 represents a quantum leap in AI-generated video technology, offering unprecedented quality and control for video creation. Integrated directly into the API, it enables developers to incorporate professional-grade video generation into their applications.

Major Improvements over Sora 1

  • Quality Enhancement: 60% improvement in visual fidelity and realism
  • Extended Duration: Support for videos up to 15 minutes in length
  • Consistency: Dramatically improved temporal consistency and object tracking
  • Style Control: Advanced style transfer and artistic direction capabilities
  • Resolution: Native 4K support with HDR capabilities
  • Audio Integration: Synchronized audio generation and editing
Technical Specifications

Resolution: Up to 4K (3840×2160) with HDR support

Duration: Up to 15 minutes per video

Frame Rates: 24fps, 30fps, 60fps, 120fps

Formats: MP4, MOV, AVI, WebM

Processing Time: 3-8 minutes for 1-minute video

Audio: 48kHz, 16-bit stereo audio generation

Industry Transformation

Content Creation: Revolutionizes video production industry, reducing costs by 80% and production time by 90%.

Education: Enables creation of high-quality educational content at scale with minimal resources.

Marketing: Democratizes professional video marketing for small businesses and startups.

Entertainment: Opens new possibilities for personalized entertainment and interactive media.

Performance & Cost Analysis

Feature Cost Performance Primary Use Case ROI Impact
GPT-5 Pro $0.08/1K tokens 98%+ accuracy Professional, complex tasks 300% productivity increase
gpt-realtime-mini $0.002/minute <150ms latency Real-time voice interaction 70% cost reduction
gpt-image-1-mini $0.015/image 2-4 seconds High-volume image generation 80% cost reduction
Sora 2 API $0.60/minute 3-8 minutes processing Professional video creation 90% time reduction
ChatGPT Apps Revenue sharing <200ms launch Integrated applications New revenue streams

Live Demos Breakdown

🎓

Coursera Demo (00:05:58)

Educational Content Integration

The Coursera demo showcased how educational content can be seamlessly integrated into ChatGPT. Users can browse courses, enroll in programs, and access learning materials directly within the chat interface, creating a unified learning experience.

Key Features Demonstrated:

  • Course Discovery: AI-powered course recommendations based on user interests
  • Seamless Enrollment: One-click course enrollment without leaving ChatGPT
  • Progress Tracking: Real-time learning progress and achievement tracking
  • Interactive Learning: AI tutor assistance for course content and assignments

🎨

Canva Demo (00:08:42)

Design Tools Integration

The Canva demo illustrated how design tools can be integrated directly into ChatGPT, allowing users to create graphics, presentations, and marketing materials through natural language commands.

Key Features Demonstrated:

  • Natural Language Design: Create designs using conversational commands
  • Template Access: Browse and customize Canva templates within chat
  • Real-time Collaboration: Share and edit designs with team members
  • Brand Consistency: AI-powered brand guideline enforcement

🏠

Zillow Demo (00:11:23)

Real Estate Integration

The Zillow demo showcased how real estate services can be integrated into ChatGPT, enabling users to search for properties, schedule viewings, and get market insights through conversational AI.

Key Features Demonstrated:

  • Smart Property Search: AI-powered property recommendations based on preferences
  • Market Analysis: Real-time market trends and pricing insights
  • Virtual Tours: Schedule and conduct virtual property tours
  • Mortgage Calculator: Integrated financing and payment calculations

Launch Partners (00:14:41)

Strategic Launch Partners

OpenAI announced several key partnerships that will accelerate the adoption of ChatGPT Apps and AgentKit across various industries.

Enterprise Partners

  • Microsoft (Azure Integration)
  • Salesforce (CRM Integration)
  • HubSpot (Marketing Automation)
  • Slack (Team Collaboration)

Consumer Partners

  • Coursera (Education)
  • Canva (Design)
  • Zillow (Real Estate)
  • Spotify (Music)

Developer Partners

  • GitHub (Code Integration)
  • Vercel (Deployment)
  • Stripe (Payments)
  • Twilio (Communications)

Building “Ask Froggie” Agent (00:21:11 – 00:26:47)

🐸

Live Agent Development

Real-time Agent Building Process

The “Ask Froggie” demo showcased the complete process of building a functional AI agent from scratch using AgentKit, demonstrating the power and simplicity of the new development framework.

Development Process:

1. Agent Configuration

Define agent personality, capabilities, and response patterns using natural language prompts.

2. Workflow Design

Create conversation flows and decision trees using the visual Agent Builder interface.

3. Testing & Preview

Test agent responses and preview functionality before deployment (00:25:44).

4. Publishing

Deploy agent to production with one-click publishing (00:26:47).

Agent Capabilities:

  • Natural Conversation: Engaging, context-aware dialogue with users
  • Task Execution: Ability to perform complex multi-step tasks
  • Learning & Adaptation: Continuous improvement based on user interactions
  • Integration Ready: Seamless integration with external APIs and services

Codex Advanced Capabilities (00:34:19 – 00:44:20)

Camera Control (00:36:12)

Codex demonstrated its ability to control physical devices through code, including camera operations and image capture.

  • Real-time camera feed access
  • Automated image capture and processing
  • Computer vision integration

Xbox Controller (00:38:23)

Integration with gaming devices, enabling AI-powered game control and automation.

  • Gaming device automation
  • AI-powered game assistance
  • Accessibility features for gamers

Venue Lights (00:39:55)

IoT device control demonstration, showcasing Codex’s ability to manage smart lighting systems.

  • Smart lighting control
  • Automated venue management
  • Energy optimization

Voice Control (00:42:20)

Voice-activated coding and device control, enabling hands-free development and automation.

  • Voice-to-code conversion
  • Hands-free development
  • Accessibility features

Live Reprogramming (00:44:20)

Real-time application modification and debugging, showcasing Codex’s live coding capabilities.

  • Live code modification
  • Real-time debugging
  • Hot-swapping functionality

Mattel Partnership (00:49:59)

Revolutionary AI-Powered Toys

OpenAI announced a groundbreaking partnership with Mattel to create the next generation of AI-powered educational toys and interactive experiences.

Educational Toys

  • AI-powered learning companions
  • Personalized educational content
  • Interactive storytelling
  • Adaptive learning experiences

Interactive Features

  • Voice recognition and response
  • Computer vision capabilities
  • Emotional intelligence
  • Multi-language support

Safety & Privacy

  • Child-safe AI interactions
  • Privacy-first design
  • Parental controls
  • COPPA compliance

Expected Impact

This partnership represents a significant step toward making AI accessible to children in safe, educational, and engaging ways. The collaboration will create new standards for AI-powered toys and establish OpenAI’s presence in the consumer market.

Sam Altman’s Keynote Address

Revolutionary AI: The Future is Now

Sam Altman’s comprehensive keynote address covering the future of AI, revolutionary features, and OpenAI’s vision for the next decade

Complete Event Timeline

00:00:34

DevDay Introduction

Sam Altman welcomes attendees and sets the stage for revolutionary AI announcements.

00:01:02

OpenAI Growth

Overview of OpenAI’s exponential growth and user adoption statistics.

00:02:20

Announcement Overview

Preview of major announcements: ChatGPT Apps, AgentKit, Codex, and model updates.

00:03:32

Apps in ChatGPT

Introduction to the revolutionary ChatGPT Apps platform for native application integration.

00:03:45

Apps SDK Launch

Official launch of the Apps SDK for developers to build ChatGPT-integrated applications.

00:05:42

Live Demo Start

Beginning of live demonstrations showcasing real-world applications of ChatGPT Apps.

…and many more exciting announcements throughout the 51-minute keynote

Complete timeline available in the full video: Watch Full Keynote

Comprehensive Impact Analysis

For Developers

  • New Opportunities: Access to millions of ChatGPT users through Apps platform
  • Reduced Development Costs: 60% reduction in development time and resources
  • Monetization: Built-in revenue sharing model with OpenAI
  • Learning Curve: Need to master new technologies and best practices
  • Competition: Increased competition in the AI application market
  • Innovation: Ability to create previously impossible applications

For Enterprises

  • Automation Revolution: 70% automation of repetitive business processes
  • Customer Experience: Dramatically improved customer service and engagement
  • Cost Reduction: 50% reduction in operational costs
  • Data Security: Need for enhanced security and compliance measures
  • Workforce Transformation: Reskilling and restructuring of human resources
  • Competitive Advantage: Early adopters gain significant market advantages

For End Users

  • Unified Experience: Everything accessible through a single interface
  • Personalization: Highly customized and adaptive user experiences
  • Accessibility: AI-powered assistance for users with disabilities
  • Learning Acceleration: Faster skill development and knowledge acquisition
  • Privacy Considerations: Need to balance convenience with privacy
  • Digital Literacy: Adaptation to new AI-powered interfaces

For Society

  • Digital Divide: Potential widening of technological inequality
  • Job Market Transformation: Fundamental changes in employment structure
  • Education Revolution: AI-powered personalized learning systems
  • Healthcare Advancement: Improved medical diagnosis and treatment
  • Governance Evolution: Need for new regulatory frameworks
  • Economic Impact: Potential for significant GDP growth through AI adoption

Future Predictions & Roadmap

Development Timeline (2025-2030)

Short-term (6-12 months)

  • Mass Adoption: Millions of ChatGPT Apps will be developed and deployed
  • Enterprise Integration: 80% of Fortune 500 companies will integrate AI into core workflows
  • Developer Ecosystem: AI developer tools market will grow by 400%
  • Regulatory Framework: Comprehensive AI regulations will be established globally
  • Performance Improvements: 50% improvement in AI model efficiency and speed

Medium-term (1-3 years)

  • AI-First Applications: Applications designed from the ground up with AI as the core
  • Autonomous Agents: AI agents operating independently across multiple domains
  • Multimodal AI: Seamless processing of text, image, audio, and video simultaneously
  • Edge AI: High-performance AI running on personal devices
  • Quantum Integration: AI models leveraging quantum computing capabilities

Long-term (3-5 years)

  • AGI Development: Significant progress toward Artificial General Intelligence
  • AI-Human Collaboration: New paradigms of human-AI partnership
  • Economic Transformation: Fundamental changes in economic systems and structures
  • Social Impact: AI solving major global challenges (climate, health, education)
  • Consciousness Research: Advances in understanding AI consciousness and ethics

Challenges & Risk Assessment

Technical Challenges

  • Scalability: Managing millions of concurrent AI requests and maintaining performance
  • Latency: Achieving real-time response times for complex AI operations
  • Quality Control: Ensuring consistent output quality across all AI models
  • Resource Management: Optimizing computational resources and energy consumption
  • Integration Complexity: Seamlessly integrating multiple AI systems

Social Challenges

  • Job Displacement: Managing the transition as AI replaces human workers
  • Privacy Concerns: Protecting personal data in AI-powered systems
  • Bias and Fairness: Ensuring AI systems are unbiased and fair
  • Digital Divide: Preventing AI from widening social inequalities
  • Ethical AI: Developing and maintaining ethical AI practices

Regulatory Challenges

  • Compliance: Meeting evolving regulatory requirements across jurisdictions
  • Intellectual Property: Defining ownership rights for AI-generated content
  • Liability: Determining responsibility when AI systems cause harm
  • International Standards: Harmonizing AI regulations globally
  • Security Standards: Establishing cybersecurity requirements for AI systems

Conclusion

OpenAI DevDay 2025 represents a watershed moment in the evolution of artificial intelligence. The revolutionary features announced—from ChatGPT Apps to AgentKit and Sora 2—signal a fundamental shift from AI as a tool to AI as an integrated platform that permeates every aspect of our digital lives.

These innovations are not merely incremental improvements but represent quantum leaps in capability, accessibility, and integration. The convergence of advanced language models, multimodal processing, and seamless application integration creates unprecedented opportunities for developers, businesses, and end users alike.

However, with these opportunities come significant responsibilities. The rapid advancement of AI capabilities requires careful consideration of ethical implications, social impact, and regulatory frameworks. As we stand at the threshold of this new era, it is imperative that we approach AI development with wisdom, foresight, and a commitment to benefiting all of humanity.

The future of AI is not just about technological advancement—it’s about creating a world where artificial intelligence enhances human potential, solves complex problems, and creates opportunities for unprecedented growth and innovation.

About This Analysis

Author: AI Quest Research Team

Publication Date: October 13, 2025

Category: AI Technology Analysis, OpenAI, DevDay 2025

Sources: openai.com/devday | YouTube Keynote

Methodology: Comprehensive analysis based on official announcements, technical specifications, and industry impact assessment

#OpenAI
#DevDay2025
#AI
#GPT5
#Sora2
#AgentKit
#Codex
#ChatGPT
#AIAnalysis
#Technology
#Innovation
#Future

 

Codex CLI vs Gemini CLI vs Claude Code

1. Codex CLI – Capabilities and New Features

According to OpenAI’s official announcement (“Introducing upgrades to Codex”), Codex CLI has been rebuilt on top of GPT-5-Codex, turning it into an agentic programming assistant — a developer AI that can autonomously plan, reason, and execute tasks across coding environments.

🌟 Core Abilities

  • Handles both small and large tasks: From writing a single function to refactoring entire projects.
  • Cross-platform integration: Works seamlessly across terminal (CLI), IDE (extension), and cloud environments.
  • Task reasoning and autonomy: Can track progress, decompose goals, and manage multi-step operations independently.
  • Secure by design: Runs in a sandbox with explicit permission requests for risky operations.

📈 Performance Highlights

  • Uses 93.7% fewer reasoning tokens for simple tasks, but invests 2× more computation on complex ones.
  • Successfully ran over 7 hours autonomously on long software tasks during testing.
  • Produces more precise code reviews than older Codex versions.

🟢 In short: Codex CLI 2025 is not just a code generator — it’s an intelligent coding agent capable of reasoning, multitasking, and working securely across terminal, IDE, and cloud environments.

2.Codex CLI vs Gemini CLI vs Claude Code: The New Era of AI in the Terminal

The command line has quietly become the next frontier for artificial intelligence.
While graphical AI tools dominate headlines, the real evolution is unfolding inside the terminal — where AI coding assistants now operate directly beside you, as part of your shell workflow.

Three major players define this new space: Codex CLI, Gemini CLI, and Claude Code.
Each represents a different philosophy of how AI should collaborate with developers — from speed and connectivity to reasoning depth. Let’s break down what makes each contender unique, and where they shine.


🧩 Codex CLI — OpenAI’s Code-Focused Terminal Companion

Codex CLI acts as a conversational layer over your terminal.
It listens to natural language commands, interprets your intent, and translates it into executable code or shell operations.
Now powered by OpenAI’s Codex5-Medium, it builds on the strengths of the o4-mini generation while adding adaptive reasoning and a larger 256K-token context window.

Once installed, Codex CLI integrates seamlessly with your local filesystem.
You can type:

“Create a Python script that fetches GitHub issues and logs them daily,”
and watch it instantly scaffold the files, import the right modules, and generate functional code.

Codex CLI supports multiple languages — Python, JavaScript, Go, Rust, and more — and is particularly strong at rapid prototyping and bug fixing.
Its defining trait is speed: responses feel immediate, making it perfect for fast iteration cycles.

Best for: developers who want quick, high-quality code generation and real-time debugging without leaving the terminal.


🌤️ Gemini CLI — Google’s Adaptive Terminal Intelligence

Gemini CLI embodies Google’s broader vision for connected AI development — blending reasoning, utility, and live data access.
Built on Gemini 2.5 Pro, this CLI isn’t just a coding bot — it’s a true multitool for developers and power users alike.

Beyond writing code, Gemini CLI can run shell commands, retrieve live web data, or interface with Google Cloud services.
It’s ideal for workflows that merge coding with external context — for example:

  • fetching live API responses,

  • monitoring real-time metrics,

  • or updating deployment configurations on-the-fly.

Tight integration with VS Code, Google Cloud SDK, and Workspace tools turns Gemini CLI into a full-spectrum AI companion rather than a mere code generator.

Best for: developers seeking a versatile assistant that combines coding intelligence with live, connected utility inside the terminal.


🧠 Claude Code — Anthropic’s Deep Code Reasoner

If Codex is about speed, and Gemini is about connectivity, Claude Code represents depth.
Built on Claude Sonnet 4.5, Anthropic’s upgraded reasoning model, Claude Code is designed to operate as a true engineering collaborator.

It excels at understanding, refactoring, and maintaining large-scale codebases.
Claude Code can read entire repositories, preserve logic across files, and even generate complete pull requests with human-like commit messages.
Its upgraded 250K-token context window allows it to track dependencies, explain architectural patterns, and ensure code consistency over time.

Claude’s replies are more analytical — often including explanations, design alternatives, and justifications for each change.
It trades a bit of speed for a lot more insight and reliability.

Best for: professional engineers or teams managing complex, multi-file projects that demand reasoning, consistency, and full-codebase awareness.

3.Codex CLI vs Gemini CLI vs Claude Code: Hands-on With Two Real Projects

While benchmarks and specs are useful, nothing beats actually putting AI coding agents to work.
To see how they perform on real, practical front-end tasks, I tested three leading terminal assistants — Codex CLI (Codex5-Medium), Gemini CLI (Gemini 2.5 Pro), and Claude Code (Sonnet 4.5) — by asking each to build two classic web projects using only HTML, CSS, and JavaScript.

  • 🎮 Project 1: Snake Game — canvas-based, pixel-style, smooth movement, responsive.

  • Project 2: Todo App — CRUD features, inline editing, filters, localStorage, dark theme, accessibility + keyboard support.

🎮 Task 1 — Snake Game

Goal

Create a playable 2D Snake Game using HTML, CSS, and JavaScript.
Display a grid-based canvas with a moving snake that grows when it eats food.
The snake should move continuously and respond to arrow-key inputs.
The game ends when the snake hits the wall or itself.
Include a score counter and a restart button with pixel-style graphics and responsive design.

Prompt

Create a playable 2D Snake Game using HTML, CSS, and JavaScript.

  The game should display a grid-based canvas with a moving snake that grows when it eats

  food.

  The snake should move continuously and respond to keyboard arrow keys for direction

  changes.

  The game ends when the snake hits the wall or itself.

  Show a score counter and a restart button.

  Use smooth movement, pixel-style graphics, and responsive design for different screen sizes

Observations

Codex CLI — Generated the basic canvas scaffold in seconds. Game loop, input, and scoring worked out of the box, but it required minor tuning for smoother turning and anti-reverse logic.

Gemini CLI — Delivered well-structured, commented code and used requestAnimationFrame properly. Gameplay worked fine, though the UI looked plain — more functional than fun.

Claude Code — Produced modular, production-ready code with solid collision handling, restart logic, and a polished HUD. Slightly slower response but the most complete result overall.

✅ Task 2 — Todo App

Goal

Build a complete, user-friendly Todo List App using only HTML, CSS, and JavaScript (no frameworks).
Features: add/edit/delete tasks, mark complete/incomplete, filter All / Active / Completed, clear completed, persist via localStorage, live counter, dark responsive UI, and full keyboard accessibility (Enter/Space/Delete).
Deliverables: index.html, style.css, app.js — clean, modular, commented, semantic HTML + ARIA.

Prompt

Develop a complete and user-friendly Todo List App using only HTML, CSS, and JavaScript (no frameworks). The app should include the following functionality and design requirements:

    1. Input field and ‘Add’ button to create new tasks.
    2. Ability to mark tasks as complete/incomplete via checkboxes.
    3. Inline editing of tasks by double-clicking — pressing Enter saves changes and Esc cancels.
    4. Delete buttons to remove tasks individually.
    5. Filter controls for All, Active, and Completed tasks.
    6. A ‘Clear Completed’ button to remove all completed tasks at once.
    7. Automatic saving and loading of todos using localStorage.
    8. A live counter showing the number of active (incomplete) tasks.
    9. A modern, responsive dark theme UI using CSS variables, rounded corners, and hover effects.
    10. Keyboard accessibility — Enter to add, Space to toggle, Delete to remove tasks.
      Ensure the project is well structured with three separate files:
    • index.html
    • style.css
    • app.js
      Code should be clean, modular, and commented, with semantic HTML and appropriate ARIA attributes for accessibility.

Observations

Codex CLI — Created a functional 3-file structure with working CRUD, filters, and persistence. Fast, but accessibility and keyboard flows needed manual reminders.

Gemini CLI — Balanced logic and UI nicely. Used CSS variables for a simple dark theme and implemented localStorage properly.
Performance was impressive — Gemini was the fastest overall, but its default design felt utilitarian, almost as if it “just wanted to get the job done.”
Gemini focuses on correctness and functionality rather than visual finesse.

Claude Code — Implemented inline editing, keyboard shortcuts, ARIA live counters, and semantic roles perfectly. The result was polished, responsive, and highly maintainable.

4.Codex CLI vs Gemini CLI vs Claude Code — Real-World Comparison

When testing AI coding assistants, speed isn’t everything — clarity, structure, and the quality of generated code all matter. To see how today’s top command-line tools compare, I ran the same set of projects across Claude Code, Gemini CLI, and Codex CLI, including a 2D Snake Game and a Todo List App.
Here’s how they performed.


Claude Code: Polished and Reliable

Claude Code consistently produced the most professional and complete results.
Its generated code came with clear structure, organized logic, and well-commented sections.
In the Snake Game test, Claude built the best-looking user interface, with a balanced layout, responsive design, and smooth movement logic.
Error handling was handled cleanly, and the overall experience felt refined — something you could hand over to a production team with confidence.
Although it wasn’t the fastest, Claude made up for it with code quality, structure, and ease of prompt engineering.
If your workflow values polish, maintainability, and readability, Claude Code is the most dependable choice.


Gemini CLI: Fastest but Basic

Gemini CLI clearly took the top spot for speed.
It executed quickly, generated files almost instantly, and made iteration cycles shorter.
However, the output itself felt minimal and unrefined — both the UI and the underlying logic were quite basic compared to Claude or Codex.
In the Snake Game task, Gemini produced a playable result but lacked visual polish and consistent structure.
Documentation and comments were also limited.
In short, Gemini is great for rapid prototyping or testing ideas quickly, but not for projects where you need beautiful UI, advanced logic, or long-term maintainability.


Codex CLI: Flexible but Slower

Codex CLI offered good flexibility and handled diverse prompts reasonably well.
It could generate functional UIs with decent styling, somewhere between Gemini’s simplicity and Claude’s refinement.
However, its main drawback was speed — responses were slower, and sometimes additional manual intervention was needed to correct or complete the code.
Codex is still a solid option when you need to tweak results manually or explore multiple implementation approaches, but it doesn’t match Claude’s polish or Gemini’s speed.


Overall Impression

After testing multiple projects, the overall ranking became clear:

  • Gemini CLI is the fastest but produces simple and unpolished code.

  • Claude Code delivers the most reliable, structured, and visually refined results.

  • Codex CLI sits in between — flexible but slower and less cohesive.

Each tool has its strengths. Gemini is ideal for quick builds, Codex for experimentation, and Claude Code for professional, trust-ready outputs.

In short:

Gemini wins on speed. Claude wins on quality. Codex stands in between — flexible but slower.

Anthropic giới thiệu mô hình lập trình đỉnh nhất thế giới Claude Sonnet 4.5

Trong thế giới AI đang thay đổi từng ngày, các mô hình ngôn ngữ lớn (LLM — Large Language Models) không chỉ dừng lại ở khả năng hiểu – sinh văn bản, mà đang tiến sang khả năng tương tác thực tế, thực thi công cụ, duy trì trạng thái lâu, và hỗ trợ tác vụ đa bước. Claude của Anthropic là một trong những cái tên nổi bật nhất trong cuộc đua này — và phiên bản mới nhất Sonnet 4.5 được định vị như một bước nhảy quan trọng.

“Claude Sonnet 4.5 is the best coding model in the world. It’s the strongest model for building complex agents. It’s the best model at using computers.”Anthropic

1. Giới thiệu

Trong vài năm gần đây, các mô hình như GPT (OpenAI), Gemini (Google / DeepMind), Claude (Anthropic) đã trở thành xương sống của nhiều ứng dụng AI trong sản xuất, công việc hàng ngày và nghiên cứu. Nhưng mỗi dòng mô hình đều chọn hướng “cân bằng” giữa sức mạnh và an toàn, giữa khả năng sáng tạo và kiểm soát.

Claude, từ khi xuất hiện, đã xác định con đường của mình: ưu tiên an toàn, khả năng tương tác công cụ (tool use), kiểm soát nội dung xấu. Đặc biệt, dòng Sonnet của Claude được dùng như phiên bản “cân bằng” giữa các mô hình nhẹ hơn và các mô hình cực mạnh (Opus).

Vào ngày 29 tháng 9 năm 2025, Anthropic chính thức ra mắt Claude Sonnet 4.5, phiên bản được quảng bá là mạnh nhất trong dòng Sonnet, và là mô hình kết hợp tốt nhất giữa cấu trúc mã, khả năng dùng máy tính và agent phức tạp.

Thông báo chính thức khẳng định Sonnet 4.5 không chỉ là nâng cấp nhỏ mà là bước tiến lớn: nó cải thiện đáng kể khả năng lập trình, tương tác công cụ, reasoning & toán học, đồng thời giữ chi phí sử dụng không đổi với Sonnet 4 trước đó.

2. Những điểm nổi bật & cải tiến từ thông báo chính thức

2.1 “Most aligned frontier model” — Mô hình tiên phong có alignment cao nhất

Anthropic mô tả Sonnet 4.5 là mô hình hiện đại có alignment tốt nhất mà họ từng phát hành. Họ cho biết rằng so với các phiên bản Claude trước đây, Sonnet 4.5 đã giảm đáng kể các hành vi không mong muốn như:

  • Sycophancy (lấy lòng người dùng quá mức)
  • Deception (lừa dối hoặc đưa thông tin sai)
  • Power-seeking (tự nâng quyền lực)
  • Khuyến khích ảo tưởng hoặc suy nghĩ sai lệch (encouraging delusional thinking)

Ngoài ra, để đối phó với rủi ro khi mô hình tương tác với công cụ (agent, prompt injection), họ đã có những bước tiến cải thiện trong bảo vệ chống prompt injection — một trong những lỗ hổng nghiêm trọng nhất khi dùng mô hình kết hợp công cụ.

Sonnet 4.5 được phát hành dưới AI Safety Level 3 (ASL-3), theo khung bảo vệ của Anthropic, với các bộ lọc (classifiers) để phát hiện các input/output có nguy cơ cao — đặc biệt liên quan đến vũ khí hóa học, sinh học, hạt nhân (CBRN).

Họ cũng nói rõ: các bộ lọc đôi khi sẽ “cảnh báo nhầm” (false positives), nhưng Anthropic đã cải thiện để giảm tỷ lệ báo nhầm so với trước — kể từ phiên bản Opus 4, tỷ lệ nhầm được giảm mạnh.

Việc đưa thông tin này vào blog (với giải thích dễ hiểu) sẽ giúp độc giả thấy rằng Sonnet 4.5 không đơn thuần là “thêm mạnh hơn”, mà cũng là “thêm an toàn”.

2.2 Nâng cấp công cụ & trải nghiệm người dùng

Một loạt tính năng mới và cải tiến trải nghiệm được Anthropic công bố:

  • Checkpoints trong Claude Code: Bạn có thể lưu tiến độ và “quay lui” về trạng thái trước đó nếu kết quả không như ý.
  • Giao diện terminal mới & extension VS Code gốc: để người dùng phát triển dễ dùng hơn trong môi trường quen thuộc.
  • Context editing (chỉnh ngữ cảnh) & memory tool trong API: giúp agent chạy dài hơi, duy trì bối cảnh xuất hiện trong prompt, xử lý phức tạp hơn.
  • Trong ứng dụng Claude (trên web/app), tích hợp thực thi mã (code execution)tạo file (spreadsheet, slide, document) ngay trong cuộc hội thoại.
  • Claude for Chrome extension (cho người dùng Max) — giúp Claude tương tác trực tiếp qua trình duyệt, lấp đầy form, điều hướng web, v.v.
  • Claude Agent SDK: Anthropic mở nền tảng cho các nhà phát triển xây dựng agent dựa trên cơ sở mà Claude dùng. SDK này chứa các thành phần họ đã phát triển cho Claude Code: quản lý memory, quyền kiểm soát, phối hợp sub-agent, v.v.
  • Research preview “Imagine with Claude”: một chế độ thử nghiệm cho phép Claude tạo phần mềm “on the fly”, không dùng mã viết sẵn, phản ứng tương tác theo yêu cầu của người dùng — được mở cho người dùng Max trong 5 ngày.

Những điểm này là “chất” để bạn thêm vào blog khiến nó hấp dẫn và mang tính cập nhật kỹ thuật cao.

2.3 Hiệu năng & benchmark đáng chú ý

Anthropic cung cấp các con số benchmark để thể hiện bước nhảy lớn của Sonnet 4.5:

  • Trên SWE-bench Verified (benchmark chuyên về khả năng lập trình thực tế), Sonnet 4.5 được cho là state-of-the-art.
  • Họ dùng phép thử: 77,2 %, tính trung bình 10 lần thử nghiệm, không dùng thêm compute khi test, và budget “thinking” 200K tokens.
  • Với cấu hình 1M context, có thể đạt 82,0 %.
  • Trên OSWorld (benchmark thử AI sử dụng máy tính thực: tương tác máy tính, trang web, file, lệnh), Sonnet 4.5 đạt 61,4 %, vượt Sonnet 4 trước đó (42,2 %).
  • Trong các lĩnh vực chuyên môn như tài chính, y tế, luật, STEM, Sonnet 4.5 thể hiện kiến thức và reasoning tốt hơn so với các mô hình cũ (bao gồm Opus 4.1).
  • Anthropic cũng nói rằng người dùng đã thấy mô hình giữ “focus” trong hơn 30 giờ khi thực hiện tác vụ phức tạp đa bước.

Khi bạn đưa vào blog, bạn nên giải thích những con số này (ví dụ: SWE-bench là gì, OSWorld là gì), để độc giả không chuyên cũng hiểu giá trị của việc tăng từ 42 % lên 61 %, hay “giữ 30 giờ” là gì trong bối cảnh AI.

2.5 Ưu điểm về chi phí & khả năng chuyển đổi

Một điểm rất hấp dẫn mà Anthropic nhấn mạnh: giá sử dụng Sonnet 4.5 giữ nguyên như Sonnet 4 — không tăng phí, vẫn là $3 / $15 per million tokens (theo gói)

Họ cũng nhấn rằng Sonnet 4.5 là bản “drop-in replacement” cho Sonnet 4 — tức là nếu bạn đang dùng Sonnet 4 qua API hay ứng dụng Claude, bạn có thể chuyển sang Sonnet 4.5 mà không cần thay đổi nhiều.

Điều này làm tăng sức hấp dẫn của việc nâng cấp từ các phiên bản cũ lên Sonnet 4.5 — vì bạn được lợi nhiều hơn mà không phải trả thêm.

2.6 Thông tin kỹ thuật & lưu ý từ hệ thống (system card)

Trong thông báo, Anthropic cũng nhắc đến system card đi kèm Sonnet 4.5 — nơi họ công bố chi tiết hơn về các đánh giá an toàn, mitigations, phương pháp thử nghiệm, các chỉ số misaligned behaviors, cách họ đo lường prompt injection, v.v.

Ví dụ, trong system card có:

  • Biểu đồ “misaligned behavior scores” (hành vi lệch chuẩn) — càng thấp càng tốt — được đo qua hệ thống auditor tự động.
  • Phương pháp thử nghiệm và footnotes cho các benchmark: cách họ test SWE-bench, OSWorld, Terminal-Bench, τ2-bench, AIME, MMMLU, Finance Agent.
  • Ghi chú rằng các khách hàng trong ngành an ninh mạng, nghiên cứu sinh học, v.v. có thể được vào allowlist nếu cần vượt hạn chế CBRN.

3. Những cải tiến chính trong phiên bản 4.5

3.1 Hiệu năng lập trình & agent

Một trong những điểm mạnh lớn mà Sonnet 4.5 hướng tới là năng lực lập trình thực tế. Trên benchmark SWE-bench Verified, nó đạt ~ 77,2 % (khi test với scaffold, không dùng thêm compute), và ở cấu hình 1M context có thể lên đến ~ 82,0 %. Trong các thử nghiệm nội bộ, nó có thể giữ trạng thái làm việc liên tục hơn 30 giờ cho các tác vụ phức tạp.

Khi so sánh với Sonnet 4 trước đó, Sonnet 4.5 đạt 61,4 % trên benchmark OSWorld (AI thực thi máy tính thực tế), trong khi Sonnet 4 chỉ có ~ 42,2 %. Đây là bước nhảy lớn trong khả năng AI “dùng máy tính như người dùng thật”.

Ngoài ra, Sonnet 4.5 được thiết kế để thực thi nhiều lệnh song song (“parallel tool execution”) — ví dụ chạy nhiều lệnh bash trong một ngữ cảnh — giúp tận dụng tối đa “actions per context window” (số hành động trên khung ngữ cảnh) hiệu quả hơn.

3.4 Trải nghiệm người dùng & công cụ hỗ trợ

Sonnet 4.5 không chỉ mạnh mà còn dễ dùng:

  • Checkpoints trong Claude Code: cho phép người dùng lưu trạng thái, quay trở lại nếu cần.
  • Giao diện terminal mới, extension VS Code tích hợp gốc — giúp developer làm việc trong môi trường quen thuộc.
  • Context editing (chỉnh ngữ cảnh) và memory tool trong API: giúp agent theo dõi ngữ cảnh, nhớ các bước trước và hoạt động trong tác vụ dài hơn.
  • Trong ứng dụng Claude (app/web): hỗ trợ thực thi mãtạo file (spreadsheet, slide, document) ngay trong cuộc hội thoại — không cần chuyển sang công cụ ngoài.
  • Claude for Chrome: tiện ích mở rộng cho người dùng Max — giúp Claude tương tác trực tiếp với trang web: điều hướng, điền form, xử lý các tương tác web.
  • Claude Agent SDK: Anthropic mở mã để người dùng / developer xây agent dựa trên nền tảng mà Claude sử dụng — từ memory management đến phối hợp sub-agent, quyền kiểm soát, v.v.
  • Imagine with Claude: bản thử nghiệm (research preview) cho phép Claude “sáng tạo phần mềm on the fly” — nghĩa là không có phần mã viết sẵn, mà mô hình tự sinh & điều chỉnh theo yêu cầu người dùng. Được cung cấp cho người dùng Max trong 5 ngày.
3.3 An toàn và alignment

Sonnet 4.5 không chỉ mạnh mà còn chú trọng an toàn:

  • Áp dụng các bộ lọc (classifiers) để phát hiện các input/output nguy hiểm, đặc biệt trong các lĩnh vực CBRN — nhằm hạn chế khả năng sử dụng mô hình cho vũ khí hóa học, sinh học, hạt nhân.
  • Các bộ lọc này đôi khi “cảnh báo nhầm” (false positives), nhưng Anthropic đã cải tiến để giảm tỷ lệ này: so với trước, giảm 10× từ bản gốc, và giảm 2× so với Opus 4.
  • Việc phát hành ở mức AI Safety Level 3 (ASL-3) cho thấy Anthropic đặt giới hạn truy cập và bảo vệ bổ sung theo khả năng mô hình.
  • Biểu đồ “misaligned behavior scores” (điểm hành vi lệch chuẩn) được công bố — thể hiện mức độ giảm các hành vi như deception, sycophancy, power-seeking, khuyến khích ảo tưởng.
  • Bảo vệ chống prompt injection được cải thiện đáng kể, đặc biệt quan trọng khi mô hình dùng công cụ/agent.

Những yếu tố này rất quan trọng để người dùng tin tưởng dùng Sonnet 4.5 trong môi trường sản xuất, doanh nghiệp, ứng dụng thực tế.

3.4 Chi phí & chuyển đổi dễ dàng

Một điểm hấp dẫn là giá vẫn giữ như Sonnet 4: không tăng phí, vẫn là $3/$15 per million tokens (tùy gói)

Anthropic cho biết Sonnet 4.5 là drop-in replacement — tức nếu bạn đang dùng Sonnet 4 qua API hoặc ứng dụng, bạn có thể chuyển sang Sonnet 4.5 mà không cần thay đổi nhiều code hoặc cấu hình.

Đây là chi tiết quan trọng để độc giả của blog thấy rằng “nâng cấp” không đồng nghĩa “tăng chi phí lớn”.

4. Ứng dụng thực tiễn & tiềm năng nổi bật

Với những cải tiến kể trên, Claude Sonnet 4.5 có thể được ứng dụng mạnh trong nhiều lĩnh vực — phần này bạn có thể minh họa thêm bằng ví dụ thực tế trong blog của bạn.

4.1 Lập trình & phát triển phần mềm

  • Tạo mã (code generation) từ module nhỏ đến hệ thống lớn
  • Tự động sửa lỗi, refactor code, test, deploy
  • Phối hợp agent để quản lý dự án lập trình — chia nhỏ tác vụ, kiểm soát tiến độ
  • Hỗ trợ developer trong IDE (nhờ extension VS Code)

Ví dụ từ Anthropic: Sonnet 4.5 có thể hiểu mẫu mã code của một codebase lớn, thực hiện debug và kiến trúc theo ngữ cảnh cụ thể của dự án.

4.2 Ứng dụng doanh nghiệp & phân tích

  • Tự động hóa quy trình nội bộ: trích xuất, tổng hợp báo cáo, phân tích dữ liệu
  • Hỗ trợ phân tích tài chính, mô hình rủi ro, dự báo
  • Trong lĩnh vực pháp lý: phân tích hồ sơ kiện tụng, tổng hợp bản ghi, soạn bản nháp luật, hỗ trợ CoCounsel (như trích dẫn trong bài)
  • Trong an ninh mạng: red teaming, phát hiện lỗ hổng, tạo kịch bản tấn công (Anthropic trích dẫn việc Sonnet 4.5 được dùng cho các công ty an ninh mạng để giảm “vulnerability intake time” 44 % và tăng độ chính xác 25 %)

4.3 Trợ lý ảo – công việc văn phòng

  • Trong ứng dụng Claude: tạo slide, bảng tính, file văn bản trực tiếp từ cuộc hội thoại
  • Hỗ trợ xử lý email, lập kế hoạch, tổng hợp nội dung, viết báo cáo
  • Tương tác với nhiều hệ thống qua API, làm các tác vụ đa bước

4.4 Agent thông minh & tác vụ liên tục

Nhờ khả năng duy trì ngữ cảnh, nhớ lâu và tương tác công cụ, Sonnet 4.5 rất phù hợp để xây agent đa bước, làm việc liên tục qua nhiều giờ:

  • Quản lý dự án (lập kế hoạch → giám sát → báo cáo)
  • Agent giám sát, tự động hóa pipeline (CI/CD, triển khai sản phẩm)
  • Agent tương tác đa hệ thống (hệ thống CRM, ERP, API bên ngoài)
  • Agent tự điều chỉnh dựa trên phản hồi mới

Anthropic nhắc rằng Sonnet 4.5 có thể “giữ 30+ giờ tự chủ trong mã” — tức là trong tác vụ lập trình liên tục, mô hình vẫn giữ mạch lạc và không “rơi rụng”.

5. So sánh Sonnet 4.5 với các mô hình khác & ưu nhược điểm

Phần này giúp độc giả định vị Sonnet 4.5 trong “bản đồ AI” hiện tại.

5.1 So với Claude phiên bản trước (Sonnet 4, Opus 4)

Ưu điểm của 4.5 so với Sonnet 4 / Opus 4:

  • Nâng cao khả năng sử dụng công cụ & tương tác thực tế (OSWorld từ ~42,2 % lên ~61,4 %)
  • Tăng độ ổn định / duy trì trạng thái lâu hơn (“30+ giờ”)
  • Checkpoints, context editing, memory tool — các tính năng mà Sonnet 4 không có
  • Giá giữ nguyên so với Sonnet 4
  • Kích hoạt SDK agent, mở đường cho người dùng xây agent tùy biến
  • Cải thiện an toàn và alignment

Hạn chế so với Opus / mô hình cao cấp:

  • Có thể Opus 4 vẫn có lợi thế trong một số bài toán reasoning cực lớn
  • Sonnet 4.5 là phiên bản “cân bằng” — nếu bạn cần năng lực cực hạn, Opus có thể vẫn vượt trội
  • Dù giảm lỗi, Sonnet 4.5 vẫn có thể có sai sót trong môi trường thực, đặc biệt trong các domain ngoài dữ liệu huấn luyện

5.2 So với GPT-4 / GPT-5 / Gemini / các LLM khác

Lợi thế của Sonnet 4.5:

  • Khả năng dùng máy tính & thực thi công cụ nội tại — điểm mà GPT truyền thống cần mô hình kết hợp môi trường để làm
  • Agent lâu dài, giữ trạng thái dài, xử lý tác vụ đa bước
  • Tích hợp tính năng code execution, file creation ngay trong mô hình
  • Chi phí “không tăng khi nâng cấp” — tạo động lực để chuyển
  • An toàn & alignment là một trong các ưu tiên thiết kế

Thách thức so với GPT / Gemini:

  • Ecosystem plugin / cộng đồng hỗ trợ GPT / Gemini lớn hơn — nhiều tài nguyên, thư viện, ứng dụng kèm
  • GPT / Gemini có thể mạnh hơn về “ngôn ngữ tự nhiên / creative writing” trong nhiều tình huống
  • Tốc độ inference, độ trễ, khả năng mở rộng thực tế có thể là điểm yếu nếu triển khai không tốt

5.3 Ưu điểm & hạn chế tổng quan

Ưu điểm:

  • Kết hợp tốt giữa sức mạnh và khả năng dùng trong thực tế
  • Được cải tiến nhiều tính năng hữu ích (checkpoints, memory, chỉnh ngữ cảnh)
  • An toàn hơn — giảm nhiều loại hành vi không mong muốn
  • Giá ổn định, chuyển đổi dễ
  • Được phản hồi tích cực từ người dùng thật sự

Hạn chế & rủi ro:

  • Không hoàn hảo — vẫn có thể “bịa”, sai logic, đặc biệt trong domain mới
  • Khi agent liên tục tự hành động, nếu prompt hoặc giám sát không chặt có thể gây lỗi nghiêm trọng
  • Việc triển khai thực tế (cơ sở hạ tầng, độ ổn định, tài nguyên) là thách thức lớn
  • Mô hình mới nhanh chóng — Sonnet 4.5 có thể bị vượt nếu Anthropic hoặc đối thủ không tiếp tục đổi mới

6. Kết luận & lời khuyên cho người dùng

Claude Sonnet 4.5 là một bước tiến ấn tượng trong dòng Claude: nó mang lại năng lực cao hơn trong lập trình, tương tác công cụ, agent lâu dài và các ứng dụng thực tế. Nếu được sử dụng đúng cách, nó có thể là trợ thủ đắc lực cho lập trình viên, nhà phân tích, đội phát triển sản phẩm, và nhiều lĩnh vực khác.

Tuy nhiên, không có mô hình AI nào hoàn hảo. Người dùng cần hiểu đúng điểm mạnh, điểm yếu, luôn giám sát kết quả, thiết lập kiểm soát và luôn cập nhật khi có phiên bản mới.

Nếu bạn là nhà phát triển, nhà phân tích hay người chủ doanh nghiệp, Claude Sonnet 4.5 có thể là lựa chọn đáng cân nhắc cho các nhiệm vụ có tính logic cao, cần tương tác công cụ, hoặc muốn xây agent thông minh.

Getting Started with Claude Code Spec Workflow: A Practical Guide to Spec-Driven Development

In modern software development, one of the biggest challenges is keeping requirements, design, and implementation aligned. Too often, teams jump straight into coding without a solid specification, leading to rework, misunderstandings, and bugs. That’s where spec-driven development comes in — an approach that places clear specifications at the heart of the workflow.

1. What is Spec-Driven Development?

Before diving into the tool, let’s clarify spec-driven development. This is a software development approach where specifications play a central role. They are created clearly before coding begins, and every step afterward (design, task breakdown, implementation, testing) follows those specifications.

1.1 Core Principles

  • Clear specifications before coding: Requirements, acceptance criteria, architecture, and tasks must be defined before writing any logic.

  • Traceability: Each piece of code and each task can be traced back to the original spec — from requirements → design → tasks → code → testing.

  • Role clarity: Business analysts, product managers, architects, and developers contribute to specs and follow them.

  • Automation & tooling: To reduce errors and repetitive work, tools can generate tasks, skeleton code, and tests directly from specs.

  • Spec-driven testing: Verification/validation is built around acceptance criteria defined in the specs.

   Advantages:

  • Reduced risk of misinterpreting requirements

  • Easier maintenance and scalability due to clear documentation

  • Transparency between business and dev teams

  • Supports automation

   Challenges:

  • Requires discipline and upfront time to write good specs

  • Demands strong design/translation skills

  • Can feel rigid if specs are frequently changing


2. Introducing Claude Code Spec Workflow

This toolkit, built on Claude Code (Anthropic), automates workflows for spec-driven development — both feature development and bugfix processes. See GitHub: claude-code-spec-workflow.

2.1 Goals & Vision

  • Provide structured workflows for both new features and bug fixes

  • Create scaffolding with slash commands, agents, templates, and dashboards

  • Optimize context sharing to reduce token costs

  • Zero-configuration support for multiple languages (Node.js, Python, Java, etc.)

  • Real-time dashboards to monitor specs, tasks, and bugfixes

2.2 Key Features

Feature Description
Zero Configuration Detects project type (Node.js, Python, Java, etc.) automatically.
Interactive Setup User-friendly CLI prompts and error handling.
Smart File Management Generates .claude/ folder with subfolders for commands, specs, bugs, templates, agents.
Feature Workflow /spec-create feature-name "Description" generates requirements → design → tasks → implementation steps.
Bugfix Workflow Commands like /bug-create, /bug-analyze, /bug-fix, /bug-verify.
Specialized Agents AI agents for executing, validating, and analyzing specs/tasks.
Context Optimization Shares context smartly across steps, reducing token usage by 60-80%.
Real-Time Dashboard Web interface to track progress with WebSockets.
Dashboard Sharing Securely share dashboards via HTTPS tunnel with optional password.
Steering Documents Project-wide guidance docs: product.md, tech.md, structure.md.
CLI Commands ~10 slash commands for spec/bug workflows, task execution, status checks.
Claude Integration Designed for Claude Code (Opus for specs, Sonnet for implementation).

Note: This version will see fewer updates, as the author is moving toward the MCP-based version.


3. Trying Claude Code Spec Workflow

3.1 Requirements

  • Node.js ≥ 16

  • Claude Code installed & configured

  • A project directory to initialize

3.2 Installation

  1. Install globally:

    npm install -g @pimzino/claude-code-spec-workflow

  2. Check version:

    claude-code-spec-workflow --version

  3. Run setup in your project:

    cd /path/to/project
    claude-code-spec-workflow

    → Creates .claude/ folder with subfolders for specs, bugs, commands, etc.
    setup

  4. (Optional) Generate steering docs:

    /spec-steering-setup

3.3 Workflows

   a. Feature Workflow

  • Create a spec:

    /spec-create feature-name “Description”

    → Generates requirements, design, tasks. Eg: /spec-create signup “Create a REST API for signup with JWT”
    spec excute

  • Execute tasks:

    /spec-execute <id> <feature-name>

    or individual auto-generated task commands. Eg: /spec-execute signup
    spec excute

  • Check status:

    /spec-status
    /spec-list

   b. Bug Workflow

  • Create bug:

    /bug-create issue-name “Description”
    Eg: /bug-create validate-password “Password must be 8 characters long and
    include lowercase letters, uppercase letters, numbers, and special characters”

    bug create

  • Analyze: /bug-analyze
    bug analyze

  • Fix: /bug-fix
    bug fix

  • Verify: /bug-verify

  • Status: /bug-status

3.4 Behavior (per docs)

  • /spec-create calls Claude to draft requirements, designs, and tasks.

  • With task agents enabled, code or skeleton implementations are auto-generated.

  • Optimized context caching saves tokens.

  • claude-spec-dashboard launches a real-time dashboard, optionally shareable via HTTPS.


4. Observations

Strengths

  • Enforces spec-driven discipline

  • Automates repetitive steps (specs, tasks, code skeletons)

  • Improves project traceability and transparency

  • Real-time dashboard for progress tracking

  • Token-efficient context handling

Considerations

  • Depends heavily on Claude’s quality and your prompts

  • Critical architecture/design still requires human review

  • Specs need careful versioning, especially in dynamic teams

  • This Claude Code version will be less updated than the MCP one

Claude Code Spec Workflow: Hướng Dẫn Thực Hành Spec-Driven Development

Claude Code Spec Workflow: Hướng Dẫn Thực Hành Spec-Driven Development

Giới Thiệu

Trong thế giới phát triển phần mềm hiện đại, việc kết hợp AI vào quy trình coding đang trở thành xu hướng không thể tránh khỏi. Tuy nhiên, phương pháp “vibe coding” – viết code dựa trên cảm hứng và prompt ngẫu nhiên – thường dẫn đến kết quả không nhất quán và thiếu cấu trúc. Claude Code Spec Workflow ra đời như một giải pháp để biến việc phát triển phần mềm với AI trở nên có hệ thống và chuyên nghiệp hơn.

1. Spec-Driven Development Là Gì?

Định Nghĩa

Spec-Driven Development (SDD) là một phương pháp phát triển phần mềm mà trong đó specification (đặc tả) trở thành trung tâm của toàn bộ quy trình engineering – từ planning và design đến implementation, testing và documentation. SDD nhấn mạnh việc viết specifications rõ ràng và có cấu trúc trước khi bắt đầu implementation.

Nguyên Lý Cốt Lõi

Thay vì “vibe coding” – phương pháp mô tả mục tiêu và nhận về một khối code có vẻ đúng nhưng thường không hoạt động chính xác, SDD đối xử với coding agents như những pair programmers nghiêm túc. Chúng xuất sắc trong pattern recognition nhưng vẫn cần hướng dẫn rõ ràng và không mơ hồ.

Quy Trình 4 Giai Đoạn

SDD hoạt động qua 4 giai đoạn với các checkpoint rõ ràng:

1. Specify (Đặc Tả): Tạo ra contract về cách code nên hoạt động, trở thành source of truth cho tools và AI agents.

2. Plan (Lập Kế Hoạch): AI agent phân tích spec và tạo ra kế hoạch chi tiết về architecture, constraints và cách tiếp cận.

3. Tasks (Nhiệm Vụ): Chia nhỏ spec và plan thành các công việc cụ thể, có thể review được, mỗi task giải quyết một phần cụ thể của puzzle.

4. Implement (Triển Khai): AI agent thực hiện từng task một cách có hệ thống, với developer review những thay đổi tập trung thay vì những code dump hàng nghìn dòng.

Ưu Điểm Của SDD

  • Giảm đoán mò: Spec rõ ràng giúp giảm thiểu sự bất ngờ và đảm bảo chất lượng code
  • Dễ thay đổi hướng: Chỉ cần update spec, regenerate plan và để AI agent xử lý phần còn lại
  • Phù hợp với dự án phức tạp: Đặc biệt hữu ích cho greenfield projects và feature work trong hệ thống hiện có

2. Claude Code Spec Workflow – Tổng Quan

Giới Thiệu Tool

Claude Code Spec Workflow là một toolkit tự động hóa được phát triển bởi Pimzino, cung cấp quy trình spec-driven development có cấu trúc cho Claude Code. Tool này transform các ý tưởng feature thành implementation hoàn chỉnh thông qua quy trình: Requirements → Design → Tasks → Implementation.

Các Tính Năng Chính

🎯 Quy Trình Phát Triển Có Cấu Trúc

  • Requirements Generation: Tạo user stories và acceptance criteria sử dụng định dạng EARS (WHEN/IF/THEN statements)
  • Design Creation: Tạo technical architecture và design với Mermaid diagrams để visualization
  • Task Breakdown: Chia design thành các atomic coding tasks tập trung vào test-driven development
  • Systematic Implementation: Thực hiện tasks một cách có hệ thống với validation dựa trên requirements

🛠 7 Slash Commands Chính

  • /spec-create <name> <description> – Tạo specification mới cho feature
  • /spec-requirements – Generate requirements document
  • /spec-design – Tạo design document
  • /spec-tasks – Generate implementation tasks
  • /spec-execute <task-number> – Execute specific tasks
  • /spec-status – Check status của specification hiện tại
  • /spec-list – List tất cả specifications

🏗 Cấu Trúc Project Tự Động

Sau khi setup, tool tự động tạo:

  • 📁 .claude/ directory: Chứa commands, templates, specs, và config files
  • 📝 7 slash commands: Để thực hiện complete workflow
  • 📋 Document templates: Đảm bảo formatting nhất quán
  • ⚙️ Configuration files: Cho workflow automation
  • 📖 CLAUDE.md: Với comprehensive workflow instructions

✨ Tính Năng Nâng Cao

  • Triple optimization commands: get-steering-context, get-spec-context, và get-template-context
  • Smart document handling: Bug documents sử dụng direct reading, templates sử dụng bulk loading
  • Session-based caching: Intelligent file change detection và cache invalidation
  • Real-time web dashboard: Monitor specs, tasks, và progress với live updates
  • Bug workflow system: Complete bug reporting và resolution tracking

3. Hướng Dẫn Cài Đặt và Sử Dụng

Yêu Cầu Hệ Thống

  • Node.js: 16.0.0 hoặc cao hơn
  • Claude Code: Đã cài đặt và configure
  • Bất kỳ project directory nào

Cài Đặt Claude Code (Prerequisite)

bash
# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Verify installation
claude doctor

# Navigate to your project
cd your-awesome-project

# Start Claude Code (first time login required)
claude

Cài Đặt Claude Code Spec Workflow

Phương Pháp 1: Cài Đặt Nhanh (Khuyến Nghị)

bash
# Cài đặt trong current directory
npx @pimzino/claude-code-spec-workflow

# Cài đặt trong directory cụ thể  
npx @pimzino/claude-code-spec-workflow --project /path/to/project

# Force overwrite existing files
npx @pimzino/claude-code-spec-workflow --force

# Skip confirmation prompts
npx @pimzino/claude-code-spec-workflow --yes

# Test setup
npx @pimzino/claude-code-spec-workflow test

Phương Pháp 2: Global Installation

bash
# Install globally
npm install -g @pimzino/claude-code-spec-workflow

# Use anywhere
claude-spec-setup

Phương Pháp 3: Development Dependency

bash
# Install as dev dependency
npm install --save-dev @pimzino/claude-code-spec-workflow

# Run via package.json script
npx claude-spec-setup

Cấu Trúc Được Tạo Ra

your-project/
├── .claude/
│   ├── commands/
│   │   ├── spec-create.md
│   │   ├── spec-requirements.md  
│   │   ├── spec-design.md
│   │   ├── spec-tasks.md
│   │   ├── spec-execute.md
│   │   ├── spec-status.md
│   │   └── spec-list.md
│   ├── templates/
│   │   ├── requirements-template.md
│   │   ├── design-template.md
│   │   └── tasks-template.md
│   ├── specs/
│   │   └── (your specs will be created here)
│   └── spec-config.json
└── CLAUDE.md (created/updated)

4. Hướng Dẫn Sử Dụng Chi Tiết

Workflow Cơ Bản

Bước 1: Khởi Tạo Claude Code

bash
cd my-awesome-project
claude

Bước 2: Tạo Specification Mới

bash
# Trong Claude Code terminal
/spec-create user-dashboard "User profile management system"

Bước 3: Generate Requirements

bash
/spec-requirements

Output: User stories với EARS format (WHEN/IF/THEN statements) đảm bảo comprehensive requirement coverage.

Bước 4: Tạo Design Document

bash
/spec-design

Output: Technical architecture với Mermaid diagrams, plans components, interfaces, và data models.

Bước 5: Generate Implementation Tasks

bash
/spec-tasks

Output: Atomic coding tasks với focus vào test-driven development, references specific requirements.

Bước 6: Execute Tasks

bash
/spec-execute 1

Executes tasks systematically với validation against requirements, ensures quality và consistency.

Bước 7: Monitor Progress

bash
# Check current status
/spec-status

# List all specifications  
/spec-list

Web Dashboard (Tính Năng Nâng Cao)

bash
# Basic dashboard
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard

# Dashboard with tunnel (share externally) 
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard --tunnel

# Full tunnel configuration
npx -p @pimzino/claude-code-spec-workflow claude-spec-dashboard \
  --tunnel \
  --tunnel-password mySecret123 \
  --tunnel-provider cloudflare \
  --port 3000 \
  --open

5. Ví Dụ Thực Hành: Phát Triển Game Asteroids

Mô Tả Dự Án

Một developer đã sử dụng claude-code-spec-workflow để tạo một game 2D đơn giản where player controls spaceship để tránh falling asteroids. Score được tính dựa trên survival time.

Quy Trình Thực Hiện

bash
# 1. Tạo specification
/spec-create asteroids-game "A simple 2D action game where the player controls a spaceship to avoid falling asteroids. The score is based on survival time."

# 2. Generate 3 types of specs
- Requirements document (요구사항 정의서)
- Design document (설계서)  
- Task list (타스크 리스트)

# 3. Implementation using SDD methodology

Kết Quả

Developer đã thành công tạo ra một asteroids avoidance game hoàn chỉnh sử dụng:

  • LLM: Claude Sonnet 4
  • Frontend: HTML, CSS, JavaScript
  • Development Tools: Claude Code, claude-code-spec-workflow

Kỹ Thuật Sử Dụng

Trong video demonstration, developer đã sử dụng:

  • /spec-status để check workflow status
  • /spec-list để view tất cả specifications
  • /spec-create để tạo các specs với detailed content
  • Cuối cùng là gameplay video của completed game

6. Troubleshooting và Best Practices

Common Issues

❓ Command Not Found After NPX

bash
# Make sure you're using correct package name
npx @pimzino/claude-code-spec-workflow

❓ Setup Fails với Permission Errors

bash
# Try with different directory permissions
npx @pimzino/claude-code-spec-workflow --project ~/my-project

❓ Claude Code Not Detected

bash
# Install Claude Code first
npm install -g @anthropic-ai/claude-code

# Show verbose output
DEBUG=* npx @pimzino/claude-code-spec-workflow

# Check package version
npx @pimzino/claude-code-spec-workflow --version

Best Practices

1. Project Setup

bash
# Setup multiple projects efficiently
for dir in project1 project2 project3; do
  npx @pimzino/claude-code-spec-workflow --project $dir --yes
done

2. Testing Setup

bash
# Test setup trong temporary directory
npx @pimzino/claude-code-spec-workflow test

3. Workflow Efficiency

  • Auto-detects project type: Node.js, Python, Java, etc.
  • Beautiful CLI: Với progress indicators
  • Validation: Claude Code installation check
  • Safety: Preserves existing CLAUDE.md content

7. So Sánh Với Các Công Cụ Khác

Claude Code Spec Workflow vs GitHub Spec-Kit

  • GitHub Spec-Kit: Toolkit chính thức từ GitHub cho SDD với support cho multiple AI agents (GitHub Copilot, Claude Code, Gemini CLI)
  • Claude Code Spec Workflow: Chuyên biệt cho Claude Code với workflow tự động hóa và dashboard

Ưu Điểm Của Claude Code Spec Workflow

  • Dễ cài đặt: One-command setup
  • Tự động hóa cao: 7 slash commands có sẵn
  • Dashboard tích hợp: Real-time monitoring
  • TypeScript implementation: Comprehensive error handling

8. Tương Lai và Phát Triển

Xu Hướng SDD

Spec-driven development đang trở thành popular trong developer community như một cách để build software với structure hơn và ít “vibes” hơn. Nó đặc biệt phù hợp với greenfield projects và mid-to-large-sized features.

Limitations

  • UI-heavy work: Non-visual spec không hữu ích cho UI work
  • Small features: Tạo full-blown spec có thể overkill cho small features hoặc bug fixes
  • Overengineering risk: Có thể dẫn đến solutions phức tạp hơn cần thiết

Future of SDD

“Specs are the new code” – Sean Grove từ OpenAI team cho rằng 80-90% công việc của programmers là structured communication, và specs là cách tốt nhất để communicate về software functionality.

9. Kết Luận

Claude Code Spec Workflow đại diện cho bước tiến quan trọng trong việc kết hợp AI vào quy trình phát triển phần mềm một cách có hệ thống. Tool này không chỉ đơn thuần là automation mà còn là methodology giúp developers:

Lợi Ích Chính

  1. Cấu trúc hóa quy trình: Từ vibe coding thành systematic development
  2. Tăng chất lượng code: Thông qua spec-driven approach
  3. Cải thiện collaboration: Giữa developers và AI agents
  4. Giảm rủi ro dự án: Với clear specifications và validation

Khi Nào Nên Sử Dụng

  • Greenfield projects: Starting từ zero với clear vision
  • Feature development: Trong existing complex systems
  • Team collaboration: Cần consistent development approach
  • Quality-focused projects: Khi code quality là priority

Khuyến Nghị

Claude Code Spec Workflow là tool xuất sắc cho developers muốn áp dụng SDD methodology với Claude Code. Tuy nhiên, hãy nhớ rằng tool chỉ là means, methodology và mindset mới là điều quan trọng nhất.

Hãy bắt đầu với những dự án nhỏ, làm quen với workflow, và dần mở rộng sang những dự án phức tạp hơn. Spec-driven development không phải là silver bullet, nhưng chắc chắn là một powerful approach trong arsenal của modern developers.


Demo:

Sử dụng claude cli + claude-code-spec-workflow test tạo workflow cho chức năng  user-authentication

Kết quả :
Tạo ra code và spec cho chức năng  user-authentication

————————————————————————————————————————————————————————————————————————————–

Sử dụng claude cli + claude-code-spec-workflow test 1 game đơn giản bằng html

Kết quả :

 

Claude Code và Tương Lai Lập Trình Với AI Agent

Trong vòng một năm trở lại đây, cách chúng ta viết code đã thay đổi nhanh đến mức chóng mặt. Nếu như trước kia AI chỉ dừng ở mức autocomplete vài dòng trong IDE, thì nay các công cụ như Claude Code đã tiến hóa thành những “người đồng hành” thực sự: có thể đọc hiểu toàn bộ project, viết, sửa, refactor, và thậm chí xây dựng ứng dụng từ đầu đến cuối.

Bài viết này tổng hợp những ý chính từ buổi trò chuyện giữa Alex và Boris (Anthropic) về Claude Code, đồng thời chia sẻ thêm vài góc nhìn cá nhân.

Link video: https://www.youtube.com/watch?v=iF9iV4xponk

Claude Code là gì?

Để hiểu Claude Code, hãy bắt đầu từ Claude. Đây là mô hình ngôn ngữ (LLM) do Anthropic phát triển, nổi tiếng nhờ khả năng suy luận tốt, trả lời an toàn và viết code khá mạnh. Tuy nhiên, nếu chỉ có một mô hình ngôn ngữ thì vẫn còn thiếu nhiều thứ để làm việc trong môi trường lập trình thực tế.

Ví dụ: nếu bạn thả Claude “chay” vào một dự án, nó có thể viết code hoặc trả lời câu hỏi, nhưng sẽ gặp khó khăn khi:

  • Không biết trạng thái repo hiện tại.

  • Không có quyền chỉnh sửa file.

  • Không thể chạy test hoặc commit.

  • Không tích hợp được vào workflow của team.

Đây chính là khoảng trống mà Claude Code ra đời để lấp đầy.

Claude Code = “Agentic IDE”

Anthropic gọi Claude Code là agentic IDE (một môi trường phát triển dựa trên agent). Nó giống một IDE thông minh, nhưng có khả năng tự hành động chứ không chỉ gợi ý.

Cấu trúc Claude Code gồm nhiều thành phần:

  1. Harness – Lớp điều phối giữa mô hình, ngữ cảnh project, và người dùng.

    • Harness giống như “bộ não phụ” để nối Claude với codebase.

    • Nó đảm bảo Claude có cái nhìn đầy đủ về repo, không chỉ một file rời rạc.

  2. Tools & Permissions – Cơ chế kiểm soát.

    • AI có thể thực hiện hành động thực sự: chỉnh sửa file, chạy script, cài dependency, commit.

    • Nhưng mọi hành động đều trong phạm vi cho phép, tránh “AI phá repo”.

  3. MCP Servers (Model Context Protocol) – Hệ thống plugin/API.

    • Cho phép mở rộng Claude Code ra ngoài: kết nối tới database, API, CI/CD, issue tracker (GitHub, Jira…).

    • Đây là điểm giúp Claude Code không chỉ làm code “trên máy”, mà còn tham gia vào toàn bộ pipeline.

  4. Settings, Hooks & Slash Commands – Tùy biến workflow.

    • Dev có thể định nghĩa shortcut (ví dụ: /fix-tests, /deploy) hoặc viết hook để AI làm việc theo cách riêng.

    • Tính năng này khiến Claude Code hackable, khác biệt so với nhiều công cụ AI coding “đóng hộp”.

  5. CLAUDE.md – Tài liệu hướng dẫn dành riêng cho AI.

    • Bạn có thể tạo file này trong repo để mô tả project, convention, style guide.

    • Claude sẽ đọc và hiểu ngữ cảnh như một dev mới join team.


Điểm khác biệt với AI coding khác

So với GitHub Copilot hay Cursor, Claude Code không chỉ dừng ở gợi ý code trong editor, mà là:

  • Có trí nhớ dài: hiểu và thao tác trên codebase lớn.

  • Có quyền hành động: sửa file, chạy lệnh.

  • Có khả năng mở rộng: thông qua MCP và plugins.

  • Có thể hack/tùy biến: lập trình viên điều chỉnh workflow theo ý mình.

Sự tiến hóa: từ autocomplete đến agent

Trong vòng một năm qua, AI coding đã thay đổi nhanh đến mức khó tin. Điểm đáng chú ý là sự tiến hóa không chỉ đến từ bản thân mô hình (model), mà chủ yếu nằm ở cách chúng ta đóng gói và sử dụng nó trong workflow thực tế.

  • Trước đây – thời kỳ autocomplete
    AI chỉ đóng vai trò như một “bộ gợi ý thông minh” trong IDE. GitHub Copilot (ra mắt 2021) là ví dụ điển hình: nó dự đoán vài dòng code tiếp theo, giống như autocomplete trong Gmail, nhưng dành cho lập trình viên. Rất tiện, nhưng vẫn giới hạn trong phạm vi vài dòng code.

  • Hiện tại – AI như đồng nghiệp
    Với các công cụ mới như Claude Code hay Cursor, AI không chỉ gợi ý từng dòng, mà có thể:

    • Đọc và phân tích toàn bộ repo.

    • Sửa lỗi và refactor hàng loạt file.

    • Review Pull Request (PR) và đưa ra nhận xét.

    • Hiểu ngữ cảnh project (nhờ cơ chế long context window như Claude 3.5 Sonnet với 200k tokens).

    Điều này biến AI từ một “công cụ hỗ trợ viết code” thành một trợ lý phát triển phần mềm thực thụ.

  • Tương lai gần – AI hiểu ý định (intent)
    Anthropic mô tả tầm nhìn tiếp theo: AI sẽ không chỉ viết code theo prompt, mà còn quản lý mục tiêu của lập trình viên.
    Ví dụ: bạn nói “Xây API thanh toán với Stripe”, Claude Code sẽ:

    1. Thiết kế cấu trúc.

    2. Tạo endpoint.

    3. Viết test.

    4. Deploy và thông báo kết quả.

    Ở giai đoạn này, AI giống một “agent” thực sự – tự động hóa toàn bộ chu trình dựa trên ý định của con người, thay vì chỉ thao tác cục bộ trên từng file.


Điều gì thúc đẩy sự tiến hóa này?

Theo chia sẻ từ Boris Cherny (Anthropic), chính feedback thực chiến từ dev nội bộ đã dẫn dắt sản phẩm. Anthropic không xây Claude Code trong phòng lab, mà cho chính nhân viên sử dụng hàng ngày để làm việc thật. Model và công cụ đồng tiến hóa:

  • Dev phản hồi về điểm yếu (ví dụ AI refactor chưa sạch → cải tiến).

  • Model mạnh hơn lại mở ra use case mới (ví dụ context dài → đọc cả repo).

Đây là lý do tại sao Claude Code không chỉ “mạnh về lý thuyết”, mà còn thực sự hữu dụng trong quy trình phát triển phần mềm.


Hackability là gì và vì sao quan trọng?

Một trong những điểm khác biệt khiến Claude Code nổi bật so với nhiều công cụ AI coding khác chính là tính hackability – tức khả năng tùy biến, mở rộng, và “bẻ cong” công cụ theo cách mà lập trình viên mong muốn.

Vì sao hackability quan trọng?

Trong thế giới phần mềm, mỗi đội và mỗi dự án có workflow riêng:

  • Có team ưu tiên CI/CD tự động, để code merge là deploy ngay.

  • Có team lại yêu cầu review thủ công và check kỹ lưỡng.

  • Một số lập trình viên thích command-line tool, số khác muốn UI trực quan.

Nếu một công cụ AI bị “đóng khung” theo một quy trình cứng nhắc, nó sẽ không thể đáp ứng được sự đa dạng này. Do đó, tính hackable là yếu tố then chốt giúp AI coding trở thành công cụ thực sự linh hoạt, thay vì chỉ là demo đẹp.

Hackability trong Claude Code

Claude Code được thiết kế để cực kỳ hackable với nhiều cơ chế:

  • CLAUDE.md: file cấu hình cho phép mô tả project, hướng dẫn AI hiểu ngữ cảnh (giống như README nhưng dành riêng cho AI).

  • Configurable workflows: bạn có thể cấu hình lại workflow qua settings, hooks hoặc script tùy chỉnh.

  • MCP servers (Model Context Protocol): cơ chế mở rộng theo kiểu “plugin/API”, cho phép AI tương tác với tool, service hoặc dữ liệu riêng của bạn.

  • Slash commands & sub-agents: tạo lệnh chuyên biệt (ví dụ: /generate-tests, /lint*) hoặc định nghĩa agent con để xử lý tác vụ hẹp.

Ví dụ thực tế

  • Một công ty fintech có thể viết MCP server riêng để Claude trực tiếp đọc dữ liệu từ hệ thống nội bộ, thay vì copy-paste code.

  • Một startup game có thể tạo slash command /render để AI gọi engine dựng hình trong quá trình phát triển.

  • Team backend có thể thêm CLAUDE.md để AI luôn tuân thủ chuẩn code style và kiến trúc microservices của họ.

👉 Chính vì vậy, hackability quan trọng ở chỗ: nó giúp AI không chỉ phù hợp với lập trình nói chung, mà còn thích nghi với phong cách làm việc riêng của từng lập trình viên và từng đội ngũ.


Tương lai của lập trình với AI agent

Bức tranh được Alex và Boris vẽ ra khá rõ:

  • Ngắn hạn: dev vẫn viết code thủ công, nhưng AI sẽ gánh phần “text manipulation” (refactor, đổi tên biến, viết test, v.v.).

  • Trung hạn: AI sẽ review code, đề xuất thay đổi, và có thể merge PR.

  • Dài hạn: dev chỉ cần nói “Xây API thanh toán với Stripe”, AI sẽ tự thiết kế, viết, test, deploy. Lập trình viên sẽ dần trở thành người định hướng, review và tư duy giải pháp thay vì “người gõ từng dòng code”.


Suy nghĩ cá nhân

Thật sự thì khi nhìn vào những gì Claude Code (và các agent AI khác) đang làm được, mình có cảm giác việc viết code không còn khô khan và đã trở nên dễ dàng hơn rất nhiều. Trước đây, để tạo ra một ứng dụng, chúng ta phải bỏ ra hàng tuần hay thậm chí hàng tháng để gõ từng dòng code, fix bug, rồi refactor. Nhưng giờ, AI có thể giúp sinh ra hàng nghìn dòng code chỉ trong vài phút.

Điều đó có nghĩa là: giá trị thật sự không còn nằm ở việc bạn viết được bao nhiêu dòng code, mà nằm ở việc bạn muốn xây dựng cái gì, thiết kế ra sao, và giải quyết vấn đề gì cho người dùng.

Điều này cũng kéo theo sự thay đổi lớn trong kỹ năng mà một developer cần. Thay vì chỉ tập trung vào “gõ code”, lập trình viên trong tương lai sẽ phải biết cách:

  • Đặt câu hỏi và mô tả yêu cầu rõ ràng cho AI. Đây giống như việc ra đề thi: đề càng rõ, đáp án càng đúng.

  • Hiểu và review code mà AI tạo ra, vì cuối cùng trách nhiệm với sản phẩm vẫn là của con người.

  • Kết hợp nhiều công cụ và agent để đạt được mục tiêu nhanh và hiệu quả hơn.

  • Có thể sẽ hình thành 2 nhóm nghề: người phát triển sản phẩm (product developer) và người lập trình ở mức thấp hơn (low-level developer) để xây dựng module cốt lõi.

Nếu nghĩ kỹ thì kỹ năng này khá giống với vai trò của một technical architect hơn là một coder thuần túy: định hình giải pháp, kết nối các mảnh ghép, và đảm bảo hệ thống hoạt động ổn định.

Về cơ hội và thách thức thì mình thấy rõ ràng:

  • Cơ hội: thời gian từ ý tưởng → sản phẩm rút ngắn cực kỳ nhiều. Một cá nhân giờ đây có thể làm được những thứ mà trước kia phải cần cả một team. Điều này mở ra rất nhiều cơ hội cho sáng tạo và khởi nghiệp.

  • Thách thức: nếu chỉ dừng lại ở việc “biết code”, bạn sẽ nhanh chóng bị thay thế. AI có thể viết, sửa, refactor code rất nhanh, nhưng AI chưa thể giao tiếp và thấu hiểu con người. Những kỹ năng như trao đổi với khách hàng, lắng nghe nhu cầu, đàm phán, thuyết phục, hay đơn giản là xây dựng niềm tin vẫn là phần không thể thiếu – và chỉ con người mới làm được.

Exploring Claude Code Subagents: A Demo Setup for a RAG-Based Website Project

1. Introduction

Recently, Anthropic released an incredible new feature for its product Claude: subagents — secondary agents with specific tasks for different purposes within a user’s project.

2. Main Content

a. How to Set It Up:
First, install Claude using the following command in your Terminal window:

npm i @anthropic-ai/claude-code

If Claude is already installed but it’s an older version, it won’t have the subagent feature.

to update claude, command : claude update

Launch Claude Code in your working directory, then run the command:
/agents

Press Enter, and a management screen for agents will appear, allowing you to start creating agents with specific purposes for your project.

Here, I will set it up following Claude’s recommendation.

After the setup, I have the following subagents:

I will ask Claude to help me build a website using RAG with the following prompt:

The first subagents have started working.

The setup of the RAG project has been completed.

However, I noticed that the subagent ‘production-code-reviewer (Review RAG system code)’ didn’t function after the coding was completed. It might be an issue with my prompt, so I will ask Claude to review the code for me

After the whole working process, Claude Code will deliver an excellent final product.
Link: https://github.com/mhieupham1/claudecode-subagent

3. Conclusion

Through the entire setup process and practical use in a project, it’s clear how powerful and beneficial the Sub-agents feature introduced by Anthropic for Claude Code is. It enables us to have AI “teammates” with specialized skills and roles that operate independently without interfering with each other — allowing projects to be organized, easy to understand, and efficient.