Html Maker MCP

MCP服务器模板

一个用于构建MCP（模型上下文协议）服务器的启动模板。这个模板为创建您自己的MCP服务器提供了干净的基础，该服务器可以与Claude Desktop、Cursor、Claude Code、Gemini以及其他MCP兼容的AI助手进行集成。

目的

这个模板帮助您快速开始构建：

• 为AI助手定制的工具
• 动态内容资源提供商
• 常见操作的提示模板
• 外部API和服务的集成点

特点

• 两个示例工具：“hello-world”和“get-mcp-docs”
• 支持ES2022目标和ES模块的TypeScript
• 多客户端安装脚本（Claude Desktop、Cursor、Claude Code、Gemini 等）
• 自动化的npm发布工作流程
• 通过环境变量支持 .env.local
• 使用Zod进行验证的整洁项目结构

其工作原理

这个MCP服务器模板提供：

1. 使用MCP SDK进行基本服务器设置
2. 示例工具实现
3. 构建和安装脚本
4. 用于开发的TypeScript配置

附带的示例展示了如何创建一个简单的工具，该工具接受一个名称参数并返回问候语。

入门指南/开始使用

选项1：使用已发布的包（推荐）

您可以直接使用此MCP服务器，无需克隆：

# Run the server directly with npx
npx @r-mcp/boilerplate

选项2：定制并开发

# Clone the boilerplate
git clone 
cd mcp-server-boilerplate

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Start the server
pnpm start

安装脚本

这个模板包含了为不同MCP客户端提供的便捷安装脚本：

# Install to all MCP clients (Claude Desktop, Cursor, Claude Code, Gemini, MCP)
pnpm run install-server

# Install to specific clients
pnpm run install-desktop       # Claude Desktop
pnpm run install-cursor        # Cursor IDE
pnpm run install-code          # Claude Code CLI
pnpm run install-code-library  # Claude Code Library (~/.claude/mcp-library/)
pnpm run install-mcp           # Local .mcp.json for development

# You can also combine multiple targets:
node scripts/update-config.js cursor code desktop

这些脚本将：

• 自动构建项目（TypeScript 编译 + 设置 chmod 权限）
• 配置客户端以使用 npx @r-mcp/@latest （自动更新）
• 只有当地的 .mcp.json 使用的是开发版本（node dist/index.js)
• 包含来自（某处的）环境变量 .env.local 如果存在

发布您的服务器

发布您的自定义MCP服务器：

# Build, commit, and publish to npm in one command
pnpm run release

这个脚本（scripts/build-and-publish.js) 将会：

1. 首先提交任何待处理的更改
2. 将包名更新为 @r-mcp/
3. 更新 bin 名称以匹配目录
4. 自动递增补丁版本
5. 构建TypeScript项目
6. 提交版本号更新到Git
7. 推送到远程仓库
8. 发布到npm并设置为公开访问

与MCP客户端的使用

安装脚本会自动配置您的MCP客户端。以下为添加内容的参考：

生产客户端（Claude Desktop、Cursor、Claude Code、Gemini）：

{
  "mcpServers": {
    "boilerplate": {
      "command": "npx",
      "args": ["-y", "@r-mcp/boilerplate@latest"],
      "env": {
        // Environment variables from .env.local are included here
      }
    }
  }
}

本地开发（.mcp.json)：

{
  "mcpServers": {
    "boilerplate": {
      "command": "node",
      "args": ["/absolute/path/to/dist/index.js"],
      "env": {
        // Environment variables from .env.local are included here
      }
    }
  }
}

运行安装脚本后，重启您的MCP客户端以连接到服务器。

定制您的服务器

添加工具

工具是人工智能助手可以调用的功能。以下是基本结构：

server.tool(
  "tool-name",
  "Description of what the tool does",
  {
    // Zod schema for parameters
    param1: z.string().describe("Description of parameter"),
    param2: z.number().optional().describe("Optional parameter"),
  },
  async ({ param1, param2 }) => {
    // Your tool logic here
    return {
      content: [
        {
          type: "text",
          text: "Your response",
        },
      ],
    };
  }
);

添加资源

资源为人工智能提供可访问的动态内容：

server.resource(
  "resource://example/{id}",
  "Description of the resource",
  async (uri) => {
    // Extract parameters from URI
    const id = uri.path.split("/").pop();

    return {
      contents: [
        {
          uri,
          mimeType: "text/plain",
          text: `Content for ${id}`,
        },
      ],
    };
  }
);

添加提示

提示是可重用的模板：

server.prompt(
  "prompt-name",
  "Description of the prompt",
  {
    // Parameters for the prompt
    topic: z.string().describe("The topic to discuss"),
  },
  async ({ topic }) => {
    return {
      description: `A prompt about ${topic}`,
      messages: [
        {
          role: "user",
          content: {
            type: "text",
            text: `Please help me with ${topic}`,
          },
        },
      ],
    };
  }
);

项目结构

├── src/
│   └── index.ts              # Main MCP server implementation
├── scripts/
│   ├── update-config.js      # Multi-client configuration installer
│   └── build-and-publish.js  # Automated npm publishing workflow
├── dist/                     # Compiled JavaScript (generated)
├── package.json              # Project configuration
├── tsconfig.json             # TypeScript configuration
├── CLAUDE.md                 # Claude Code instructions
├── .env.local                # Environment variables (optional)
└── README.md                 # This file

开发工作流程

本地开发

1. 进行更改以 src/index.ts
2. 跑步 pnpm run build 编译TypeScript
3. 用（以下工具/方法）测试你的服务器 pnpm start
4. 使用 pnpm run install-mcp 用于本地测试
5. 重启您的MCP客户端以加载更改

发布更新

1. 在本地测试你的更改
2. 跑 pnpm run release 发布到npm
3. 使用（该服务/产品的）客户 npx @r-mcp/@latest 自动更新
4. 无需客户端重新配置

环境变量

创建一个 .env.local 用于环境特定配置的文件：

# .env.local
API_KEY=your-api-key
DATABASE_URL=your-database-url

这些变量在安装过程中会自动包含在MCP服务器配置中。

下一步行动

1. 克隆或复制这个模板
2. 自定义服务器名称和工具 src/index.ts
3. 添加您自己的工具、资源和提示
4. 在（相应位置）配置环境变量 .env.local
5. 跑 pnpm run release 发布您的服务器
6. 安装到客户端（使用） pnpm run install-server

许可证

麻省理工学院（MIT）