Claude Code: MCP server & tích hợp GitHub

#Thêm MCP server vào Claude Code — thực hành với Playwright

Ở phần "4 ví dụ thực chiến" ta đã thấy MCP mở rộng bộ tool; giờ là cách thực sự thêm một MCP server. Lấy Playwright MCP (cho Claude điều khiển web browser) làm ví dụ — mở ra nhiều khả năng cho workflow web.

#Cài Playwright MCP server

Chạy lệnh sau trong terminal — KHÔNG phải trong Claude Code:

claude mcp add playwright npx @playwright/mcp@latest

Lệnh làm 2 việc: (1) đặt tên server là playwright; (2) cấp command khởi chạy server local trên máy.

#Pre-approve permission — bớt bị hỏi mỗi lần

Lần đầu dùng tool của một MCP server, Claude hỏi phép mỗi lần. Ngán thì pre-approve server: mở file .claude/settings.local.json và thêm server vào mảng allow:

{
  "permissions": {
    "allow": ["mcp__playwright"],
    "deny": []
  }
}

⚠️ Chú ý HAI dấu gạch dưới trong mcp__playwright. Nhờ đó Claude dùng tool Playwright khỏi phải hỏi mỗi lần.

Nối bài trước: settings.local.json là file cá nhân, KHÔNG commit (giống CLAUDE.local.md) — nên pre-approve này chỉ áp cho máy mình, không đẩy quyết định "bỏ chốt permission" lên cả team.

#Ví dụ thực chiến — Claude tự cải thiện prompt sinh UI

Thay vì tự tay test rồi tinh chỉnh prompt, giao cho Claude một vòng khép kín:

1. Mở browser và navigate tới app.
2. Generate một test component.
3. Soi visual styling + code quality.
4. Update chính prompt sinh code dựa trên quan sát.
5. Test prompt mới bằng một component khác.

Prompt mẫu:

"Navigate to localhost:3000, generate a basic component, review the styling, and update the generation prompt at @src/lib/prompts/generation.tsx to produce better components going forward."

Claude dùng browser tools tương tác với app, xem output thật, rồi sửa file prompt để lần sau sinh component đẹp hơn.

#Kết quả

Thay vì mãi gradient tím-xanh generic + pattern Tailwind mặc định, Claude update prompt để khuyến khích: warm sunset gradients (orange→pink→purple), ocean depth (teal→emerald→cyan), asymmetric design + overlapping elements, spacing & layout phá cách.

⭐ Lợi thế then chốt: Claude thấy được output hình ảnh THẬT, không chỉ code → quyết định về styling sát thực tế hơn hẳn.

#MCP ecosystem — không chỉ Playwright

Playwright chỉ là một ví dụ. Hệ MCP còn có server cho: database interactions, API testing & monitoring, file system operations, cloud service integrations, dev tool automation. Chọn server hợp nhu cầu → biến Claude từ "code assistant" thành development partner tương tác cả hệ công cụ của mình.

Áp dụng thực tế: insight lớn nhất trùng đúng mạch "verify bằng mắt" đã gặp: cho Claude thấy kết quả thật (screenshot/browser) thì nó tự sửa được, thay vì đoán mù qua code. Nhưng tôi luôn kèm hai chốt: (1) mỗi MCP server ăn context (bài Claude Code 101 đã cảnh báo) — cắm cái nào thật cần, không cắm bừa; (2) pre-approve mcp__playwright là mở nguyên quyền một server điều khiển browser — tiện nhưng để trong settings.local.json cá nhân là đúng, đừng biến "bỏ chốt" thành mặc định của cả repo.

#Tích hợp GitHub — hai đường: Code Review có sẵn & Action tự dựng

Chỗ đáng giao việc lặp nhất là pull request: review diễn ra ở đó, thay đổi merge ở đó, và phần lớn việc lặt vặt cũng nằm ở đó. Có hai đường đưa Claude vào PR, và chúng giải hai bài toán khác nhau:

• Code Review — dịch vụ do Anthropic host. Bật lên là chạy, không phải dựng gì.
• GitHub Action — bạn tự wire workflow. Dành cho việc vượt quá phạm vi review.

⚠️ Bài này đã được viết lại (bản 07/2026). Ghi chú cũ mô tả hai default action ("Mention Action" + "Pull Request Action") cùng các field YAML custom_instructions / mcp_config / allowed_tools — đó là action bản beta. Từ claude-code-action@v1 (GA), mọi tuỳ biến gộp về prompt + claude_args, còn review PR tách hẳn ra thành dịch vụ Code Review. Bảng đổi tên khi nâng cấp beta → v1: mode (bỏ, action tự nhận diện) · direct_prompt → prompt · custom_instructions → claude_args: --append-system-prompt · max_turns / model / allowed_tools / disallowed_tools → claude_args: --max-turns / --model / --allowedTools / --disallowedTools. (Đối chiếu docs code.claude.com/docs/en/github-actions, tra 25/07/2026.)

#Đường 1 — Code Review (managed, không dựng gì)

Organization admin bật từ Claude Code admin settings: tìm mục Code review → nút Configure để nối vào các repository. Từ đó admin cài Claude GitHub app, chọn repo nào được theo dõi, và chọn khi nào chạy:

Bật xong thì mọi thứ chạy trên hạ tầng Anthropic. Một bộ review agent phân tích diff trong bối cảnh toàn codebase — không phải đọc trơ mấy dòng thay đổi. Kết quả post thành inline comment ngay dòng có vấn đề, gắn nhãn severity, kèm bảng tóm tắt trong check run.

Điểm dễ chịu: nó dedupe và xếp hạng findings. Thay vì một bức tường nitpick, bạn đọc một nhúm vấn đề đáng để tâm.

#Ranh giới của Code Review — nhớ 3 gạch đầu dòng

• Không bao giờ approve hay block PR. Quyền phán quyết ở lại với người: Claude nêu, bạn quyết.
• Không có managed autofix. Dịch vụ chỉ post findings.
• Đang là research preview, có trên gói team & enterprise → hành vi còn tiếp tục đổi.

Vì dịch vụ không tự sửa, nên áp dụng một finding là nước đi ở máy bạn: từ terminal của mình, lệnh /code-review review một diff, và cờ --fix áp findings vào working tree. Vòng chạy vì thế là: Claude tìm ra trên PR → bạn kéo về sửa ở local.

#Đường 2 — GitHub Action tự dựng

Code Review lo review. Khi việc vượt quá review thì mới tới GitHub Action: đây là CI tuỳ biến — thực thi thay đổi từ một comment, chạy báo cáo theo lịch, bất cứ thứ gì bình thường bạn phải viết workflow. Nó chạy agent trên PR comment, scheduled job, và mọi GitHub event.

Cài đặt bắt đầu ngay trong Claude Code: chạy /install-github-app (cần quyền repo admin). Slash command này dẫn bạn cài GitHub app và đặt secret Anthropic API key cho repo.

#Input của anthropics/claude-code-action@v1

⭐ Chốt của v1: chỉ còn hai cần gạt — prompt (nói làm gì) và claude_args (chỉnh chạy thế nào). Mọi field tuỳ biến của bản beta đã chui hết vào claude_args.

#Workflow trả lời @claude

Bỏ một workflow vào .github/workflows/claude.yaml là nó lắng nghe @claude trong PR comment và issue comment. Bước lõi trông như sau:

- uses: anthropics/claude-code-action@v1
  with:
    anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
    github_token: ${{ secrets.GITHUB_TOKEN }}
    trigger_phrase: "@claude"
    prompt: "Your instructions here"
    claude_args: "--max-turns 5 --model claude-sonnet-5"

Giờ ai đó viết @claude implement the spec in the linked Linear issue trên một pull request → action bắt được → Claude push commit và post comment mô tả việc nó vừa làm.

#Workflow chạy theo lịch

Cùng action đó làm được báo cáo tổng hợp hằng ngày: trigger cron bắn lúc (ví dụ) 9:00 UTC → action chạy → Claude post kết quả. Thêm workflow_dispatch để bấm chạy tay từ tab Actions. Khi action chạy, bạn theo dõi từng step trong tab Actions y như mọi GitHub workflow khác.

#Tinh chỉnh bằng claude_args

Đây là chỗ chỉnh tinh. Ba cần gạt đáng biết:

• --max-turns 5 — trần cứng cho agent loop, để nó không chạy mãi.
• Permission mode — job không có người trực thì phải chỉnh cho nó đừng dừng lại hỏi, vì không có ai ngồi đó trả lời (ghép thẳng với dontAsk ở phần permission mode).
• Allowed tools — cấp đúng thứ nó cần, không hơn. Job chỉ làm báo cáo thì read-only.

#Chọn đường nào?

Bắt đầu bằng dịch vụ managed. Chuyển sang action ngay khi bạn cần Claude làm gì đó trong CI, chứ không chỉ bình luận về nó.

📌 Docs bổ sung (ngoài text khoá — tra 25/07/2026): Code Review gắn severity theo 3 nhãn — 🔴 Important (bug nên sửa trước khi merge) · 🟡 Nit (nhỏ, không chặn) · 🟣 Pre-existing (bug có sẵn, không do PR này gây ra). Check run luôn kết thúc ở trạng thái neutral nên không chặn merge qua branch protection; muốn gate thì tự đọc bảng severity trong CI của mình. Tuỳ biến bằng CLAUDE.md (vi phạm mới = nit) hoặc REVIEW.md (chỉ dành cho review, chèn vào system prompt của mọi agent với ưu tiên cao nhất). Comment @claude review always = review ngay và subscribe PR nhận review mỗi lần push; @claude review trơn chỉ chạy một lần. Lệnh /code-review còn có cờ --comment (post findings thành inline comment lên PR).

Áp dụng thực tế: repo này (cv-website) deploy push-main → Cloudflare Pages, và người review duy nhất là tôi. Nên thứ tôi lấy được từ bài này không phải dịch vụ managed (nó dành cho team/enterprise có PR flow thật) mà là cách chia việc: phần kiểm tra tất định để cho quy tắc làm (npm run validate:learn, hook Stop), phần phải đọc-hiểu mới thấy thì mới nhờ model. Hai chốt tôi luôn nhấn với khách Nhật: (1) "không approve, không block" là thiết kế đúng chứ không phải thiếu tính năng — bot vào vai người thêm ý kiến, trách nhiệm merge vẫn thuộc về người, nên lúc bot sai cũng không ai phải cãi nhau với cái check đỏ; (2) --max-turns cộng allowed tools read-only cho job không người trực chính là least-privilege — bot cầm token repo và chạy ngoài tầm mắt, nên trần vòng lặp và phạm vi tool là security control, không phải thủ tục phiền hà.

Phần tiếp theo: Claude Code: plugin & kiểm chứng việc AI làm

Nguồn: Claude Code in Action (Anthropic Academy) — Copyright Anthropic. Phần đề thi thử cho khoá này nằm ở tab "Đề thi thử" trên trang tổng quan khoá.