讨论 Vibe Coding 如何通过 MCP(Model Context Protocol)运行 x402 支付协议(实操)

如何通过 MCP(Model Context Protocol)运行 x402 支付协议(实操)

Joe 发表于    阅读:16    回复:0

x402 是一种在大语言模型(LLM)与其他 AI 智能体之间传递上下文的协议。本页面展示了如何将 x402 支付协议与 MCP(Model Context Protocol)结合使用,通过 MCP 服务器发起付费 API 请求,并将其连接到 Claude Desktop。

这个集成是什么?

本指南将带你逐步搭建一个支持 x402 协议的 MCP 服务器,该服务器可以访问需要付费的 API(例如 x402 代码仓库中的示例天气 API)。MCP 服务器充当 Claude Desktop(或任何兼容 MCP 的客户端)与付费 API 之间的桥梁。当 Claude(或其他智能体)调用某个工具时,MCP 服务器会:

  1. 检测该 API 是否需要支付(通过 HTTP 402 状态码);

  2. 自动使用你的钱包完成支付;

  3. 将付费获取的数据返回给客户端(例如 Claude)。

这样,你(或你的智能体)就可以以编程方式访问付费 API,无需手动执行任何支付步骤。

前提条件

  • Node.js(v20 或更高版本)

  • 一个兼容 x402 的服务器(本演示中,我们将使用 x402 仓库中的示例 Express 天气数据服务器,或任意外部 x402 API)

  • 一个包含 USDC 的钱包:

    • Ethereum 钱包(在 Base Sepolia 或 Base 主网)

    • Solana 钱包(在 Solana Devnet 或 Solana 主网)

  • 支持 MCP 的 Claude Desktop

分步指南:构建 MCP + x402 集成

你可以在 x402 仓库中找到此代码的即用版本。下面我们将详细解释每个步骤,帮助你理解其工作原理,并可根据自身需求进行调整。

1. 安装依赖项

npm install @modelcontextprotocol/sdk axios viem x402-axios dotenv

2. 设置环境变量

在项目根目录创建一个 .env 文件:

PRIVATE_KEY=0xYourTestnetPrivateKey
RESOURCE_SERVER_URL=http://localhost:4021
ENDPOINT_PATH=/weather
  • PRIVATE_KEY: Your EVM wallet's private key (for signing payments)

  • RESOURCE_SERVER_URL: The base URL of the paid API (use the sample express server for this demo)

  • ENDPOINT_PATH: The specific endpoint path (e.g., /weather)

3. 实现:支持 x402 支付的 MCP 服务器

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import axios from "axios";
import { Hex } from "viem";
import { privateKeyToAccount } from "viem/accounts";
import { withPaymentInterceptor } from "x402-axios";
import { config } from "dotenv";

// Load environment variables and throw an error if any are missing
config();

const privateKey = process.env.PRIVATE_KEY as Hex;
const baseURL = process.env.RESOURCE_SERVER_URL as string; // e.g. https://example.com
const endpointPath = process.env.ENDPOINT_PATH as string; // e.g. /weather

if (!privateKey || !baseURL || !endpointPath) {
  throw new Error("Missing environment variables");
}

// Create a wallet client to handle payments
const account = privateKeyToAccount(privateKey);

// Create an axios client with payment interceptor using x402-axios
const client = withPaymentInterceptor(axios.create({ baseURL }), account);

// Create an MCP server
const server = new McpServer({
  name: "x402 MCP Client Demo",
  version: "1.0.0",
});


// Add an addition tool
server.tool(
  "get-data-from-resource-server",
  "Get data from the resource server (in this example, the weather)", //change this description to change when the client calls the tool
  {},
  async () => {
    const res = await client.get(endpointPath);
    return {
      content: [{ type: "text", text: JSON.stringify(res.data) }],
    };
  },
);

const transport = new StdioServerTransport();
await server.connect(transport);

工作原理:

  • MCP 服务器暴露一个工具(tool),当被调用时,会从一个付费 API 端点获取数据。

  • 如果该端点要求支付,x402-axios 拦截器会自动使用你的钱包完成支付握手流程。

  • 支付完成后,数据将返回给 MCP 客户端(例如 Claude Desktop)。

将 MCP 服务器添加到 Claude Desktop

要将此集成用于 Claude Desktop,请按以下步骤操作:

  1. 打开 Claude Desktop,进入 MCP 设置 页面。

  2. 添加一个新的 MCP 服务器,配置如下(根据实际路径调整):

{
  "mcpServers": {
    "demo": {
      "command": "pnpm",
      "args": [
        "--silent",
        "-C",
        "<absolute path to this repo>/examples/typescript/clients/mcp",
        "dev"
      ],
      "env": {
        "PRIVATE_KEY": "<private key of a wallet with USDC on Base Sepolia>",
        "RESOURCE_SERVER_URL": "http://localhost:4021",
        "ENDPOINT_PATH": "/weather"
      }
    }
  }
}
  1. 确保你的 x402 兼容服务器(例如示例 Express 服务器)正在运行,并可通过你提供的 URL 访问。

  2. 启动 MCP 客户端(例如在客户端目录中运行 pnpm dev)。

现在,Claude 就可以调用该工具并接收付费数据了!

各组件如何协同工作

  • x402 兼容服务器:托管付费 API(例如天气数据)。如果需要支付,则返回 HTTP 402 状态码。

  • MCP 服务器(本实现):作为桥梁,处理支付流程,并向 MCP 客户端暴露工具。

  • Claude Desktop:调用 MCP 工具,接收付费数据,并将其展示给用户。



原文:https://x402.gitbook.io/x402/guides/mcp-server-with-x402

免责声明:本文为c2e Labs的第三方内容,仅供信息分享与传播之目的,不代表我们的立场或观点且不构成任何投资及应用建议。版权归原作者或来源方所有,如内容或素材有所争议请和我们取得联系。

我来评论