MCP client · Khoá học MCP (Hugging Face)

Giờ chúng ta đã hiểu cơ bản về Model Context Protocol, hãy cùng tìm hiểu vai trò thiết yếu của MCP client trong hệ sinh thái Model Context Protocol.

Trong phần này của Unit 1, bạn sẽ:

Hiểu MCP client là gì và vai trò của nó trong kiến trúc MCP
Tìm hiểu các trách nhiệm chính của MCP client
Khám phá các bản hiện thực MCP client phổ biến
Biết cách kết nối tới Hugging Face MCP Server và các tool có sẵn
Xem ví dụ thực tế về cách dùng MCP client

Hiểu về MCP client

MCP client là thành phần then chốt, đóng vai trò cầu nối giữa ứng dụng AI (host) và các khả năng (capability) bên ngoài do MCP server cung cấp. Hãy hình dung host là ứng dụng chính của bạn (như một trợ lý AI hoặc IDE), còn client là một module chuyên biệt bên trong host, chịu trách nhiệm xử lý giao tiếp MCP.

Client có giao diện người dùng

Hãy bắt đầu với các client có giao diện người dùng hỗ trợ MCP.

Client dạng chat

Claude Desktop (Anthropic)

Client cho lập trình tương tác

Extension VS Code hỗ trợ MCP (ví dụ: Continue)
Cursor IDE (có sẵn MCP client)
Trình soạn thảo Zed

Các client này hỗ trợ kết nối tới nhiều MCP server và gọi tool theo thời gian thực.

Kết nối nhanh tới Hugging Face MCP Server

Hugging Face cung cấp một MCP server được host sẵn, với các tool có sẵn để khám phá model, dataset, Space và bài báo khoa học (paper).

Truy cập https://huggingface.co/settings/mcp khi đã đăng nhập.
Chọn client hỗ trợ MCP của bạn (ví dụ: VS Code, Cursor, Zed, Claude Desktop).
Sao chép đoạn cấu hình được sinh ra vào file cấu hình MCP của client.
Khởi động lại hoặc tải lại client. Bạn sẽ thấy "Hugging Face" đã được kết nối.

Mẹo: Nên dùng đoạn cấu hình được sinh sẵn thay vì tự viết tay; nó được điều chỉnh riêng cho từng client.

Cấu hình MCP client

Sau khi đã nắm phần cốt lõi của giao thức MCP, hãy xem cách cấu hình MCP server và client.

Muốn triển khai (deploy) MCP server và client hiệu quả thì cần cấu hình đúng.

File cấu hình MCP

Host MCP dùng file cấu hình để quản lý kết nối tới server. Các file này khai báo những server nào khả dụng và cách kết nối tới chúng.

May mắn là các file cấu hình rất đơn giản, dễ hiểu và nhất quán giữa các host MCP phổ biến.

Cấu trúc `mcp.json`

File cấu hình chuẩn của MCP có tên mcp.json. Đây là cấu trúc cơ bản của mcp.json, có thể dùng cho các ứng dụng như Claude Desktop, Cursor hay VS Code:

json

{
  "servers": [
    {
      "name": "Server Name",
      "transport": {
        "type": "stdio|sse",
        // Transport-specific configuration
      }
    }
  ]
}

Trong ví dụ này, chúng ta có một server với tên và kiểu cơ chế truyền tải (transport). Kiểu transport là stdio hoặc sse.

Cấu hình cho transport stdio

Với server chạy cục bộ dùng transport stdio, cấu hình gồm lệnh và tham số để khởi chạy tiến trình server:

json

{
  "servers": [
    {
      "name": "File Explorer",
      "transport": {
        "type": "stdio",
        "command": "python",
        "args": ["/path/to/file_explorer_server.py"] // This is an example, we'll use a real server in the next unit
      }
    }
  ]
}

Ở đây, chúng ta có một server tên "File Explorer" là một script chạy cục bộ.

Cấu hình cho transport HTTP+SSE

Với server từ xa dùng transport HTTP+SSE, cấu hình gồm URL của server:

json

{
  "servers": [
    {
      "name": "Remote API Server",
      "transport": {
        "type": "sse",
        "url": "https://example.com/mcp-server"
      }
    }
  ]
}

Biến môi trường trong cấu hình

Có thể truyền biến môi trường cho tiến trình server qua trường env. Đây là cách đọc chúng trong code server:

Trong Python, chúng ta dùng module os để đọc biến môi trường:

python

import os

# Access environment variables
github_token = os.environ.get("GITHUB_TOKEN")
if not github_token:
    raise ValueError("GITHUB_TOKEN environment variable is required")

# Use the token in your server code
def make_github_request():
    headers = {"Authorization": f"Bearer {github_token}"}
    # ... rest of your code

Trong JavaScript, chúng ta dùng đối tượng process.env để đọc biến môi trường:

javascript

// Access environment variables
const githubToken = process.env.GITHUB_TOKEN;
if (!githubToken) {
    throw new Error("GITHUB_TOKEN environment variable is required");
}

// Use the token in your server code
function makeGithubRequest() {
    const headers = { "Authorization": `Bearer ${githubToken}` };
    // ... rest of your code
}

Cấu hình tương ứng trong mcp.json sẽ như sau:

json

{
  "servers": [
    {
      "name": "GitHub API",
      "transport": {
        "type": "stdio",
        "command": "python",
        "args": ["/path/to/github_server.py"], // This is an example, we'll use a real server in the next unit
        "env": {
          "GITHUB_TOKEN": "your_github_token"
        }
      }
    }
  ]
}

Ví dụ cấu hình

Hãy xem vài tình huống cấu hình thực tế.

Tình huống 1: Cấu hình server cục bộ

Trong tình huống này, chúng ta có một server cục bộ là một script Python, có thể là trình duyệt file hoặc trình soạn thảo code.

json

{
  "servers": [
    {
      "name": "File Explorer",
      "transport": {
        "type": "stdio",
        "command": "python",
        "args": ["/path/to/file_explorer_server.py"] // This is an example, we'll use a real server in the next unit
      }
    }
  ]
}

Tình huống 2: Cấu hình server từ xa

Trong tình huống này, chúng ta có một server từ xa là một API thời tiết.

json

{
  "servers": [
    {
      "name": "Weather API",
      "transport": {
        "type": "sse",
        "url": "https://example.com/mcp-server" // This is an example, we'll use a real server in the next unit
      }
    }
  ]
}

Cấu hình đúng là điều kiện thiết yếu để triển khai tích hợp (integration) MCP thành công. Khi hiểu các khía cạnh này, bạn có thể tạo kết nối vững chắc, đáng tin cậy giữa ứng dụng AI và các khả năng bên ngoài.

Ở phần tiếp theo, chúng ta sẽ khám phá hệ sinh thái MCP server trên Hugging Face Hub và cách công bố server của riêng bạn lên đó.

Dùng Tiny Agents làm client

Giờ hãy xem cách dùng MCP client ngay trong code.

Bạn cũng có thể dùng Tiny Agents làm MCP client để kết nối trực tiếp tới MCP server từ code của mình. Tiny Agents là cách đơn giản để tạo AI agent có thể dùng tool từ các MCP server.

Tiny Agents có thể chạy MCP server qua môi trường dòng lệnh. Để làm vậy, chúng ta cần cài npm và chạy server bằng npx. Cả Python lẫn JavaScript đều cần những thứ này.

Hãy cài npx bằng npm. Nếu chưa có npm, xem tài liệu npm.

Cài đặt

Trước tiên, cài npx nếu bạn chưa có, bằng lệnh sau:

bash

# install npx
npm install -g npx

Sau đó, cài gói huggingface_hub có hỗ trợ MCP. Gói này cho phép chúng ta chạy MCP server và client.

bash

pip install "huggingface_hub[mcp]>=0.32.0"

Tiếp theo, đăng nhập Hugging Face Hub để truy cập các MCP server, bằng Hugging Face CLI. Bạn cần một login token để làm việc này.

bash

# Login using the new CLI
hf auth login

Cấu hình quyền cho access token

Sau khi tạo access token Hugging Face và đăng nhập, bạn cần đảm bảo token có đủ quyền để làm việc với các inference provider.

Vào trang Access Tokens của Hugging Face
Tìm token MCP của bạn và bấm dấu ba chấm (⋮) bên cạnh
Chọn "Edit permissions"
Trong mục Inference, đánh dấu ô:
- "Make calls to Inference Providers"
Lưu thay đổi

Quyền này là bắt buộc vì Tiny Agents cần gọi API tới các model được host như Qwen/Qwen2.5-72B-Instruct thông qua các provider như Novita.

Kết nối tới MCP server

Giờ hãy tạo file cấu hình agent agent.json.

json

{
    "name": "playwright-agent",
    "description": "Agent with Playwright MCP server",
    "model": "Qwen/Qwen2.5-72B-Instruct",
    "provider": "novita",
    "servers": [
        {
            "type": "stdio",
            "command": "npx",
            "args": ["@playwright/mcp@latest"]
        }
    ]
}

Trong cấu hình này, chúng ta dùng MCP server @playwright/mcp. Đây là MCP server có thể điều khiển trình duyệt bằng Playwright.

Giờ bạn có thể chạy agent:

bash

tiny-agents run agent.json

Trước tiên, cài gói tiny agents bằng npm.

bash

npm install @huggingface/tiny-agents

Kết nối tới MCP server

Tạo thư mục dự án agent và file agent.json.

bash

mkdir my-agent
touch my-agent/agent.json

Tạo file cấu hình agent tại my-agent/agent.json:

json

{
    "model": "Qwen/Qwen2.5-72B-Instruct",
    "provider": "novita",
    "servers": [
        {
            "type": "stdio",
            "command": "npx",
            "args": ["@playwright/mcp@latest"]
        }
    ]
}

Giờ bạn có thể chạy agent:

bash

npx @huggingface/tiny-agents run ./my-agent

Ví dụ sau là một agent duyệt web được cấu hình dùng model Qwen/Qwen2.5-72B-Instruct qua inference provider Novita, và được trang bị MCP server Playwright để có thể dùng trình duyệt web. Cấu hình agent được nạp bằng cách chỉ định đường dẫn của nó trong dataset tiny-agents/tiny-agents trên Hugging Face. Bạn có thể xem video demo chạy agent và yêu cầu nó mở một tab mới trong trình duyệt.

Khi chạy agent, bạn sẽ thấy nó khởi động và liệt kê các tool đã tìm thấy từ các MCP server được kết nối. Sau đó, agent sẵn sàng nhận prompt của bạn.

Prompt dùng trong demo:

do a Web Search for HF inference providers on Brave Search and open the first result and then give me the list of the inference providers supported on Hugging Face

Bước tiếp theo

Giờ bạn đã hiểu về MCP client, bạn đã sẵn sàng để:

Khám phá các bản hiện thực MCP server cụ thể
Tìm hiểu cách tạo MCP client tuỳ chỉnh
Đi sâu vào các mẫu tích hợp MCP nâng cao

Hãy tiếp tục hành trình khám phá Model Context Protocol!

Nguồn

Dịch và biên tập từ huggingface/mcp-course · units/en/unit1/mcp-clients.mdx, giấy phép Apache-2.0.

Hiểu về MCP client

Client có giao diện người dùng

Client dạng chat

Client cho lập trình tương tác

Kết nối nhanh tới Hugging Face MCP Server

Cấu hình MCP client

File cấu hình MCP

Cấu trúc mcp.json

Cấu hình cho transport stdio

Cấu hình cho transport HTTP+SSE

Biến môi trường trong cấu hình

Ví dụ cấu hình

Tình huống 1: Cấu hình server cục bộ

Tình huống 2: Cấu hình server từ xa

Dùng Tiny Agents làm client

Cài đặt

Cấu hình quyền cho access token

Kết nối tới MCP server

Kết nối tới MCP server

Bước tiếp theo

Nguồn

Cấu trúc `mcp.json`