MCP Templateio

🚀 MCP TemplateIO - 画像生成ツール

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

🚀 クイックスタート

# 依存関係のインストール
npm install

# プロジェクトのビルド
npm run build

✨ 主な機能

このテンプレートは、カスタムツールを持つMCPサーバーを構築するための起点を提供します。サンプルツールが含まれており、さらに多くのツールを追加し、開発し、npmに公開する方法に関する説明も付属しています。このREADMEファイルでは、独自のMCPサーバーのセットアップ、開発、およびデプロイのプロセスを案内します。

📦 インストール

# 依存関係のインストール
npm install

# プロジェクトのビルド
npm run build

📚 ドキュメント

プロジェクト構造

mcp-templateio/
├── src/
│   ├── tools/        # MCPツール
│   │   ├── ExampleTool.ts
│   │   └── TemplatedImageTool.ts # 画像生成ツール
│   └── index.ts      # サーバーエントリーファイル
├── 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 = "ツールの機能を説明する";

  schema = {
    message: {
      type: z.string(),
      description: "この入力パラメータの説明",
    },
  };

  async execute(input: MyToolInput) {
    // ツールのロジックをここに記述
    return `処理結果：${input.message}`;
  }
}

export default MyTool;

コンポーネントの追加

このプロジェクトには、src/tools/ExampleTool.ts と TemplatedImageTool.ts にサンプルツールが付属しています。CLIを使用して、さらに多くのツールを追加できます。

# 新しいツールを追加
mcp add tool my-tool

# カスタムツールの例
mcp add tool custom-image-generator

npmへの公開

公開前の設定

1. package.jsonの編集

   • name、version、description フィールドが正しいことを確認します。
   • すべての依存関係を追加します。

2. README.mdの作成

   • ツールとその機能を簡単に説明します。

3. ライセンスの設定

   • package.jsonでライセンス情報を指定します。例：

     "license": "MIT"
     

4. ビルドスクリプトの設定

   • package.jsonのscriptsセクションに、ビルド、テスト、およびクリーンアップコマンドを追加します。

5. npmへの登録

   • 次のコマンドを使用してパッケージを登録します。

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

公開

npm publish

Claude Desktopとの連携

グローバルインストール

npm install -g mcp-templateio

コマンドラインツール

mcp [command]

サポートされているコマンド：

• new <project-name>: 新しいプロジェクトを作成します。
• run: サーバーを起動します。

環境変数の設定

.env ファイルに以下の内容を追加します。

NODE_ENV=development
PORT=3000

Windowsの場合、%USERPROFILE%\_config\js\default.json を編集します。

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

macOSまたはLinuxの場合、~/.config/browserslist.json を作成します。

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

関連ドキュメント

• MCP Framework Github
• MCP Framework ドキュメント