Ngày 25/10/2024, Anthropic đã open-source MCP, một giao thức tiêu chuẩn dùng để kết nối và tăng sức mạnh cho các LLMs một cách mượt mà. Họ ví von việc sử dụng MCP giống như là chúng ta cắm "USB vào LLMs", ám chỉ việc dễ dàng "tháo lắp". Vậy MCP là gì, chúng ta sẽ cùng tìm hiểu về nó trong bài viết này nhé.

1. Model Context Protocol (MCP) là gì

Model Context Protocol (MCP) là một tiêu chuẩn chung, mã nguồn mở được thiết kế để kết nối các hệ thống AI với nhiều nguồn dữ liệu khác nhau, giúp các công cụ AI tạo ra phản hồi chính xác và phù hợp với ngữ cảnh hơn.

Giao thức này khắc phục những hạn chế do tích hợp dữ liệu phân mảnh gây ra bằng cách cung cấp cho các nhà phát triển một kiến trúc thống nhất thông qua các MCP servers và clients, cùng với các trình kết nối được xây dựng sẵn cho các hệ thống phổ biến như Google Drive và GitHub.

Sáng kiến này nhấn mạnh sự hợp tác và khả năng mở rộng, mời gọi các nhà phát triển, doanh nghiệp và những người đam mê mã nguồn mở tham gia vào việc xây dựng một hệ sinh thái AI tích hợp và nhận thức ngữ cảnh tốt hơn.

2. Kiến trúc tổng quát của MCP

• MCP Hosts: các chương trình như Claude Desktop, IDE hoặc công cụ AI muốn truy cập dữ liệu thông qua MCP
• MCP Clients: các clients sử dụng giao thức kết nối đến các MCP servers bằng một connection duy nhất.
• MCP Servers: các chương trình gọn nhẹ cung cấp các khả năng cụ thể thông qua tiêu chuẩn (Model Context Protocol).
• Local Data Sources: các tập tin, file database và các dịch vụ trong máy tính của người dùng mà các MCP servers có thể truy cập một cách an toàn.
• Remote Services: các hệ thống, dịch vụ từ xa sẵn có trên Internet mà các MCP Server có thể kết nối và sử dụng.

3. Hướng dẫn xây dựng MCP Server với Cloudflare Workers

Sau đây mình sẽ hướng dẫn các bạn tự tạo và deploy một MCP Server cực kỳ đơn giản với Cloudflare Workers.

3.1 Cài đặt Claude Desktop app

Vì hướng dẫn sau đây sẽ deploy và tích hợp MCP Server vào Claude App vì thế bạn cần cài đặt nếu chưa có nhé. Link cài đặt tại đây.

Bạn có thể đăng nhập Claude App bằng bất kỳ một tài khoản FREE nào cũng được.

3.2 Tạo MCP server với TypeScript và Cloudflare workers

Vì thói quen sử dụng pnpm làm package manager nên mình sẽ dùng nó thay cho npm. Nếu bạn đang sử dụng npm chỉ cần thay đổi lại câu lệnh:

• pnpm ... sẽ là npm ....
• pnpx ... sẽ là npx ....

3.2.1 Khởi tạo dự án Cloudflare worker

Mở terminal và chạy câu lệnh dưới đây để khởi tạo dự án:

pnpm create cloudflare@latest

Tiếp theo chương trình sẽ hỏi bạn vài thứ cơ bản. Trong hướng dẫn này, mình sẽ chọn như sau:

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./my-hello-mcp
│
├ What would you like to start with?
│ category Hello World example
│
├ Which template would you like to use?
│ type Hello World Worker
│
├ Which language do you want to use?
│ lang TypeScript
│
├ Copying template files
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `pnpm install`
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `pnpm install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types
│ installed via pnpm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-02-14
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `pnpm run deploy`
│
╰ Done

────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!

Tới đây chúng ta sẽ có một project được khởi tạo với tên là my-hello-mcp.

3.2.2 Cài đặt workers-mcp và deploy lên Cloudflare Workers

Tiếp theo chúng ta chạy tiếp câu lệnh sau để deploy MCP server lên Cloudflare:

cd my-hello-mcp

# Cài đặt workers-mcp
pnpm i workers-mcp

# Tự động cấu hình và deploy
pnpx workers-mcp setup

💪 Congratulations on installing workers-mcp 😎

┌  Let's get started...
│
●  Step 1: adding 'workers-mcp docgen src/index.ts' as part of your wrangler deploy step
│
◇  Found NPM script key deploy that contains 'wrangler deploy'. Applying update:
│
│  --- "deploy": "wrangler deploy"
│  +++ "deploy": "workers-mcp docgen src/index.ts && wrangler deploy"
│
◇  Proceed?
│  Yes
│
◆  Updated package.json!
│
●  Step 2: generating and uploading a shared secret
│
◆  Generated and stored SHARED_SECRET in .dev.vars
│
◇  Uploading shared secret using wrangler secret put:

 ⛅️ wrangler 3.109.2
--------------------


✘ [ERROR] In a non-interactive environment, it's necessary to set a CLOUDFLARE_API_TOKEN environment variable for wrangler to work. Please go to https://developers.cloudflare.com/fundamentals/api/get-started/create-token/ for instructions on how to create an api token, and assign its value to CLOUDFLARE_API_TOKEN.

Tới bước này rất có thể các bạn sẽ gặp lỗi giống như mình ở trên. Vì là lần đầu bạn sử dụng wrangler để deploy lên Cloudflare thế nên sẽ cần cung cấp Cloudflare API Key.

Các bạn có thể theo hướng dẫn từ console để làm tiếp hoặc làm theo cách sau đây sẽ tiện hơn:

# Câu lệnh hướng dẫn xử lý step-by-step
pnpx workers-mcp help

# Câu lệnh này sẽ mở browser đến màn hình
# cấp quyền cho wrangler trên Cloudflare.
pnpx workers-mcp secret upload

# Chạy tiếp 2 câu này:
pnpm run deploy
pnpx workers-mcp secret upload

# Hoặc các bạn chạy lại câu này cũng được
# pnpx workers-mcp setup

Tới đây thì MCP Server sẽ được deploy và có đường link: https://my-hello-mcp.core-f0d.workers.dev

Successfully logged in.
Total Upload: 0.19 KiB / gzip: 0.16 KiB
No bindings found.
Uploaded my-hello-mcp (3.66 sec)
Deployed my-hello-mcp triggers (3.28 sec)
  https://my-hello-mcp.core-f0d.workers.dev

3.3.3 Cấu hình sử dụng MCP Server với Claude App

Chạy tiếp câu lệnh sau:

pnpx workers-mcp install:claude my-hello-mcp https://my-hello-mcp.core-f0d.workers.dev

Câu lệnh sẽ tự động tạo và thêm cấu hình MCP Server vào Claude đại khai như sau:

Looking for existing config in: /Users/viettranx/Library/Application Support/Claude
my-hello configured & added to Claude Desktop!
Wrote config to /Users/viettranx/Library/Application Support/Claude/claude_desktop_config.json:
{
  "mcpServers": {
    "my-hello-mcp": {
      "command": "/Users/viettranx/Documents/coding/me/mcp/my-hello-mcp/node_modules/.bin/workers-mcp",
      "args": [
        "run",
        "my-hello-mcp",
        "https://my-hello-mcp.core-f0d.workers.dev",
        "/Users/viettranx/Documents/coding/me/mcp/my-hello-mcp"
      ],
      "env": {}
    }
  }
}

3.2.4 Sử dụng MCP trong Claude App

OK bây giờ chúng ta thử tắt và mở lại app Claude. Chỗ nhập Prompt sẽ có icon cây búa nho nhỏ ở góc dưới bên phải kèm theo số đếm (hiện tại là 1). Các bạn có thể click vào và xem thử nó là gì:

Để thử nghiệm, các bạn có thể Promp một câu đại loại như: "Hello" hoặc "Hello, bạn có thể sử dụng mcp để chào lại mình không?"

Chương trình sẽ xuất hiện một popup xin quyền thực thi MCP. Các bạn có thể cho phép nó chạy hoặc không. Vì thế mình sẽ chọn "Allow for this chat".

Tới đây chúng ta sẽ thấy Claude sẽ gọi MCP Server và lấy kết quả để tạo ra một Prompt tiếp theo, sau đó mới phản hồi. Và đây chính là cách các MCP hoạt động.

Trên thực tế, với các MCP phức tạp hơn, nó có thể làm được nhiều thứ hơn và có thể các MCP có thể cùng liên kết lại để giải quyết một yêu cầu phức tạp từ người dùng.

Nếu bạn thắc mắc câu "Hello from an MCP Worker, Việt!" thì nó đến từ file source code src/index.ts:

import { WorkerEntrypoint } from 'cloudflare:workers';
import { ProxyToSelf } from 'workers-mcp';

export default class MyWorker extends WorkerEntrypoint<Env> {
  /**
   * A warm, friendly greeting from your new Workers MCP server.
   * @param name {string} the name of the person we are greeting.
   * @return {string} the contents of our greeting.
   */
  sayHello(name: string) {
    return `Hello from an MCP Worker, ${name}!`;
  }

  /**
   * @ignore
   **/
  async fetch(request: Request): Promise<Response> {
    return new ProxyToSelf(this).fetch(request);
  }
}

4. Kết luận

MCP (Model Context Protocol) là một giải pháp mạnh mẽ để tối ưu hóa việc sử dụng LLMs, đồng thời khuyến khích sự đóng góp và phát triển từ cộng đồng mã nguồn mở. Với MCP chúng ta (dev) có thể dễ dàng phát triển các công cụ giúp tăng cường sức mạnh của các LLMs cũng như góp phần cải thiện Workflow nhanh và chính xác hơn.