MCP TemplateIO - 画像生成ツール

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

概要

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

Related MCP server: Gemini MCP Image Generation 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への公開

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