MCP TemplateIO - 图像生成工具

这是一个使用 mcp-framework 构建的模型上下文协议 (MCP) 服务器，它提供了一个使用 Templated.io 的图像生成工具。

概述

此模板为构建带有自定义工具的 MCP 服务器提供了起点。它包含一个示例工具以及如何添加更多工具、开发这些工具并将其发布到 npm 的说明。本 README 将引导您完成设置、开发和部署自己的 MCP 服务器的过程。

快速开始

# Install dependencies
npm install

# Build the project
npm run build

项目结构

mcp-templateio/
├── src/
│   ├── tools/        # MCP Tools
│   │   ├── ExampleTool.ts
│   │   └── TemplatedImageTool.ts # Image generation tool
│   └── index.ts      # Server entry point
├── package.json
└── tsconfig.json

可用工具

模板化图像生成器

该工具基于给定的文本和图片 URL 使用 Templated.io API 根据模板生成一张图片。

输入参数：

• templateId: 要使用的 Templated.io 模板 ID
• photoBgImageUrl: 放置在 "photo-bg" 层中的图片 URL。
• bgYellowImageUrl: 放置在 "bg-yellow" 层中的图片 URL。
• buildText: 用于 "build" 文本层的文字内容。

工具开发

示例工具结构：

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

interface MyToolInput {
  message: string;
}

class MyTool extends MCPTool<MyToolInput> {
  name = "my_tool";
  description = "Describes what your tool does";

  schema = {
    message: {
      type: z.string(),
      description: "Description of this input parameter",
    },
  };

  async execute(input: MyToolInput) {
    // Your tool logic here
    return `Processed: ${input.message}`;
  }
}

export default MyTool;

添加组件

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

# Add a new tool
mcp add tool my-tool

# Example tools you might create:
mcp add tool data-processor
mcp add tool api-client
mcp add tool file-handler

发布到 npm

1. 更新您的 package.json：

   • 确保 name 是唯一的，并遵循 npm 命名约定
   • 设置适当的 version
   • 添加 description, author, license 等
   • 检查 bin 是否指向正确的入口文件

2. 在本地构建和测试：

   npm run build
   npm link
   mcp-templateio  # 本地测试您的 CLI
   

3. 登录 npm（如果需要的话先创建账号）：

   npm login
   

4. 发布您的包：

   npm publish
   

发布后，用户可以将其添加到他们的 Claude 桌面客户端中（请参阅下方），或者通过 npx 运行它。

与 Claude Desktop 结合使用

本地开发

将以下配置添加到您的 Claude Desktop 配置文件中：

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcp-templateio": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-templateio/dist/index.js"]
    }
  }
}

发布后

在此获取您的 API 密钥: https://app.templated.io/api-integration?template=4ae9a86b-4ecd-44ee-aebd-7c5a49c16969

将以下配置添加到您的 Claude Desktop 配置文件中：

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcp-templateio": {
      "command": "node",
      "args": [
        "C:\\Users\\alex0\\Documents\\AA_CodeAndScripts\\modelcontextprotocol\\mcp-templateio\\dist\\index.js"
      ],
      "env": {"TEMPLATED_API_KEY":"YOUR-API-KEY-HERE"}
    },
  }
}

构建与测试

1. 对您的工具进行修改
2. 运行 npm run build 来编译
3. 服务器将在启动时自动加载您的工具

更多信息

• MCP Framework Github
• MCP Framework 文档