Templated

Templated MCP サーバー

Templated 向けの MCP（Model Context Protocol）サーバーです。Templated は、画像、動画、PDF を自動生成するための API です。

このサーバーを使うと、Claude、Cursor、ChatGPT などの AI アシスタントが、自然言語で Templated アカウントを操作できます。レンダリングの生成、テンプレートの管理、アセットのアップロードなど、すべての API 機能を利用できます。

機能

• レンダリング生成：テンプレートから画像（JPG、PNG、WebP）、動画（MP4）、PDF を作成
• テンプレート管理：テンプレートの一覧表示、作成、更新、複製、削除
• レイヤーの確認：テンプレートのレイヤーを取得し、カスタマイズ可能な項目を確認
• アセット管理：画像、動画、カスタムフォントをアップロードして管理
• フォルダー整理：テンプレート用のフォルダーを作成して管理

クイックスタート

API キーを取得する

1. app.templated.io でアカウントを登録します
2. API Key ページ に移動します
3. API キーをコピーします

接続方法

方法 1：リモートサーバー（推奨）

ホスト型 MCP サーバーを使用します。インストールは不要で、常に最新の状態です。

エンドポイント： https://mcp.templated.io/mcp（OAuth ログイン）— または、自動化には https://mcp.templated.io/mcp?apiKey=YOUR_API_KEY を使用します

Claude（ウェブ、デスクトップ、モバイル）

Templated は Claude コネクターのディレクトリに掲載されています。claude.ai/directory/templatedio を開き（または Customize → Connectors から Templated を検索し）、Connect をクリックして Templated アカウントにサインインします。代わりにカスタムコネクターとして追加するには、https://mcp.templated.io/mcp を指定して Settings → Connectors → Add custom connector を選択します。

Claude Code

claude mcp add --transport http templated https://mcp.templated.io/mcp

その後、Claude Code 内で /mcp を実行し、プロンプトが表示されたらサインインします。

Cursor IDE

または、~/.cursor/mcp.json に手動で追加します。いずれの場合も、Cursor から求められたら Login をクリックして、Templated にサインインします。

{
  "mcpServers": {
    "templated": {
      "url": "https://mcp.templated.io/mcp"
    }
  }
}

自動化には、代わりに URL として https://mcp.templated.io/mcp?apiKey=your-api-key-here を使用します。

ChatGPT

1. Settings → Connected Apps → Add MCP Server に移動します
2. URL に https://mcp.templated.io/mcp を入力します
3. Authentication を OAuth に設定し、プロンプトが表示されたら Templated にサインインします
4. Create をクリックします

別の方法（自動化）： https://mcp.templated.io/mcp?apiKey=your-api-key-here を入力し、Authentication を No Auth に設定します。

Cursor と Grok 用のプラグイン

このリポジトリは、ホスト型 MCP サーバーと 3 つのスキルをまとめたプラグインでもあります。

• templated：既存のテンプレートからレンダリング（正確なレイヤー名、バッチ、サイズ、複数ページの PDF、PDF の結合）
• templated-design：短い概要から新しいテンプレートをデザインするか、既存のテンプレートのレイアウトを修正
• setup：初回実行時にアカウントを確認して最初のレンダリングを作成するフロー。テンプレートがまだないアカウントにも対応

ファイル	使用先
.cursor-plugin/plugin.json	Cursor と Grok Bot（Cursor Marketplace）
.grok-plugin/plugin.json	Grok Build（xAI plugin marketplace）
.mcp.json	MCP サーバー（https://mcp.templated.io/mcp）
skills/	上記のスキル（ChatGPT プラグインにもパッケージ化されています）

設定は不要です。最初のツール呼び出しで Templated のサインイン（OAuth）が開き、そこでアカウントを作成することもできます。マシン上で実行されるものはなく、プラグインはホスト型サーバーに接続するだけです。

Cursor でローカルに試すには、このリポジトリを ~/.cursor/plugins/local/templated にクローンして、Developer: Reload Window を実行します。

方法 2：ローカルサーバー

お使いのマシン上で MCP サーバーをローカルに実行します。Node.js 18 以降が必要です。

Claude Desktop

リモートコネクターではなくローカルでサーバーを実行するには、設定ファイルに追加します。

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "templated": {
      "command": "npx",
      "args": ["mcp-server-templated"],
      "env": {
        "TEMPLATED_API_KEY": "your-api-key-here"
      }
    }
  }
}

Cursor IDE（ローカル）

~/.cursor/mcp.json に追加します：

{
  "mcpServers": {
    "templated": {
      "command": "npx",
      "args": ["mcp-server-templated"],
      "env": {
        "TEMPLATED_API_KEY": "your-api-key-here"
      }
    }
  }
}

手動インストール

# Using npx (no install needed)
npx mcp-server-templated

# Or install globally
npm install -g mcp-server-templated

認証

リモートサーバーでは、次の 2 つの方法で認証できます。

• OAuth 2.1：Templated の認可サーバー経由で認証します。API キーを指定せずに https://mcp.templated.io/mcp に接続すると、インタラクティブクライアント（Claude、ChatGPT、Cursor、Claude Code）で自動的に使用されます。
• API キー：URL に ?apiKey=YOUR_API_KEY を指定するか、Authorization: Bearer YOUR_API_KEY ヘッダーを使用します。自動化やマルチテナントのスコープ設定（folderId／externalId）に使用します。

利用可能なツール

入力、権限クラス（読み取り、書き込み、機密性の高い書き込み）、副作用を含む完全なリファレンスについては、docs/tools.md を参照してください（npm run build && npm run docs:tools で再生成できます）。

レンダリング操作

ツール	説明
create_render	テンプレートから画像、動画、または PDF を作成します
get_render	特定のレンダリングの詳細を取得します
list_renders	アカウント内のすべてのレンダリングを一覧表示します
delete_render	レンダリングを削除します
merge_renders	複数の PDF レンダリングを 1 つに結合します

テンプレート操作

ツール	説明
list_templates	すべてのテンプレートを一覧表示します（検索／フィルター対応）
get_template	テンプレートの詳細を取得します
get_template_layers	テンプレートのすべてのレイヤーを取得します
get_template_pages	複数ページのテンプレートのページを取得します
create_template	新しいテンプレートを作成します（layers を使用した単一ページ、pages を使用した複数ページ／複数サイズ）
update_template	既存のテンプレートを更新します（pages を使用してページを追加または編集）
clone_template	テンプレートを複製します（新しい name は任意）
delete_template	テンプレートを削除します
list_template_renders	テンプレートから作成したレンダリングを一覧表示します

フォルダー操作

ツール	説明
list_folders	すべてのフォルダーを一覧表示します
create_folder	新しいフォルダーを作成します
update_folder	フォルダー名を変更します
delete_folder	フォルダーを削除します

アセット操作

ツール	説明
list_uploads	アップロード済みのアセットを一覧表示します
create_upload	URL からファイルをアップロードします
delete_upload	アップロードを削除します
list_fonts	カスタムフォントを一覧表示します
upload_font	カスタムフォントをアップロードします
delete_font	名前を指定してカスタムフォントを削除します

アカウント

ツール	説明
get_account	現在の期間のレンダリング使用量を取得します

チャット内でのレンダリングプレビュー

MCP Apps に対応したホスト（ウェブ、デスクトップ、モバイルの Claude、ChatGPT、VS Code など）では、create_render と get_render の結果が会話内のプレビューカードに表示されます。

• 画像（PNG、JPG、WebP）はカードに合わせて表示され、MP4 のレンダリングには動画プレーヤーが表示され、PDF はファイルタイルとして表示されます。
• 複数ページのテンプレートでは、ページがグリッドで表示されます（PDF の場合はリスト表示）。
• 各カードには Download ボタンと Open in editor ボタンがあり、ホストのライトテーマまたはダークテーマに従います。
• 処理中のレンダリングは待機状態を表示し、ファイルの準備ができると自動的に更新されます。

カードは ui://templated/render-card-v1.html という UI リソースです。自己完結型の HTML ファイル（約 21 KB）で、cdn.templated.media と templated-assets.s3.amazonaws.com からレンダリングファイルを読み込む以外には、何も読み込みません。MCP Apps に対応していないクライアント（Cursor、Claude Code、スクリプト）には、従来と同じ JSON テキストの結果に加え、レンダリングの URL、形式、サイズ、ステータスを含む structuredContent が返されます。

使用例

設定が完了したら、AI アシスタントに次のように依頼できます。

• 「テンプレートを一覧表示して」
• 「テンプレート [ID] からレンダリングを作成して、タイトルを『Hello World』に設定して」
• 「名前を『John Doe』にした PDF 証明書を作成して」
• 「テンプレート [ID] にはどのレイヤーがある？」
• 「タイトルレイヤーと画像レイヤーを含む『Social Post』という新しいテンプレートを作成して」
• 「Instagram のテンプレートを複製して、名前を変更して」
• 「この画像をアカウントにアップロードして」
• 「API の使用状況とアカウント情報を表示して」

レンダリングの作成

"Create a render using template abc-123 with these changes:
- Set the 'title' layer text to 'Welcome!'
- Set the 'photo' layer image to https://example.com/photo.jpg
- Output as PNG with transparent background"

Claude は次の内容で create_render ツールを使用します。

{
  "template": "abc-123",
  "format": "png",
  "transparent": true,
  "layers": {
    "title": { "text": "Welcome!" },
    "photo": { "image_url": "https://example.com/photo.jpg" }
  }
}

開発

# Clone the repository
git clone https://github.com/templated-io/mcp-server-templated.git
cd mcp-server-templated

# Install dependencies
npm install

# Build (the server, then the preview card into dist/ui/render-card.html)
npm run build

# Test
npm test

# Run in stdio mode (for local MCP clients)
TEMPLATED_API_KEY=your-key node dist/index.js

# Run in HTTP mode (for remote access)
PORT=3456 node dist/index.js
# Then access: http://localhost:3456/mcp?apiKey=your-key

MCP Inspector でのテスト

npx @modelcontextprotocol/inspector npx mcp-server-templated

リソース

• Templated のドキュメント
• MCP のドキュメント
• テンプレートギャラリー

ライセンス

MIT