Day 15 - MCP servers

1. Mục tiêu bài học

Sau khoảng 2 tiếng, học viên có thể:

• Giải thích MCP là gì và vì sao Claude Code dùng MCP để kết nối external tools/data sources.
• Phân biệt stdio, http, và sse; biết vì sao setup mới thường ưu tiên http cho remote server nếu server hỗ trợ, stdio cho local lab, và chỉ dùng sse khi server cũ/tài liệu bắt buộc.
• Cấu hình MCP server bằng claude mcp add.
• Quản lý MCP server bằng claude mcp list, claude mcp get, claude mcp remove, và /mcp.
• Hiểu scope local, project, user và khi nào dùng .mcp.json.
• Dùng MCP Playwright để kiểm tra UI taskflow-ai qua browser automation.
• Viết bug report UI có steps, actual, expected, evidence, severity.
• Nhận diện rủi ro: secret leakage, prompt injection, tool output quá lớn, server không tin cậy, và rollback cấu hình MCP.

2. Bối cảnh thực tế

Từ Day 08 đến Day 11, taskflow-ai đã có backend, database, frontend và test. Nhưng không phải lỗi nào cũng lộ qua unit test hoặc đọc code:

• Button render đúng nhưng click không hoạt động.
• Form validation hiển thị sai.
• API lỗi nhưng UI không báo.
• Layout vỡ ở viewport mobile.
• E2E flow fail vì selector, loading state hoặc network state.

MCP, viết tắt của Model Context Protocol, là open standard giúp AI agent kết nối với tool và data source bên ngoài repo. Với Claude Code, MCP biến agent từ “đọc và sửa file” thành “có thể dùng công cụ ngoài”: browser, database dev, GitHub, docs search, logs, monitoring hoặc internal API.

Use case thường gặp:

• Database: đọc schema, kiểm tra migration, query dữ liệu dev.
• GitHub: đọc issue, PR, review comments.
• Browser automation: mở app, click UI, đọc console/network, chụp screenshot.
• Docs search: tra tài liệu framework/library.
• Internal tools: kiểm tra deployment, logs, feature flags.

Trong Day 15, trọng tâm là MCP Playwright để Claude Code kiểm tra UI taskflow-ai như một QA engineer tự động.

3. Kiến thức nền

Trong bài này:

• MCP client: Claude Code.
• MCP server: Playwright MCP.
• External tool: browser automation.
• App kiểm tra: taskflow-ai.

Các transport:

Các scope:

Command quan trọng trên macOS/Linux/WSL:

claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated
claude mcp list
claude mcp get playwright
claude mcp remove playwright

Trên Windows native PowerShell/CMD, nếu MCP server chạy qua npx, nên bọc bằng cmd /c để tránh lỗi process đóng kết nối:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Trong Claude Code:

/mcp

Syntax cần nhớ:

claude mcp add [options] <name> -- <command> [args...]

Ký hiệu -- là ranh giới giữa option của Claude Code và command chạy MCP server. Mọi thứ sau -- được truyền cho process server. Khi viết tài liệu cho team, ưu tiên một style nhất quán để tránh nhầm lẫn.

Đúng:

claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest
claude mcp add --transport stdio --scope local playwright -- npx -y @playwright/mcp@latest

Sai:

claude mcp add playwright -- npx -y @playwright/mcp@latest --scope local

Lệnh sai ở trên đưa --scope local cho npx/MCP server thay vì cho Claude Code.

4. Step-by-step thực hành

Bước 1: Mở project taskflow-ai

Chạy trong workspace khóa học. Nếu bạn đang đứng ở thư mục cha của claude-code-course:

cd claude-code-course/taskflow-ai
git status --short

Nếu đang dùng layout repo có thư mục bọc claude-lession, đường dẫn tương ứng là claude-lession/claude-code-course/taskflow-ai.

Output kỳ vọng: working tree sạch hoặc chỉ có thay đổi bạn hiểu rõ. Rủi ro: nếu repo có diff cũ, bug report hoặc MCP config có thể bị trộn vào task khác.

Bước 2: Chạy app local

Thư mục chạy: root của taskflow-ai sau Bước 1.

Nếu project dùng Vite:

npm install
npm run dev -- --host 127.0.0.1

Output kỳ vọng:

Local: http://127.0.0.1:5173/

npm install tải dependency từ registry, nên chỉ chạy khi bạn tin package.json/lockfile. npm run dev giữ terminal chạy foreground; mở terminal khác cho Claude Code nếu cần.

Nếu project dùng Next.js:

npm install
npm run dev

Output kỳ vọng:

Local: http://localhost:3000

Ghi lại URL thực tế, ví dụ:

APP_URL=http://127.0.0.1:5173

Bước 3: Add MCP Playwright ở scope local

Chạy trên macOS/Linux/WSL:

claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated

Chạy trên Windows native PowerShell/CMD:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Ý nghĩa:

• --scope local: chỉ dùng cho bạn trong project hiện tại.
• playwright: tên server.
• --: ngăn cách option của Claude Code với command server.
• npx -y @playwright/mcp@latest: chạy MCP server package.
• cmd /c: wrapper cần thiết trên Windows native khi command server là npx.
• --browser chrome: dùng Chrome channel theo CLI hiện tại của Playwright MCP.
• --isolated: tránh dùng browser profile/cookie cá nhân.

Output kỳ vọng:

Added MCP server 'playwright'

Kiểm tra:

claude mcp list
claude mcp get playwright

Rủi ro: @latest tiện cho lab nhưng không reproducible. Trong team nên pin version sau khi review.

Bước 4: Kiểm tra trong Claude Code

Mở Claude Code ở root taskflow-ai:

claude

Trong Claude Code:

/mcp

Output kỳ vọng: server playwright connected/available và có tool browser automation. Nếu không thấy, kiểm tra đúng project, đúng scope, Node/npm/npx, và command server.

Bước 5: Smoke test UI

Prompt:

Dùng MCP Playwright để mở http://127.0.0.1:5173.
Kiểm tra workflow tạo task mới trong taskflow-ai:
1. Quan sát trang đầu tiên và mô tả các vùng UI chính.
2. Tạo task với title "Day 15 MCP smoke test".
3. Nếu có field priority/status/due date, chọn giá trị hợp lệ bất kỳ.
4. Submit form.
5. Xác nhận task mới xuất hiện trong danh sách.
6. Kiểm tra console error và network error nếu tool hỗ trợ.
7. Không sửa code. Chỉ báo cáo lỗi theo format: severity, steps, actual, expected, evidence.

Output tốt:

Workflow: Create task
Result: Pass/Fail
Evidence:
- Page loaded: yes/no
- Create form found: yes/no
- Submit completed: yes/no
- Task visible after submit: yes/no
- Console/network errors: none/list

Bước 6: Responsive check

Prompt:

Dùng MCP Playwright kiểm tra taskflow-ai ở viewport 390x844.
Tập trung vào navigation, task list, create task form, và các button chính.
Ghi lại lỗi nếu text bị tràn, button không click được, form bị che, hoặc layout cần scroll ngang.
Không sửa file.

Không kết luận “ổn” nếu chưa kiểm tra các vùng chính.

Bước 7: Ghi bug report

Prompt:

Tổng hợp các lỗi UI vừa phát hiện thành markdown report cho docs/qa/day-15-ui-findings.md.
Mỗi lỗi gồm:
- ID
- Severity
- Area
- Environment
- Steps to reproduce
- Actual result
- Expected result
- Evidence
- Suggested fix
Không sửa code.

Nếu không phát hiện lỗi, ghi rõ phạm vi:

Không phát hiện lỗi trong workflow create task ở desktop viewport 1280x720.
Chưa kiểm tra auth, mobile, offline network, data lớn, hoặc browser khác.

Bước 8: Rollback MCP config

Nếu chỉ thử lab và muốn gỡ:

claude mcp remove playwright
claude mcp list

Output kỳ vọng: claude mcp list không còn server playwright. Rủi ro: nếu gỡ nhầm tên server, Claude Code sẽ mất tool đó cho project hiện tại và cần add lại.

Nếu đã dùng project scope và tạo .mcp.json, rollback bằng cách xóa entry playwright hoặc revert .mcp.json nếu đó là thay đổi không cần commit.

5. Prompt mẫu nên dùng

Kiểm tra kết nối:

Kiểm tra MCP Playwright có hoạt động không bằng cách mở APP_URL.
Chỉ dùng browser automation, không sửa file.
Báo lại URL đã mở, page heading nhìn thấy, và có console error nào không.

Smoke test:

Dùng MCP Playwright chạy smoke test cho taskflow-ai tại APP_URL:
- Load trang chủ
- Kiểm tra navigation chính
- Tạo một task mới
- Đổi status của task nếu UI hỗ trợ
- Xóa hoặc archive task nếu UI hỗ trợ
Ghi kết quả dạng checklist pass/fail. Không sửa code.

Bug hunting có kiểm soát:

Bạn là QA reviewer cho taskflow-ai.
Dùng MCP Playwright kiểm tra các workflow UI quan trọng trong 15 phút:
create task, edit task, filter/search task, responsive mobile.
Không đăng nhập bằng tài khoản thật, không nhập secret, không gọi external service ngoài localhost.
Với mỗi lỗi, cung cấp steps, actual, expected, evidence, severity.

Plan kiểm thử và security preflight:

Trước khi dùng MCP tools, hãy lập plan kiểm thử ngắn cho taskflow-ai.
Liệt kê tool nào bạn định dùng, dữ liệu nào có thể rời khỏi app, và rủi ro bảo mật chính.
Chỉ tiếp tục với thao tác trên localhost và dữ liệu giả. Không sửa file trong bước này.

Giới hạn output:

Khi dùng MCP, nếu output từ browser/tool quá dài, hãy tóm tắt phần liên quan.
Không paste toàn bộ DOM hoặc log dài hơn 100 dòng.
Ưu tiên lỗi console, network failed request, visible UI issue, và selector/label liên quan.

6. Trade-offs

MCP Playwright có lợi:

• Kiểm tra UI thật thay vì chỉ đọc code.
• Phát hiện lỗi layout, click, form, console, network.
• Tạo bug report có steps tái hiện.
• Giúp Claude hiểu app từ góc nhìn user.

Chi phí:

• Cần chạy thêm MCP server.
• Browser automation chậm hơn unit test.
• DOM/log/browser snapshot có thể rất lớn.
• Tool có quyền tương tác với website, nên rủi ro nếu mở URL không tin cậy.
• npx -y @playwright/mcp@latest tải package runtime, tiện cho lab nhưng kém ổn định cho team.

Best solution:

• Lab cá nhân: --scope local và @latest có thể chấp nhận.
• Team: dùng --scope project, pin version, review .mcp.json, không commit secret.

7. Best practices

• Bắt đầu bằng local scope khi thử MCP server mới.
• Chỉ chuyển sang project scope khi team đã review.
• Không commit secret vào .mcp.json.
• Dùng environment variable hoặc --env cho token/API key.
• Ưu tiên http cho remote MCP server nếu server hỗ trợ.
• Với sse, coi đây là lựa chọn legacy/deprecated; chỉ dùng khi tài liệu server yêu cầu hoặc chưa có endpoint http tương đương.
• Với Playwright MCP, dùng --isolated.
• Với Playwright MCP CLI, dùng browser value được hỗ trợ như chrome, firefox, webkit, hoặc msedge.
• Chỉ mở URL tin cậy, ưu tiên localhost trong lab.
• Coi external content từ MCP server là untrusted input vì có prompt injection risk.
• Hạn chế tool output; không dump toàn bộ DOM.
• Bug report phải có steps, actual, expected, evidence.
• Không dùng tài khoản thật hoặc production data trong browser automation nếu chưa có policy.

8. Performance / cost / context

MCP làm tăng context vì Claude nhận thêm tool list, browser snapshot, console log, network output và DOM/accessibility tree. Output dài có thể lấp mất thông tin quan trọng.

Cách kiểm soát:

• Chỉ kiểm tra một workflow mỗi prompt.
• Dùng viewport cụ thể.
• Không yêu cầu test mọi màn hình cùng lúc.
• Yêu cầu Claude tóm tắt log dài.
• Nếu warning output lớn hơn 10,000 tokens xuất hiện, dừng và thu hẹp phạm vi.
• Với bug report, giới hạn mỗi lỗi 10-15 dòng.

Prompt tiết kiệm context:

Dùng MCP Playwright kiểm tra duy nhất workflow tạo task.
Không dump DOM.
Chỉ báo page loaded, form found, submit result, task visible, console/network error liên quan.
Tối đa 40 dòng.

9. Checklist cuối bài

• Tôi giải thích được MCP là gì.
• Tôi phân biệt được stdio, http, sse.
• Tôi biết khi nào dùng sse và khi nào ưu tiên http.
• Tôi add được Playwright MCP bằng claude mcp add.
• Tôi hiểu dấu -- trong claude mcp add tách option của Claude Code khỏi command server.
• Nếu dùng Windows native, tôi biết cần cmd /c khi chạy server qua npx.
• Tôi kiểm tra được claude mcp list.
• Tôi xem được claude mcp get playwright.
• Tôi xem được status bằng /mcp.
• Tôi chạy được app taskflow-ai local.
• Tôi dùng Claude Code mở app qua MCP Playwright.
• Tôi kiểm tra được ít nhất một workflow UI.
• Tôi ghi được bug report có steps, actual, expected, evidence.
• Tôi biết rollback bằng claude mcp remove playwright.
• Tôi không commit secret vào .mcp.json.
• Tôi biết rủi ro @latest, prompt injection và output quá lớn.

10. Bài tập

Bài cơ bản: add MCP Playwright ở scope local, kiểm tra claude mcp list, claude mcp get playwright, và /mcp.

Bài thực tế: chạy app taskflow-ai, dùng MCP Playwright kiểm tra workflow tạo task, ghi pass/fail checklist.

Bài nâng cao: đề xuất .mcp.json project scope với version pinned và --isolated, nhưng chưa commit nếu team chưa review.

Bài reflection: giải thích vì sao MCP mạnh hơn read-only repo context, nhưng cũng nguy hiểm hơn nếu server không tin cậy hoặc output chứa external prompt injection.

Tài liệu

Tóm tắt kiến thức

MCP (Model Context Protocol) là open standard giúp AI agents kết nối external tools và data sources. Trong Claude Code, MCP mở rộng khả năng từ đọc/sửa code sang tương tác với browser, database, GitHub, docs, logs hoặc internal APIs.

Thành phần:

• MCP client: Claude Code.
• MCP server: process/service expose tools/resources.
• Tool: hành động Claude có thể gọi, ví dụ mở browser hoặc click button.
• Resource: dữ liệu server cung cấp.
• Transport: cách client và server giao tiếp.

Command cốt lõi:

macOS/Linux/WSL:

claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated
claude mcp list
claude mcp get playwright
claude mcp remove playwright

Windows native PowerShell/CMD:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Theo Playwright MCP CLI hiện tại, --browser nhận các giá trị như chrome, firefox, webkit, hoặc msedge; lab này dùng chrome kèm --isolated.

Trong Claude Code:

/mcp

Ví dụ .mcp.json cho project scope:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@<PINNED_VERSION>",
        "--browser",
        "chrome",
        "--isolated"
      ]
    }
  }
}

Không hard-code secret vào .mcp.json. Nếu cần token, dùng environment variable hoặc config local an toàn.

Sơ đồ tư duy hoặc luồng xử lý

Luồng kết nối:

User prompt
  -> Claude Code
  -> MCP config
  -> start/connect MCP server
  -> Playwright tools
  -> Chromium browser
  -> taskflow-ai UI
  -> observations/tool result
  -> Claude bug report

Luồng kiểm tra UI:

Start app local
  -> Add MCP server
  -> Verify with claude mcp list + /mcp
  -> Open APP_URL
  -> Inspect page state
  -> Execute workflow: create/edit/filter task
  -> Check visible result + console/network
  -> Record findings
  -> Keep or rollback MCP config

Security decision flow:

MCP server cần secret?
  |
  +-- Không -> local/project có thể dùng nếu command tin cậy
  |
  +-- Có -> không commit secret
           dùng env var / --env
           giới hạn scope
           review output/log

Bảng so sánh

Lỗi thường gặp

1. Đặt option sai vị trí Sai: claude mcp add playwright -- npx -y @playwright/mcp@latest --scope local Đúng: claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest Lý do: --scope local phải là option của Claude Code, không phải argument truyền cho MCP server.

2. Windows native chạy npx bị connection closed Nguyên nhân: Windows không chạy trực tiếp npx theo cách MCP server local cần. Dùng wrapper:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

3. MCP server không xuất hiện trong /mcp Nguyên nhân: add sai scope, mở Claude Code sai project, npx lỗi, network chặn download, server startup fail.

4. App local chưa chạy Browser báo connection refused. Cần chạy npm run dev và dùng đúng port.

5. Dùng @latest cho team Version thay đổi làm kết quả khác nhau. Pin version khi chuyển sang project scope.

6. Lộ secret trong .mcp.json Không ghi token thật vào file shared. Dùng ${ENV_VAR} hoặc --env.

7. Tool output quá lớn DOM/log dài làm context nhiễu. Yêu cầu không dump DOM, chỉ tóm tắt evidence liên quan.

8. Mở URL không tin cậy External content có thể chứa prompt injection. Trong lab, chỉ dùng localhost và dữ liệu giả.

Cách debug

Kiểm tra cấu hình:

claude mcp list
claude mcp get playwright

Remove và add lại:

macOS/Linux/WSL:

claude mcp remove playwright
claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated

Windows native PowerShell/CMD:

claude mcp remove playwright
claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Kiểm tra Node/npm:

node --version
npm --version
npx -y @playwright/mcp@latest --help

Kiểm tra app:

npm run dev -- --host 127.0.0.1

Prompt debug UI:

Dùng MCP Playwright mở APP_URL và chỉ debug vì sao create task không thành công.
Kiểm tra button submit, validation message, console error, network request liên quan submit, và task có xuất hiện sau reload không.
Không sửa code, chỉ báo cáo evidence.

Prompt debug security:

Trước khi bật MCP server mới, đánh giá server này có đọc file local, gửi dữ liệu ra network, cần token, hoặc lấy external content không.
Đề xuất scope thấp nhất và rollback plan.

Link tài liệu nên đọc

• Claude Code MCP: https://code.claude.com/docs/en/mcp
• Model Context Protocol: https://modelcontextprotocol.io/
• Playwright MCP: https://github.com/microsoft/playwright-mcp
• Playwright: https://playwright.dev/
• Claude Code Permissions: https://code.claude.com/docs/en/permissions

Bài tập

Bài 1 — Cơ bản

Mục tiêu: cấu hình MCP Playwright và xác nhận Claude Code nhìn thấy server.

Mở project:

cd claude-code-course/taskflow-ai

Nếu đang dùng layout repo có thư mục bọc claude-lession, đường dẫn tương ứng là claude-lession/claude-code-course/taskflow-ai.

Add Playwright MCP ở scope local:

macOS/Linux/WSL:

claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated

Windows native PowerShell/CMD:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Kiểm tra:

claude mcp list
claude mcp get playwright

Mở Claude Code:

claude

Trong Claude Code:

/mcp

Output kỳ vọng:

• claude mcp list có server playwright.
• claude mcp get playwright hiển thị command npx.
• /mcp hiển thị playwright connected/available.

Rủi ro cần ghi chú:

• npx -y @playwright/mcp@latest tải package từ npm.
• @latest không ổn định cho team.
• --isolated giúp tránh profile/cookie cá nhân.
• Trên Windows native, thiếu cmd /c có thể làm MCP server qua npx bị Connection closed.

Rollback:

claude mcp remove playwright

Giải thích lệnh:

Bài 2 — Thực tế

Mục tiêu: dùng Claude Code + MCP Playwright kiểm tra UI taskflow-ai.

Chạy app từ root taskflow-ai:

npm install
npm run dev -- --host 127.0.0.1

Hoặc nếu Next.js:

npm install
npm run dev

Ghi URL thực tế, ví dụ:

http://127.0.0.1:5173

Giải thích lệnh:

Prompt:

Dùng MCP Playwright kiểm tra taskflow-ai tại http://127.0.0.1:5173.
Không sửa file.
Hãy thực hiện:
1. Mở trang.
2. Mô tả các vùng UI chính.
3. Tạo task mới với title "Day 15 MCP smoke test".
4. Nếu có status/priority/due date, chọn giá trị hợp lệ.
5. Submit form.
6. Xác nhận task xuất hiện trong danh sách.
7. Kiểm tra console error và network error nếu tool hỗ trợ.
8. Trả kết quả dạng pass/fail checklist và bug report nếu có lỗi.

Output kỳ vọng:

Workflow: Create task
Result: Pass/Fail
Evidence:
- Page loaded: yes/no
- Create form found: yes/no
- Submit completed: yes/no
- Task visible after submit: yes/no
- Console/network errors: none/list

Bug report nếu fail:

ID: UI-001
Severity: Medium
Area: Create task
Environment: local, Chromium via Playwright MCP
Steps to reproduce:
1. Open APP_URL
2. Click New Task
3. Enter title
4. Submit
Actual result:
...
Expected result:
...
Evidence:
...
Suggested fix:
...

Security rule:

• Chỉ dùng dữ liệu giả.
• Không nhập token/password thật.
• Không mở site ngoài localhost nếu chưa được phép.

Bài 3 — Nâng cao

Mục tiêu: đề xuất MCP config an toàn hơn cho team.

Viết đề xuất .mcp.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@<PINNED_VERSION>",
        "--browser",
        "chrome",
        "--isolated"
      ]
    }
  }
}

Yêu cầu:

1. Thay <PINNED_VERSION> bằng version cụ thể team chọn.
2. Giải thích vì sao không dùng @latest cho team.
3. Giải thích vì sao dùng --isolated.
4. Nêu khi nào nên dùng local thay vì project.
5. Nêu rollback plan nếu MCP server gây lỗi.

Prompt review:

Đọc cấu hình MCP Playwright dưới đây và review dưới góc security/maintainability.
Hãy chỉ ra rủi ro, rollback plan, và đề xuất chỉnh sửa.
Không sửa file.

Expected result:

• Có recommendation pin version.
• Không hard-code secret.
• Không dùng browser profile thật.
• Có rollback command claude mcp remove playwright.
• Có note: nếu .mcp.json được commit, team cần hiểu server nào sẽ chạy.

Bài 4 — Review & Reflection

Trả lời:

1. MCP khác gì so với việc Claude Code chỉ đọc file trong repo?
2. Vì sao external content từ MCP server có prompt injection risk?
3. Khi nào dùng local, project, user scope?
4. Vì sao không nên đưa secret vào .mcp.json shared?
5. Khi browser automation trả về DOM/log quá dài, bạn giảm context bằng cách nào?
6. Một bug report UI tốt cần những trường nào?
7. Nếu Playwright MCP làm Claude Code chậm hoặc lỗi, rollback thế nào?

Expected answer ngắn:

MCP cho Claude Code quyền dùng external tools/data, không chỉ repo. External content là untrusted input và có thể chứa chỉ dẫn độc hại nhằm bẻ hướng agent. local dùng để thử cá nhân, project dùng cho config đã review và share qua repo, user dùng cho tool cá nhân ở nhiều project. Không đưa secret vào .mcp.json vì có thể bị commit/leak. Khi output lớn, giới hạn workflow, không dump DOM, tóm tắt log và dừng nếu context quá lớn. Bug report cần severity, area, environment, steps, actual, expected, evidence, suggested fix. Rollback bằng claude mcp remove playwright hoặc revert .mcp.json.

Tiêu chí hoàn thành

• Đã add MCP Playwright.
• Có kết quả claude mcp list.
• Có kết quả claude mcp get playwright.
• /mcp thấy server playwright.
• App taskflow-ai chạy local.
• Claude Code mở được app qua MCP Playwright.
• Đã kiểm tra ít nhất một workflow UI.
• Có pass/fail checklist.
• Có bug report nếu phát hiện lỗi hoặc ghi rõ phạm vi nếu không phát hiện lỗi.
• Có ghi chú security risk.
• Có rollback plan.

Gợi ý nếu bí

Nếu claude mcp list không thấy server:

macOS/Linux/WSL:

claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated

Windows native PowerShell/CMD:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Nếu add nhầm:

claude mcp remove playwright

Nếu /mcp không connected:

• Thoát Claude Code.
• Chạy claude mcp get playwright.
• Kiểm tra node, npm, npx.
• Mở lại Claude Code trong đúng project.

Nếu app không mở được:

• Kiểm tra dev server còn chạy không.
• Kiểm tra đúng port không.
• Thử mở URL bằng browser thường.
• Đọc terminal output của npm run dev.

Nếu Claude trả lời quá dài:

Dừng lại. Tóm tắt chỉ các lỗi liên quan workflow create task.
Không paste DOM. Mỗi lỗi tối đa 10 dòng.

Đáp án tham khảo hoặc expected result

Ví dụ command log:

macOS/Linux/WSL:

cd claude-code-course/taskflow-ai
claude mcp add --scope local playwright -- npx -y @playwright/mcp@latest --browser chrome --isolated
claude mcp list
claude mcp get playwright
npm run dev -- --host 127.0.0.1
claude
/mcp

Windows native PowerShell/CMD thay dòng add MCP bằng:

claude mcp add --scope local playwright -- cmd /c npx -y @playwright/mcp@latest --browser chrome --isolated

Ví dụ smoke test pass:

Workflow: Create task
Result: Pass
Environment:
- App URL: http://127.0.0.1:5173
- Browser: Chromium via Playwright MCP
- Viewport: desktop
Checklist:
- Page loaded: pass
- Main task list visible: pass
- Create task action visible: pass
- Task title entered: pass
- Submit completed: pass
- New task visible: pass
- Console error: none observed
Notes:
No issue found within create task desktop smoke test scope.

Ví dụ security note:

MCP Playwright is configured as local scope for lab use.
It uses npx with @latest, acceptable for a short exercise but should be pinned before sharing with a team.
The server is launched with --isolated to avoid personal browser state.
No secrets are stored in .mcp.json.
Rollback command: claude mcp remove playwright