Bỏ qua đến nội dung chính

Máy chủ MCP với Claude Code

📖 Nội dung bài học

Tóm tắt

Bạn có thể mở rộng khả năng của Claude Code bằng cách thêm các máy chủ MCP (Model Context Protocol). Các máy chủ này chạy từ xa hoặc cục bộ trên máy của bạn và cung cấp cho Claude các công cụ và khả năng mới mà nó không có bình thường.

Một trong những máy chủ MCP phổ biến nhất là Playwright, cung cấp cho Claude khả năng điều khiển trình duyệt web. Điều này mở ra những khả năng mạnh mẽ cho quy trình làm việc phát triển web.

Cài đặt Máy chủ MCP Playwright

Để thêm máy chủ Playwright vào Claude Code, hãy chạy lệnh này trong terminal của bạn (không phải bên trong Claude Code):

claude mcp add playwright npx @playwright/mcp@latest

Lệnh này thực hiện hai việc:

  • Đặt tên cho máy chủ MCP là "playwright"
  • Cung cấp lệnh khởi động máy chủ cục bộ trên máy của bạn

Quản lý Quyền

Khi bạn lần đầu sử dụng các công cụ máy chủ MCP, Claude sẽ yêu cầu quyền mỗi lần. Nếu bạn cảm thấy phiền với các yêu cầu cấp quyền này, bạn có thể phê duyệt trước máy chủ bằng cách chỉnh sửa cài đặt của mình.

Mở tệp .claude/settings.local.json và thêm máy chủ vào mảng cho phép:

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

Lưu ý hai dấu gạch dưới trong mcp__playwright. Điều này cho phép Claude sử dụng các công cụ Playwright mà không cần hỏi quyền mỗi lần.

Ví dụ Thực tế: Cải thiện Sinh Component

Đây là một ví dụ thực tế về cách máy chủ MCP Playwright có thể cải thiện quy trình làm việc phát triển của bạn. Thay vì kiểm tra và tinh chỉnh prompt thủ công, bạn có thể yêu cầu Claude:

  1. Mở trình duyệt và truy cập ứng dụng của bạn
  2. Tạo một component thử nghiệm
  3. Phân tích kiểu dáng trực quan và chất lượng mã
  4. Cập nhật prompt sinh dựa trên những gì nó quan sát được
  5. Kiểm tra prompt đã cải thiện với một component mới

Ví dụ, bạn có thể yêu cầu Claude:

"Truy cập localhost:3000, tạo một component cơ bản, xem xét kiểu dáng và cập nhật prompt sinh tại @src/lib/prompts/generation.tsx để tạo ra các component tốt hơn trong tương lai."

Claude sẽ sử dụng các công cụ trình duyệt để tương tác với ứng dụng của bạn, kiểm tra kết quả được tạo ra và sau đó sửa đổi tệp prompt của bạn để khuyến khích các thiết kế độc đáo và sáng tạo hơn.

Kết quả và Lợi ích

Trong thực tế, cách tiếp cận này có thể dẫn đến kết quả tốt hơn đáng kể. Thay vì các gradient màu tím-xanh lam chung chung và các mẫu Tailwind tiêu chuẩn, Claude có thể cập nhật các prompt để khuyến khích:

  • Gradient hoàng hôn ấm áp (cam-hồng-tím)
  • Chủ đề chiều sâu đại dương (xanh mòng két-xanh lục bảo-xanh lơ)
  • Thiết kế không đối xứng và các yếu tố chồng chéo
  • Khoảng cách sáng tạo và bố cục độc đáo

Ưu điểm chính là Claude có thể nhìn thấy kết quả trực quan thực tế, không chỉ mã, cho phép nó đưa ra các quyết định sáng suốt hơn nhiều về việc cải thiện kiểu dáng.

Khám phá các Máy chủ MCP Khác

Playwright chỉ là một ví dụ về những gì có thể thực hiện được với các máy chủ MCP. Hệ sinh thái bao gồm các máy chủ cho:

  • Tương tác cơ sở dữ liệu
  • Kiểm tra và giám sát API
  • Thao tác hệ thống tệp
  • Tích hợp dịch vụ đám mây
  • Tự động hóa công cụ phát triển

Hãy cân nhắc khám phá các máy chủ MCP phù hợp với nhu cầu phát triển cụ thể của bạn. Chúng có thể biến Claude từ một trợ lý mã thành một đối tác phát triển toàn diện có thể tương tác với toàn bộ chuỗi công cụ của bạn.

🔁 Bài học liên quan

📚 Nguồn & ghi nhận

Bài học có hữu ích không?

Góp ý / Báo lỗiPhát hiện sai sót hoặc có ý tưởng cải thiện?