MCP TemplateIO - 画像生成ツール

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

概要

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

Related MCP server: Meme 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

利用可能なツール

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

このツールは、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への公開

1. package.json を更新します。

   • nameが一意であり、npm の命名規則に従っていることを確認してください。

   • 適切なversionを設定する

   • description 、 author 、 licenseなどを追加します。

   • binが正しいエントリファイルを指しているか確認する

2. ローカルでビルドしてテストします。

   npm run build
   npm link
   mcp-templateio  # Test your CLI locally

3. npm にログインします (必要に応じてアカウントを作成します)。

   npm login

4. パッケージを公開します:

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

構築とテスト

1. ツールに変更を加える

2. npm run buildを実行してコンパイルする

3. サーバーは起動時にツールを自動的に読み込みます

もっと詳しく知る

• MCPフレームワーク Github

• MCPフレームワークドキュメント