TemplateIO Image Generation

Genera imágenes usando la API de Templated.io. Requiere una clave de API de Templated.io.

Documentación

MseeP.ai Security Assessment Badge

MCP TemplateIO - Image Generation Tool

Un servidor de Model Context Protocol (MCP) construido con mcp-framework que proporciona una herramienta de generación de imágenes usando Templated.io.

Descripción general

Esta plantilla proporciona un punto de partida para construir servidores MCP con herramientas personalizadas. Incluye una herramienta de ejemplo e instrucciones sobre cómo añadir más herramientas, desarrollarlas y publicarlas en npm. Este README te guiará a través del proceso de configuración, desarrollo e implementación de tu propio servidor MCP.

Inicio rápido

# Install dependencies
npm install

# Build the project
npm run build

Estructura del proyecto

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

Herramientas disponibles

Templated Image Generator

Esta herramienta genera una imagen basada en una plantilla, dados texto y URLs de imágenes, usando la API de Templated.io.

Parámetros de entrada:

  • templateId: ID de la plantilla de Templated.io a usar
  • photoBgImageUrl: URL de la imagen para colocar en la capa "photo-bg".
  • bgYellowImageUrl: URL de la imagen para colocar en la capa "bg-yellow".
  • buildText: Contenido de texto para la capa de texto "build".

Desarrollo de herramientas

Estructura de ejemplo de herramienta:

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;

Añadir componentes

El proyecto incluye una herramienta de ejemplo en src/tools/ExampleTool.ts y el TemplatedImageTool.ts. Puedes añadir más herramientas usando la 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

Publicación en npm

  1. Actualiza tu package.json:

    • Asegúrate de que name sea único y siga las convenciones de nomenclatura de npm
    • Establece el version apropiado
    • Añade description, author, license, etc.
    • Verifica que bin apunte al archivo de entrada correcto
  2. Compila y prueba localmente:

    npm run build
    npm link
    mcp-templateio  # Test your CLI locally
    
  3. Inicia sesión en npm (crea una cuenta si es necesario):

    npm login
    
  4. Publica tu paquete:

    npm publish
    

Después de publicar, los usuarios pueden añadirlo a su cliente de Claude Desktop (lee abajo) o ejecutarlo con npx

Uso con Claude Desktop

Desarrollo local

Añade esta configuración a tu archivo de configuración de Claude Desktop:

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

Después de publicar

OBTÉN TU CLAVE DE API AQUÍ: https://app.templated.io/api-integration?template=4ae9a86b-4ecd-44ee-aebd-7c5a49c16969

Añade esta configuración a tu archivo de configuración de Claude Desktop:

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

Compilación y pruebas

  1. Haz cambios en tus herramientas
  2. Ejecuta npm run build para compilar
  3. El servidor cargará automáticamente tus herramientas al iniciarse

Aprende más