hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Integrations

Enables publishing the MCP server as an npm package, allowing users to easily install and use the tool.
Utilizes TypeScript for developing MCP tools, providing type safety and better developer experience.
Uses Zod for schema validation of tool inputs, ensuring proper data validation for the image generation tools.

MCP TemplateIO - 画像生成ツール

mcp-framework を使用して構築された Model Context Protocol (MCP) サーバー。Templated.io を使用して画像生成ツールを提供します。

概要

このテンプレートは、カスタムツールを使ったMCPサーバー構築の出発点となります。サンプルツールと、ツールの追加、開発、そしてnpmへの公開方法の説明が含まれています。このREADMEでは、独自のMCPサーバーのセットアップ、開発、そしてデプロイのプロセスをガイドします。

クイックスタート

# 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

利用可能なツール

テンプレート画像ジェネレーター

このツールは、Templated.io API を使用して、テキストと画像の URL を指定して、テンプレートに基づいて画像を生成します。

入力パラメータ:

templateId : 使用するTemplated.ioテンプレートのID
photoBgImageUrl : 「photo-bg」レイヤーに配置する画像の URL。
bgYellowImageUrl : 「bg-yellow」レイヤーに配置する画像の URL。
buildText : 「ビルド」テキストレイヤーのテキストコンテンツ。

ツール開発

ツール構造の例:

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;

コンポーネントの追加

このプロジェクトsrc/tools/ExampleTool.tsとTemplatedImageTool.tsにサンプルツールが付属しています。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

npmへの公開

package.json を更新します。
- nameが一意であり、npm の命名規則に従っていることを確認してください。
- 適切なversionを設定する
- description 、 author 、 licenseなどを追加します。
- binが正しいエントリファイルを指しているか確認する
ローカルでビルドしてテストします。
npm run build npm link mcp-templateio # Test your CLI locally
npm にログインします (必要に応じてアカウントを作成します)。
npm login
パッケージを公開します:
npm publish

公開後、ユーザーはそれをクロードデスクトップクライアント（下記参照）に追加したり、npxで実行したりすることができます。

Claude Desktopでの使用

地域開発

この構成を 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"]
    }
  }
}

公開後

API キーはこちらから取得できます: https://app.templated.io/api-integration?template=4ae9a86b-4ecd-44ee-aebd-7c5a49c16969

この構成を 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"}
    },
  }
}

構築とテスト

ツールに変更を加える
npm run buildを実行してコンパイルする
サーバーは起動時にツールを自動的に読み込みます

もっと詳しく知る

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Templated.io を使用した画像生成ツールを提供するモデルコンテキストプロトコルサーバー。ユーザーは、テキストレイヤーと画像レイヤーを含むテンプレートに基づいてカスタマイズされた画像を作成できます。

Related Resources

Reddit Discussion about this server