4.10 · MCP servers với Claude Code

Mở đầu: Vấn đề "tool use cứng"

• Muốn Claude click button trong browser? Không có Click tool built-in.
• Muốn Claude query Postgres production (read-only)? Không có PostgreSQL tool.
• Muốn Claude reply Slack DM? Không có.
• Muốn Claude tạo Jira ticket? Không có.

Cách cũ để giải quyết:

1. Anthropic thêm tool mới vào core (chậm, không scale cho mọi use case)
2. Mỗi vendor (Linear, Slack, Postgres) viết integration riêng cho từng LLM tool (nhân đôi công sức)

MCP giải quyết cái này.

MCP là gì?

MCP = Model Context Protocol. Một giao thức mở (open protocol) do Anthropic công bố tháng 11/2024, cho phép:

• Bên thứ 3 tạo "MCP server" (cung cấp tool/resource/prompt)
• Bất kỳ AI tool (Claude Code, Cursor, Claude Desktop, ChatGPT...) kết nối vào server đó
• Không cần mỗi AI tool implement integration riêng

Analogy "USB-C cho AI"

┌────────────────────────────────────────────────────────────┐
│                                                            │
│  Trước MCP:                                                │
│                                                            │
│   [Claude Code]    [Cursor]    [Windsurf]    [Zed]        │
│        │              │            │           │          │
│        └──────────────┴────────────┴───────────┘          │
│                       │ (N × M custom integrations)        │
│   [GitHub]  [Linear]  [Slack]  [Postgres]  [Jira] ...     │
│                                                            │
│                                                            │
│  Với MCP:                                                  │
│                                                            │
│   [Claude Code]    [Cursor]    [Windsurf]    [Zed]        │
│        │              │            │           │          │
│        └──────────────┴──MCP───────┴───────────┘          │
│                       │ (N + M integrations)               │
│   [GitHub]  [Linear]  [Slack]  [Postgres]  [Jira] ...     │
│                                                            │
└────────────────────────────────────────────────────────────┘

Trước: N AI tools × M services = N*M tích hợp cần maintain. Sau: N + M — ai cũng nói cùng "ngôn ngữ" MCP.

3 thứ MCP server có thể cung cấp

1. Toolshàm Claude có thể gọi (browser.click, db.query, slack.send)
2. Resourcesdata Claude có thể đọc (like file but dynamic)
3. Promptstemplate prompt đóng gói sẵn

Trong thực tế, 90% MCP server cung cấp tools.

Hệ sinh thái MCP hiện có

Một số MCP server phổ biến

Cài đặt MCP server: Ví dụ Playwright

Playwright MCP làm gì?

Playwright là library automation browser (Chromium, Firefox, WebKit). Playwright MCP wrap nó thành tool Claude có thể gọi:

• browser_snapshot — chụp UI hiện tại (text + a11y tree)
• browser_click — click element
• browser_type — gõ text vào input
• browser_navigate — điều hướng URL
• Và ~15 tool khác

Với Playwright MCP, Claude có thể: mở browser, điều hướng app của bạn, tương tác, và "thấy" kết quả — không cần bạn làm thủ công.

Bước 1: Cài server

Trong terminal (không phải Claude Code CLI):

claude mcp add playwright npx @playwright/mcp@latest

Cú pháp: claude mcp add <name> <command> — gán cho server một tên và chỉ rõ cách start nó.

• name: "playwright" (tự chọn, dùng để reference)
• command: npx @playwright/mcp@latest — Claude Code sẽ chạy command này để start server

Bước 2: Verify

Trong Claude Code:

/mcp

Bạn sẽ thấy:

MCP Servers:
 - playwright  [connected, 16 tools available]

Bước 3: Hỏi Claude list tool

What browser tools do you have access to now?

Claude sẽ list: mcp__playwright__browser_click, mcp__playwright__browser_snapshot, etc.

Bước 4: Cấu hình permission

Mặc định, Claude hỏi permission mỗi tool call. Với Playwright browser automation, có thể 50 tool call cho 1 task → 50 prompt permission = annoying.

Mở .claude/settings.local.json (tạo nếu chưa có):

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

{
  "permissions": {
    "allow": [
      "mcp__playwright__browser_snapshot",
      "mcp__playwright__browser_navigate"
    ],
    "deny": ["mcp__playwright__browser_evaluate"]
  }
}

Rule: allow dùng mcp__<server>__<tool> hoặc mcp__<server> cho tất cả.

Bước 5: Restart Claude Code

Để reload settings. Sau đó dùng được Playwright tools mượt.

Ví dụ thực chiến: UI self-improving với Playwright MCP

Tình huống

Uigen generate React component từ prompt. Nhưng output khá generic: "purple-to-blue gradient", "standard Tailwind button". Muốn Claude tự cải thiện prompt generation thông qua observation.

Flow

Trong Claude Code (đã cài Playwright MCP):

Navigate to localhost:3000. Generate một basic pricing card. 
Sau đó:
1. Screenshot UI rendered
2. Nhận xét style hiện tại — tone, color, layout
3. Identify gì làm cho nó "generic AI-like"
4. Update @src/lib/prompts/generation.tsx để encourage 
   diversity hơn (original style, creative spacing, 
   asymmetric layout)
5. Test lại: generate một card nữa, compare before/after

Claude execute

[mcp__playwright__browser_navigate] url: "http://localhost:3000"
[mcp__playwright__browser_type] text: "Create a pricing card 
  for a SaaS product with 3 tiers"
[mcp__playwright__browser_click] button: "Generate"
[Wait 3s for stream]
[mcp__playwright__browser_snapshot]

Observation: Card dùng gradient purple→blue mặc định, layout 
3 cột equal width, font Inter default, padding đều đặn. 
"Generic AI-like" — không có personality.

Problems:
- Gradient dùng quá phổ biến (purple-blue)
- Layout symmetric, không có visual hierarchy
- Không có unique accent element
- CTA button style default

[Read] src/lib/prompts/generation.tsx

Current prompt mà nói "create a modern card". Sẽ update để 
encourage diversity...

[Edit] src/lib/prompts/generation.tsx
  + Add diversity directives:
  + "Use unexpected color combinations: sunset (orange-pink-
     purple), ocean depth (teal-emerald-cyan), forest mist 
     (green-slate-stone)"
  + "Prefer asymmetric layouts — make one card taller or 
     wider to highlight"
  + "Use overlapping elements, non-uniform shadows"
  + "Avoid Inter as default font — suggest Instrument Serif 
     for titles, Geist Mono for numbers"

[mcp__playwright__browser_click] New Generation
[mcp__playwright__browser_snapshot]

Observation: Card mới có sunset gradient (orange→pink→violet), 
middle tier nhô cao hơn 10%, heading dùng serif italic, 
number dùng monospace. Hoàn toàn khác "default AI" trước.

Kết quả

Trong 3 phút, Claude đã:

• Observe output thực tế (via browser)
• Phân tích vấn đề
• Edit prompt template
• Verify improvement (via browser snapshot)

Đây là kỹ thuật gọi là "self-improvement loop" — AI observe output của AI, cải tiến. Chỉ khả dụng nhờ MCP cho Claude khả năng "thấy" rendered UI.

CLI tool vs MCP server — Khi nào chọn gì?

Dev thường hỏi: "Tôi nên cài MCP server Linear, hay dùng linear CLI?"

Nguyên tắc từ Claude Code team

Nếu CLI tool đã được Claude biết tốt (ví dụ gh, git, docker, aws), ưu tiên CLI tool. Nếu cần capability không có CLI (browser, complex API), dùng MCP.

Lý do

CLI tool:

• Claude đã thấy trong training data → biết rất rõ
• Output truyền thống (stdout/stderr) → Claude parse tốt
• Không cần setup MCP
• Có thể gọi từ Bash tool built-in

MCP:

• Thêm layer abstraction (server start, permission)
• Protocol định nghĩa schema rõ → tốt cho integration structured
• Cần khi capability không có CLI (ví dụ browser automation, real-time event)

Ví dụ cụ thể

Khám phá MCP ecosystem

Các category thường thấy

1. Developer tools

• Playwright (browser), Puppeteer MCP
• Chrome DevTools MCP
• Filesystem MCP
• GitHub MCP

2. Databases

• Postgres MCP (read-only)
• MongoDB MCP
• Redis MCP
• BigQuery MCP

3. Productivity / SaaS

• Slack, Discord MCP
• Google Drive, Notion MCP
• Linear, Jira MCP
• Figma MCP

4. Cloud services

• AWS MCP (limited, focus EC2/S3)
• Cloudflare MCP
• GCP MCP

5. Domain-specific

• Stripe MCP (payment)
• Sentry MCP (monitoring)
• Terraform MCP (IaC)

Browse tại modelcontextprotocol.io/servers.

Ví dụ thực chiến: Dev stack MCP cho fullstack dev

Setup điển hình

Dev fullstack Next.js + PostgreSQL + Vercel + Linear:

claude mcp add playwright npx @playwright/mcp@latest

claude mcp add postgres \
  npx @modelcontextprotocol/server-postgres \
  --url postgres://localhost:5432/dev

claude mcp add linear npx @linear-ai/mcp

claude mcp add sentry npx @sentry/mcp-server

Use case 1: Debug production issue từ Sentry alert

Check Sentry cho error "UndefinedInvariantError" last 24h. 
Xem transaction ID, user affected, stack trace. Rồi check 
Postgres: user đó có data bất thường gì không? Generate 
Linear ticket với root cause hypothesis.

Claude orchestrate:

• [Sentry MCP] Fetch errors
• [Postgres MCP] Query user data
• [Linear MCP] Create ticket

Use case 2: E2E test từ user report

User nói flow checkout bị broken trong issue Linear #LN-234. 
Đọc issue detail. Reproduce bằng Playwright trên staging. 
Screenshot step fail. Report back.

Claude:

• [Linear MCP] Read issue
• [Playwright MCP] Navigate, interact, screenshot
• Report với visual proof

Kết quả

Dev productivity lên rõ: task cần cross multiple tools xưa tốn 30-60 phút → giờ 5-10 phút. Claude orchestrate giữa MCP servers, dev chỉ review.

Case studies theo ngành

Health tech — MCP EHR

Tình huống: Đội dev tích hợp EHR (electronic health record) vendor. Test integration tốn tuần.

Với MCP EHR custom:

• Claude query FHIR patient records từ test sandbox
• Verify mapping đúng từ EHR schema sang internal
• Kết quả: Integration testing từ 2 tuần xuống 3 ngày.

Finance — MCP Bloomberg terminal

Tình huống: Quant dev cần query market data real-time cho backtest.

Với Bloomberg MCP (internal):

• Claude fetch historical prices, news
• Run backtest logic
• Kết quả: Research cycle từ 1 ngày xuống 2 tiếng.

Manufacturing — MCP MES

Tình huống: Platform team kết nối MES (manufacturing execution) với AI.

Với MES MCP:

• Claude pull line KPI real-time
• Detect anomaly, suggest root cause
• Kết quả: Downtime giảm 15%, detect faster 4x.

EdTech — MCP LMS

Tình huống: Build tutor AI cho students, cần truy LMS data.

Với LMS MCP:

• Claude thấy student progress
• Suggest exercise phù hợp
• Kết quả: Personalization accurate hơn, engagement +40%.

Security — MCP Panther SIEM

Tình huống: SOC analyst triage alerts chậm.

Với Panther MCP:

• Claude pull alert detail, cross-ref with threat intel
• Suggest priority + response action
• Kết quả: Time-to-triage 15 phút → 3 phút.

Anti-patterns

Cài MCP server random chưa verify

Biểu hiện: thấy MCP server cool trên GitHub → claude mcp add xxx ngay.

Rủi ro

MCP server chạy code trên máy bạn. Nếu untrusted → có thể malicious.

Cách đúng

Chỉ cài MCP từ:

• Anthropic official
• Vendor chính thức (Linear, Slack, etc.)
• Open source có nhiều star + audit
• Internal của công ty bạn

Allow * MCP tool

Biểu hiện:

"allow": ["mcp__*"]

Rủi ro

Mọi MCP tool được gọi tự động. Nếu MCP có destructive op (delete DB, send email) → Claude có thể làm mà không hỏi.

Cách đúng

Allow cụ thể tool name, deny destructive ops:

"allow": ["mcp__postgres__query", "mcp__github__list_issues"],
"deny": ["mcp__postgres__execute_ddl", "mcp__github__delete_repo"]

Dùng MCP cho task CLI tool làm được

Biểu hiện: Cài Git MCP dù git CLI đã có.

Hậu quả

Duplicate, thêm complexity, Claude đôi khi chọn sai tool.

Cách đúng

Ưu tiên CLI tool cho common operation.

MCP server dev-only mà dùng production

Biểu hiện: Playwright MCP trong prod CI.

Rủi ro

Browser automation trong prod → side effects, data leak.

Cách đúng

MCP server có context (local dev, staging, test). Không mixing.

Không restart sau khi cài/config MCP

Biểu hiện: vừa claude mcp add, mong dùng ngay.

Cách đúng: Restart Claude Code để load config mới.

Mẹo nâng cao

Mẹo 1: Scope MCP theo project

Config ở .claude/settings.json project-level:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Commit vào Git → team có cùng MCP khi mở project.

Mẹo 2: MCP custom cho team

Viết MCP server riêng cho internal API. Template: modelcontextprotocol.io/quickstart/server. 30 phút setup, lợi ích lâu dài.

Example: MCP acme-internal cung cấp tool get_employee_info, get_deployment_status, trigger_staging_rebuild.

Mẹo 3: Monitor MCP usage

Claude Code log mọi MCP call. Check ~/.claude/logs/ để xem tool nào gọi nhiều. Nếu thấy MCP tool dùng ít → cân nhắc uninstall, giảm clutter.

Mẹo 4: MCP với headless Claude Code (SDK)

Sẽ học ở Bài 4.18. MCP server có thể attach vào SDK run → dùng trong CI/CD, automation.

Áp dụng ngay

Bài tập 1: Cài Playwright MCP (15 phút)

Bước 1: Cài:

claude mcp add playwright npx @playwright/mcp@latest

Bước 2

Verify: /mcp trong Claude Code.

Bước 3

Cấu hình permission allow mcp__playwright trong .claude/settings.local.json.

Bước 4

Restart Claude Code.

Bước 5

Thử command đơn giản:

Navigate to https://example.com và screenshot cho tôi. Describe 
nội dung trang.

Ghi:

• Tool MCP nào được gọi: ____________
• Screenshot có thành công? Có Không

Bài tập 2 (optional, 20 phút): UI self-review

Chạy app uigen local (npm run dev). Prompt Claude:

Mở localhost:3000, generate một Button component đẹp. Screenshot, 
rồi đưa feedback về design. Dựa trên feedback đó, update 
@src/lib/prompts/generation.tsx để encourage style bạn muốn. 
Test lại với generation mới.

Ghi:

• Generation trước: style gì? __________
• Generation sau: khác thế nào? __________
• Prompt template thay đổi: ____________

Tóm tắt bài học

Tài liệu tham khảo

• MCP specification
• MCP servers catalog
• Build your own MCP server — tutorial
• MCP 201 talk — Code w/ Claude 2025
• Bài 4.2 — Coding assistant + tool use basics
• Bài 4.18 — Claude Code SDK (dùng MCP programmatic)