JinDaGe - mcp-templateio MCP Details

article

README

🚀 MCP TemplateIO - 图像生成工具

这是一个借助 mcp - framework 构建的 Model Context Protocol (MCP) 服务器，提供了基于 Templated.io 的图像生成工具，可帮助用户轻松实现图像生成功能。

🚀 快速开始

# 安装依赖项
npm install

# 构建项目
npm run build

✨ 主要特性

为构建具有自定义工具的 MCP 服务器提供起点。
包含示例工具，并提供添加更多工具、开发及发布到 npm 的说明。
具备基于模板的图像生成器，可根据文字和图片 URL 生成图像。

📦 安装指南

全局安装

npm install -g mcp-templateio

💻 使用示例

基础用法

此工具使用 Templated.io API 根据给定的文字和图片 URL 生成图像。

# 输入参数示例
{
  "templateId": "your_template_id",
  "photoBgImageUrl": "your_photo_bg_image_url",
  "bgYellowImageUrl": "your_bg_yellow_image_url",
  "buildText": "your_build_text"
}

高级用法

自定义工具结构示例：

import { MCPTool } from "mcp-framework";
import { z } from "zod";

interface MyToolInput {
  message: string;
}

class MyTool extends MCPTool<MyToolInput> {
  name = "my_tool";
  description = "描述您的工具的功能";

  schema = {
    message: {
      type: z.string(),
      description: "此输入参数的描述",
    },
  };

  async execute(input: MyToolInput) {
    // 您的工具逻辑在此处
    return `处理结果：${input.message}`;
  }
}

export default MyTool;

📚 详细文档

项目结构

mcp-templateio/
├── src/
│   ├── tools/        # MCP 工具
│   │   ├── ExampleTool.ts
│   │   └── TemplatedImageTool.ts # 图像生成工具
│   └── index.ts      # 服务器入口文件
├── package.json
└── tsconfig.json

可用工具

基于模板的图像生成器

此工具使用 Templated.io API 根据给定的文字和图片 URL 生成图像。 输入参数： | 参数 | 详情 | | ---- | ---- | | templateId | 使用的 Templated.io 模板 ID | | photoBgImageUrl | 放置在“photo - bg”层中的图片 URL | | bgYellowImageUrl | 放置在“bg - yellow”层中的图片 URL | | buildText | 用于“构建”文字层的文字内容 |

工具开发

自定义工具结构示例可参考上述“使用示例”中的高级用法。

添加组件

该项目附带了示例工具在 src/tools/ExampleTool.ts 和 TemplatedImageTool.ts 中。您可以使用 CLI 添加更多工具：

# 添加一个新的工具
mcp add tool my-tool

# 自定义工具的示例
mcp add tool custom-image-generator

发布到 npm

发布前配置

编辑 package.json
- 确保 name、version 和 description 字段正确。
- 添加所有依赖项。
创建 README.md
- 简要描述您的工具及其功能。
配置许可证
- 在 package.json 中指定许可证信息，例如：
```
"license": "MIT"
```
设置构建脚本
- 在 package.json 的 scripts 部分添加构建、测试和清理命令。

注册到 npm

使用以下命令注册您的包：

npm register --user yourusername --email your.email@example.com

发布

npm publish

与 Claude Desktop 一起使用

命令行工具

mcp [command]

支持的命令：

new <project - name>: 创建新项目。
run: 运行服务器。

配置环境变量

将以下内容添加到您的 .env 文件：

NODE_ENV=development
PORT=3000

在 Windows 上，编辑 %USERPROFILE%\_config\js\default.json：

{
  "extends": ["~/_config/js/browserslist"]
}

在 macOS 或 Linux 上，创建 ~/.config/browserslist.json：

{
  "browserslist": {
    "production": [],
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

mcp-templateio