TemplateIO Image Generation
About
Generate images using the Templated.io API. Requires a Templated.io API key.
Details
- Author
- lucker631
- Categories
- Developer Tools, Design, Other, API
Jump to
Setup
Install TemplateIO Image Generation in your MCP client (Claude Desktop, Cursor, Windsurf, and others).
Repository: https://github.com/lucker631/mcp-templateio
Follow the installation instructions in the repository README, then restart your MCP client.
Generate images using the Templated.io API. Requires a Templated.io API key.
A Model Context Protocol (MCP) server built with mcp-framework that provides an image generation tool using Templated.io.
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.
# 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
This tool generates an image based on a template, given text and image URLs, using the Templated.io API.
- 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.
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;
The project comes with an example tool insrc/tools/ExampleTool.tsand theTemplatedImageTool.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
- Ensurenameis unique and follows npm naming conventions
- Set appropriateversion
- Adddescription,author,license, etc.
- Checkbinpoints to the correct entry file
npm run build npm link mcp-templateio # Test your CLI locally
Login to npm (create account if necessary):
After publishing, users can add it to their claude desktop client (read below) or run it with npx
Add this configuration to your Claude Desktop config file:
MacOS:~/Library/Application Support/Claude/claude_desktop_config.jsonWindows:%APPDATA%/Claude/claude_desktop_config.json
{ "mcpServers": { "mcp-templateio": { "command": "node", "args": ["/absolute/path/to/mcp-templateio/dist/index.js"] } } }
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.jsonWindows:%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"} }, } }
- Make changes to your tools
- Runnpm run buildto compile
- The server will automatically load your tools on startup
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
Generate images and videos from templates using the Placid.app API.
API-first platform for image optimization and document design. Generate optimized images, PDFs, and documents at scale with our visual editor and REST API.
Product mockup rendering API. Upload PSD templates, render photorealistic mockups with 9 MCP tools including AI render.
MCP server for generating mock 2D PNG assets for Games prototypes
Control Adobe After Effects through a standardized protocol, enabling AI assistants and other applications.
An MCP server that allows AI assistants to interact with Adobe After Effects.
Generate images using the Together AI API. Supports custom aspect ratios, save paths, and batch generation.
Build entire brand kits with a single prompt
An MCP server for the Dev.to API to search, browse, read, and create content on the platform.
Interact with the Figma API to access and manage design files and resources.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.





