Templateio

🚀 MCP TemplateIO - 画像生成ツール

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

🚀 クイックスタート

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

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

✨ 主な機能

このテンプレートは、カスタムツールを持つMCPサーバーの構築を支援します。サンプルツールが含まれており、さらなるツールの追加、開発、npmへの公開に関する説明も用意されています。

📦 インストール

依存関係のインストール

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: "build"テキストレイヤーのテキスト内容

ツール開発

ツールのサンプル構造

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 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  # ローカルでCLIをテストします
   

3. npmへのログイン（アカウントがない場合は作成してください）:

   npm login
   

4. パッケージの公開:

   npm publish
   

Claude Desktopの使用

# グローバルに依存関係をインストール
npm install -g mcp-templateio

# 新しいプロジェクトを作成して実行
mcp new my-project && cd my-project && npm start

package.jsonに以下の設定を追加します。

"scripts": {
  "start": "mcp start"
}

ビルドとテスト

npm run build
npm test

ドキュメントリソース

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