AI导哈

MCP协议服务器

基于Cloudflare Workers和TypeScript构建的Model Context Protocol (MCP)服务器，支持Streamable HTTP传输协议，提供可扩展的工具和提示框架。

  • by ZenUml
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 ZenUml/diagramly-mcp-serverless

使用说明

MCP无服务器示意图

基于Cloudflare Workers和TypeScript构建的模型上下文协议（MCP）服务器，支持流式HTTP传输协议。

特性

  • 🚀 Cloudflare Workers上的无服务器架构
  • 📡 最新MCP流式HTTP传输协议支持
  • 🛠️ 可扩展工具框架
  • 📝 可扩展的提示框架
  • 🔧 TypeScript类型安全
  • 🌐 CORS支持
  • 💡 项目结构简单，易于扩展

项目结构

diagramly-mcp-serverless/
├── src/
│   ├── index.ts              # Main Worker entry point
│   ├── tools/
│   │   ├── index.ts          # Tools registry and manager
│   │   └── mermaid-to-image.ts # Mermaid diagram to image tool
│   └── prompts/
│       ├── index.ts          # Prompts registry and manager
│       └── mermaid-flowchart.ts # Mermaid flowchart prompt
├── package.json              # Project dependencies
├── tsconfig.json             # TypeScript configuration
├── wrangler.jsonc            # Cloudflare Worker configuration
└── README.md                 # Project documentation

快速开始

1.地方发展

npx wrangler dev

这将启动本地开发服务器，通常在 http://localhost:8787

2.部署到Cloudflare

npx wrangler deploy

4.类型检查

npm run type-check

API终点

  • POST /mcp -MCP协议通信端点
  • GET /health -健康检查端点
  • OPTIONS /* -CORS飞行前请求处理

内置功能

工具

目前包括：

  • 美人鱼形象：将美人鱼图转换为图像
    • 参数： diagramCode （字符串）， imageType （可选：“png”|“svg”）
    • 功能：使用Kroki服务将Mermaid图代码转换为PNG或SVG图像

提示

目前包括：

  • 美人鱼流程图：将内容转换为Mermaid流程图
    • 参数： content （字符串）
    • 功能：生成提示，将用户内容转换为Mermaid流程图

扩展指南

添加新工具

  1. 在中创建新的工具文件 src/tools/
  2. 按照以下步骤定义您的工具 ToolDefinition 接口
  3. 将其添加到 toolRegistry 在……里面 src/tools/index.ts

例子：

export const myNewTool: ToolDefinition = {
  name: "my-new-tool",
  description: "Description of what this tool does",
  inputSchema: {
    param1: z.string(),
    param2: z.number().optional()
  },
  handler: async ({ param1, param2 }) => {
    // Tool implementation logic
    return {
      content: [{
        type: "text",
        text: "Tool result"
      }]
    };
  }
};

添加新提示

  1. 在中创建新的提示文件 src/prompts/
  2. 根据以下内容定义提示 PromptDefinition 接口
  3. 将其添加到 promptRegistry 在……里面 src/prompts/index.ts

例子：

export const myNewPrompt: PromptDefinition = {
  name: "my-new-prompt",
  config: {
    title: "My New Prompt",
    description: "Description of what this prompt does",
    argsSchema: { content: z.string() }
  },
  handler: ({ content }) => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Your prompt template here: ${content}`
      }
    }]
  })
};

依赖项

  • @模型上下文协议/sdk：MCP框架核心
  • 代理：MCP代理库
  • 今天：Cloudflare Workers的Web框架
  • 动物圈：数据验证库
  • 西瓜：Mermaid图压缩库

许可证

MIT许可证

相关 MCP