Xava Labs Typescript MCP 模板

用于 xava-labs/typescript-agent-framework 引导 MCP（模型上下文协议）的模板存储库。

入门

设置存储库

选项 A：使用此模板

单击此存储库顶部的“使用此模板”按钮
克隆你的新存储库

选项 B：使用“部署到 CloudFlare”按钮

以下按钮将在您的组织中创建一个新的 repo，并使用 Cloudflare 设置 CI/CD：

部署到 Cloudflare

注意：配置只需要

选项 C：使用 cloudflare create

您可以使用 wrangler 基于此模板创建一个新项目：

为方便起见，请复制以下文本

xava-labs/mcp-template

运行以下命令，按照交互式提示选择名称，然后以“来自 GitHub repo 的模板”开头，然后将上述文本粘贴到要使用的模板中。

npm create cloudflare@latest  --git https://github.com/xava-labs/mcp-template

完成上述方法之一后，请在终端中运行以下命令开始操作：

npm install
npm run dev

上述代码将使用以下 URL 来启动一个与 CloudFlare 兼容的无服务器 MCP 服务器：

/ws - Websocket 连接端点
/sse——SSE 连接端点

Related MCP server: Remote MCP Server for Cloudflare

特征

WebSocket 客户端支持：包括用于实时双向通信的官方WebSocket 客户端
SSE 客户端支持：包括用于服务器到客户端流式传输的服务器发送事件客户端
MCP 检查器：在开发过程中调试和监控您的 MCP
Cloudflare Workers 集成：基于 Cloudflare Workers 构建，具有边缘计算功能
集成测试套件：Websocket 和 SSE 测试工具与本地 miniflare 服务（D1/KV/etc）进行全面集成测试，以便于测试功能而无需模拟。

可用脚本

npm run dev ：同时运行 MCP Inspector（端口 6274）和 Cloudflare Worker（端口 8787）
npm start ：仅运行 Cloudflare Worker（端口 8787）
npm test ：使用 Vitest 运行测试
npm run deploy ：将您的 MCP 部署到 Cloudflare Workers
npm run cf-typegen ：为 Cloudflare Workers 生成 TypeScript 类型（每次向 wrangler.jsonc 添加新更改时运行此命令）

发展

此模板使用持久对象实现有状态连接的 MCP 服务器。基础项目结构提供了两种主要的功能扩展方法：

McpHonoServerDO 实现

默认情况下，模板使用McpHonoServerDO ，它将 MCP 服务器与快速轻量级的 Web 框架Hono结合在一起。这提供了简洁的路由系统和中间件功能。

使用工具、资源和提示进行扩展

主服务器实现位于src/server.ts中并扩展了McpHonoServerDO ：

export class ExampleMcpServer extends McpHonoServerDO {
  // Required abstract method implementation
  getImplementation(): Implementation {
    return {
      name: 'ExampleMcpServer',
      version: '1.0.0',
    };
  }

  // Configure server by adding tools, resources, and prompts
  configureServer(server: McpServer): void {
    setupServerTools(server);
    setupServerResources(server);
    setupServerPrompts(server);
  }
}

要添加功能，请使用以下模块：

工具（ src/tools.ts ）：定义客户端可以调用的函数

export function setupServerTools(server: McpServer) {
  server.tool(
    'tool_name',           // Name of the tool
    'Tool description',    // Description
    {                      // Parameters schema using zod
      param1: z.string().describe('Parameter description'),
    },       
    async ({ param1 }) => {
      // Tool implementation
      return {
        content: [
          {
            type: "text",
            text: `Result: ${param1}`
          }
        ]
      };
    }
  );
}

资源（ src/resources.ts ）：定义客户端可以访问的持久资源

export function setupServerResources(server: McpServer) {
  server.resource(
    'resource_name',
    'resource://path/{id}',
    async (uri: URL) => {
      // Resource implementation
      return {
        contents: [
          {
            text: `Resource data`,
            uri: uri.href
          }
        ]
      };
    }
  );
}

提示（ src/prompts.ts ）：定义提示模板

export function setupServerPrompts(server: McpServer) {
  server.prompt(
    'prompt_name',
    'Prompt description',
    () => ({
      messages: [{
        role: 'assistant',
        content: {
          type: 'text',
          text: `Your prompt text here`
        }
      }]
    })
  );
}

使用 Hono 定制路线

要使用McpHonoServerDO添加自定义 HTTP 端点，请扩展setupRoutes方法：

export class ExampleMcpServer extends McpHonoServerDO {
  // Other methods...

  protected setupRoutes(app: Hono<{ Bindings: Env }>): void {
    // Call the parent implementation to set up MCP routes
    super.setupRoutes(app);
    
    // Add your custom routes
    app.get('/api/status', (c) => {
      return c.json({ status: 'ok' });
    });
    
    app.post('/api/data', async (c) => {
      const body = await c.req.json();
      // Process data
      return c.json({ success: true });
    });
  }
}

McpServerDO 实现（原生 Cloudflare 路由）

如果您需要对 HTTP 请求处理进行更多控制，可以直接扩展McpServerDO 。这样您就可以完全控制fetch方法：

export class CustomMcpServer extends McpServerDO {
  // Required abstract method implementations
  getImplementation(): Implementation {
    return {
      name: 'CustomMcpServer',
      version: '1.0.0',
    };
  }
  
  configureServer(server: McpServer): void {
    setupServerTools(server);
    setupServerResources(server);
    setupServerPrompts(server);
  }
  
  // Override the fetch method for complete control over routing
  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);
    const path = url.pathname;
    
    // Handle custom routes
    if (path === '/api/custom') {
      return new Response(JSON.stringify({ custom: true }), {
        headers: { 'Content-Type': 'application/json' }
      });
    }
    
    // Pass through MCP-related requests to the parent implementation
    return super.fetch(request);
  }
}

当您需要执行以下操作时，此方法很有用：

使用自定义逻辑处理特定路线
实现复杂的中间件或身份验证
在请求到达 MCP 处理程序之前拦截或修改请求
在标准 MCP 实现之外添加自定义 WebSocket 或 SSE 端点

示例

CRUD 待办事项列表示例

要查看完整的工作示例，请查看CRUD Todo List MCP 示例，其中演示了：

使用 MCP 工具进行完整的 CRUD 操作
SQLite 数据库集成以实现持久性
通过 WebSocket/SSE 实时更新
全面的错误处理
高级过滤和排序功能
丰富的提示和资源

社区

加入我们的社区以获得帮助、分享想法并为项目做出贡献：

Discord ：加入#mcp频道，获取功能请求、支持和讨论

贡献

欢迎大家为改进此模板做出贡献！贡献方式如下：

分支存储库：创建一个分支以进行更改
创建分支：在新分支中进行更改
```
git checkout -b feature/your-feature-name
```

提交你的更改：做出有意义的提交

git commit -m "Add feature: brief description"

推送到你的 fork ：将你的更改推送到你的 fork
```
git push origin feature/your-feature-name
```
创建拉取请求：打开 PR，并详细描述您的更改

拉取请求指南

为你的 PR 提供一个清晰、描述性的标题
详细描述你的 PR 的作用
参考任何相关问题
如果适用，请包含屏幕截图或示例
确保所有测试通过
保持 PR 专注于单个功能或修复

对于较大的更改或功能，我们建议首先在我们的 Discord 频道中讨论它们，以确保与项目方向保持一致。

或者使用上面的“部署到 Cloudflare”按钮直接从 GitHub 部署。

执照

麻省理工学院

Xava Labs MCP Template

Xava Labs Typescript MCP 模板

入门

设置存储库

特征

可用脚本

发展

McpHonoServerDO 实现

使用工具、资源和提示进行扩展

使用 Hono 定制路线

McpServerDO 实现（原生 Cloudflare 路由）

示例

CRUD 待办事项列表示例

相关资源

核心软件包

文档

社区

贡献

拉取请求指南

执照

Resources

Latest Blog Posts

MCP directory API