TemplateIO Image Generation

by lucker631

Not rated
GitHub

About

Generate images using the Templated.io API. Requires a Templated.io API key.

Details

Author
lucker631
Categories
Developer Tools, Design, Other, API

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.

No reviews yet — be the first

Sign in to leave a review

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.