Skip to main content
Glama
by Disturbing

Xava Labs Typescript MCP 模板

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

入门

设置存储库

选项 A:使用此模板

  1. 单击此存储库顶部的“使用此模板”按钮

  2. 克隆你的新存储库

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

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

部署到 Cloudflare

注意:配置只需要

选项 C:使用 cloudflare create

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

  1. 为方便起见,请复制以下文本

xava-labs/mcp-template

  1. 运行以下命令,按照交互式提示选择名称,然后以“来自 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); } }

要添加功能,请使用以下模块:

  1. 工具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}` } ] }; } ); }
  1. 资源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 } ] }; } ); }
  1. 提示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频道,获取功能请求、支持和讨论

贡献

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

  1. 分支存储库:创建一个分支以进行更改

  2. 创建分支:在新分支中进行更改

    git checkout -b feature/your-feature-name
  3. 提交你的更改:做出有意义的提交

    git commit -m "Add feature: brief description"
  4. 推送到你的 fork :将你的更改推送到你的 fork

    git push origin feature/your-feature-name
  5. 创建拉取请求:打开 PR,并详细描述您的更改

拉取请求指南

  • 为你的 PR 提供一个清晰、描述性的标题

  • 详细描述你的 PR 的作用

  • 参考任何相关问题

  • 如果适用,请包含屏幕截图或示例

  • 确保所有测试通过

  • 保持 PR 专注于单个功能或修复

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

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

执照

麻省理工学院

-
security - not tested
A
license - permissive license
-
quality - not tested

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Disturbing/mcp-live-code'

If you have feedback or need assistance with the MCP directory API, please join our Discord server