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.

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

Building and Testing

Make changes to your tools
Run npm run build to compile
The server will automatically load your tools on startup

Learn More

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

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

Building and Testing

Make changes to your tools
Run npm run build to compile
The server will automatically load your tools on startup