MCP Templateio

🚀 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 生成图像。 输入参数：

工具开发

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

添加组件

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

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

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

发布到 npm

发布前配置

1. 编辑 package.json
   • 确保 name、version 和 description 字段正确。
   • 添加所有依赖项。
2. 创建 README.md
   • 简要描述您的工具及其功能。
3. 配置许可证
   • 在 package.json 中指定许可证信息，例如：

     "license": "MIT"
     

4. 设置构建脚本
   • 在 package.json 的 scripts 部分添加构建、测试和清理命令。
5. 注册到 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 Framework Github
• MCP Framework 文档