MCP TemplateIO - 图像生成工具
使用 mcp-framework 构建的模型上下文协议 (MCP) 服务器,它使用 Templated.io 提供图像生成工具。
概述
此模板提供了使用自定义工具构建 MCP 服务器的起点。它包含一个示例工具,并提供有关如何添加、开发更多工具以及将其发布到 npm 的说明。此 README 将指导您完成设置、开发和部署您自己的 MCP 服务器的过程。
Related MCP server: Gemini MCP Image Generation Server
快速入门
# 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可用工具
模板图像生成器
该工具使用 Templated.io API,根据模板、给定的文本和图像 URL 生成图像。
输入参数:
templateId:要使用的 Templated.io 模板的 IDphotoBgImageUrl:放置在“photo-bg”层的图像的 URL。bgYellowImageUrl:放置在“bg-yellow”层的图像的 URL。buildText:“构建”文本层的文本内容。
工具开发
示例工具结构:
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
更新你的 package.json:
确保
name唯一并遵循 npm 命名约定设置适当的
version添加
description、author、license等。检查
bin指向正确的入口文件
本地构建和测试:
npm run build npm link mcp-templateio # Test your CLI locally登录 npm(如有必要,请创建帐户):
npm login发布你的包:
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"}
},
}
}构建和测试
更改你的工具
运行
npm run build进行编译服务器将在启动时自动加载您的工具