MCP Templateio

🚀 MCP TemplateIO - Image Generation Tool

An MCP (Model Context Protocol) server built with the mcp-framework, offering an image generation tool based on Templated.io.

📋 Overview

This template serves as a starting point for building an MCP server with custom tools. It includes an example tool and comes with 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 file
├── package.json
└── tsconfig.json

🛠️ Available Tools

Template-based Image Generator

This tool uses the Templated.io API to generate an image based on the given text and image URL.

Input Parameters:

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

🛠️ Tool Development

Example of a custom tool structure:

import { MCPTool } from "mcp-framework";
import { z } from "zod";

interface MyToolInput {
  message: string;
}

class MyTool extends MCPTool<MyToolInput> {
  name = "my_tool";
  description = "Describe the functionality of your tool";

  schema = {
    message: {
      type: z.string(),
      description: "Description of this input parameter",
    },
  };

  async execute(input: MyToolInput) {
    // Your tool logic goes here
    return `Processing result: ${input.message}`;
  }
}

export default MyTool;

➕ Adding Components

The project comes with example tools in src/tools/ExampleTool.ts and TemplatedImageTool.ts. You can use the CLI to add more tools:

# Add a new tool
mcp add tool my-tool

# Example of a custom tool
mcp add tool custom-image-generator

🚀 Publishing to npm

Pre-publishing Configuration

1. Edit package.json

   • Ensure the name, version, and description fields are correct.
   • Add all dependencies.

2. Create README.md

   • Briefly describe your tool and its functionality.

3. Configure the License

   • Specify the license information in package.json, for example:

     "license": "MIT"
     

4. Set up Build Scripts

   • Add build, test, and cleanup commands to the scripts section of package.json.

5. Register on npm

   • Register your package using the following command:

     npm register --user yourusername --email your.email@example.com
     

Publishing

npm publish

🛠️ Using with Claude Desktop

Global Installation

npm install -g mcp-templateio

Command-line Tools

mcp [command]

Supported commands:

• new <project-name>: Create a new project.
• run: Run the server.

Configuring Environment Variables

Add the following to your .env file:

NODE_ENV=development
PORT=3000

On Windows, edit %USERPROFILE%\_config\js\default.json:

{
  "extends": ["~/_config/js/browserslist"]
}

On macOS or Linux, create ~/.config/browserslist.json:

{
  "browserslist": {
    "production": [],
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

📚 Documentation

• MCP Framework Github
• MCP Framework Documentation