MCP TemplateIO - Image Generation Tool

A Model Context Protocol (MCP) server built with mcp-framework that provides an image generation tool using Templated.io.

Overview

This template provides a starting point for building MCP servers with custom tools. It includes an example tool and instructions on how to add more tools, develop them, and publish them to npm. This README will guide you through the process of setting up, developing, and deploying your own MCP server.

Related MCP server: Gemini MCP Image Generation Server

Quick Start

# Install dependencies npm install # Build the project npm run build

Project Structure

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

Available Tools

Templated Image Generator

This tool generates an image based on a template, given text and image URLs, using the Templated.io API.

Input Parameters:

templateId: ID of the Templated.io template to use
photoBgImageUrl: URL for the image to place in the "photo-bg" layer.
bgYellowImageUrl: URL for the image to place in the "bg-yellow" layer.
buildText: Text content for the "build" text layer.

Tool Development

Example tool structure:

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;

Adding Components

The project comes with an example tool in src/tools/ExampleTool.ts and the TemplatedImageTool.ts. You can add more tools using the 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

Publishing to npm

Update your package.json:
- Ensure name is unique and follows npm naming conventions
- Set appropriate version
- Add description, author, license, etc.
- Check bin points to the correct entry file
Build and test locally:
npm run build npm link mcp-templateio # Test your CLI locally
Login to npm (create account if necessary):
npm login
Publish your package:
npm publish

After publishing, users can add it to their claude desktop client (read below) or run it with npx

Using with Claude Desktop

Local Development

Add this configuration to your Claude Desktop config file:

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"] } } }

After Publishing

GET YOUR API KEY HERE: https://app.templated.io/api-integration?template=4ae9a86b-4ecd-44ee-aebd-7c5a49c16969

Add this configuration to your Claude Desktop config file:

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"} }, } }