大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 xmcp

xmcp 是一个使用 TypeScript 构建和交付 MCP 应用程序的框架。其在设计时充分考虑了 DX 的需求，简化了开发流程，并降低了任何希望在模型上下文协议 (MCP) 生态系统上创建和部署强大工具的用户的入门门槛。

xmcp 的典型特征包括：

• 文件系统路由 - 工具从工具目录自动注册
• 热加载 - 即时开发反馈
• 中间件 - 用于传输身份验证和自定义中间件的工具包
• 可扩展配置 - 可为开发者的 MCP 服务器自定义配置
• 随处部署 - 可在任何平台上灵活部署
• Vercel 支持 - 开箱即用，可部署 Vercel

目前 xmcp 在 Github 通过 MIT 协议开源，短短几周已经有超过 0.5k 的 star，是一个值得关注的前端开源项目。

xmcp 基础用法

开始使用 xmcp 最简单的方法是使用 create-xmcp-app，该 CLI 工具可以让开发者搭建一个包含所有必要文件和依赖项的模板项目，以便快速启动并运行。

npx create-xmcp-app@latest

同时，当开发者想在服务器上部署 MCP 时，HTTP 传输是首选，其可用于创建从数据库获取数据或执行其他获取操作的工具。xmcp 使用无状态模式，这意味着每次调用工具时都会实例化一个新的传输，且不跟踪会话或状态。

下面是项目的基础结构：

my-project/
├── src/
│   ├── middleware.ts   # Middleware for http request/response processing
│   └── tools/          # Tool files are auto-discovered here
│       ├── greet.ts
│       ├── search.ts
├── dist/               # Built output (generated)
├── package.json
├── tsconfig.json
└── xmcp.config.ts       # Configuration file for xmcp

xmcp 会自动检测 /src/tools/ 目录下的文件并将其注册为工具，此路径可在 xmcp.config.ts 文件中配置。该工具文件应导出三个元素：

• Schema：使用 Zod 模式的输入参数
• Metadata：工具的身份和行为提示
• Default：工具处理函数

// src/tools/greet.ts
import {z} from "zod";
import {type InferSchema} from "xmcp";
// 定义工具参数
export const schema = {
  name: z.string().describe("The name of the user to greet"),
};

// 定义 tool 元数据
export const metadata = {
  name: "greet",
  description: "Greet the user",
  annotations: {
    title: "Greet the user",
    readOnlyHint: true,
    destructiveHint: false,
    idempotentHint: true,
  },
};
// Tool 实现
export default async function greet({name}: InferSchema<typeof schema>) {
  const result = `Hello, ${name}!`;
  return {
    content: [{type: "text", text: result}],
  };
}

自定义中间件

构建 HTTP 服务器时，开发者可以使用中间件来拦截请求和响应。这对于身份验证、速率限制和其他常见任务非常有用。

首先，创建一个 middleware.ts 文件，其中包含以下内容：

// src/middleware.ts

import {type Middleware} from "xmcp";

const middleware: Middleware = async (req, res, next) => {
  const authHeader = req.headers.authorization;
  if (!customHeaderValidation(authHeader)) {
    res.status(401).json({ error: "Invalid API key" });
    return;
  }
  return next();
};
export default middleware;

中间件也可以定义为数组，当需要链接多个中间件时非常有用。

// src/middleware.ts

import {type Middleware} from "xmcp";

const middleware: Middleware = [
  (req, res, next) => {
    // ...
    return next();
  },
  // ... other middlewares
];
export default middleware;

自定义 webpack 配置

xmcp 使用 webpack 和 swc 来打包工具。开发者可以通过在 xmcp.config.ts 文件中添加以下内容来自定义配置：

// xmcp.config.ts
const config: XmcpConfig = {
  webpack: (config) => {
    // Add raw loader for images to get them as base64
    config.module?.rules?.push({
      test: /\.(png|jpe?g|gif|svg|webp)$/i,
      type: "asset/inline",
    });

    return config;
  },
};

更多关于 xmcp 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/basementstudio/xmcp

https://xmcp.dev/docs#development-commands

https://medium.com/@andipyk/building-a-single-file-mcp-server-in-typescript-68c68b5dac95