Pictify

@pictify/mcp-server

Pictify 用の MCP (Model Context Protocol) サーバーです。Claude、Cursor、Windsurf などの AI エージェントから、画像、GIF、動画、PDF を生成できます。

ワンラインでインストール。コードは不要です。 AI アシスタントに自然言語で指示するだけで、OG 画像、ソーシャルメディアカード、スクリーンショット、アニメーション GIF、PDF 請求書、証明書などを作成できます。

何ができますか？

• HTML/CSS、URL、再利用可能なテンプレートから画像を生成します（OG 画像、Twitter カード、バナー、製品のスクリーンショット）
• テンプレートから動画やアニメーション GIF をレンダリングします。エージェントが作成した Remotion シーンにも対応しています
• テンプレートからPDF をレンダリングします（請求書、証明書、レポート、配送ラベル）
• 1 回のリクエストで最大 100 個のパーソナライズ画像を一括生成します（チームバッジ、イベントパス、製品カタログ）
• 動的コンテンツに対応する 50 種類以上の式関数を備えたテンプレートシステム（条件分岐、文字列操作、日付の書式設定）

Claude（claude.ai + Claude Code + Claude Desktop）、Cursor、Windsurf、および MCP 対応のあらゆるクライアントで利用できます。

クイックスタート

Claude.ai（Web）

ホスト型のリモートサーバーを使用します。インストールも API キーも不要です。

1. claude.ai にアクセスし、設定 > コネクターを開きます
2. カスタムコネクターを追加をクリックします
3. URL：https://mcp.pictify.io
4. 追加をクリックし、次に接続をクリックします。Pictify にログインしてアクセスを承認します

詳細設定には何も入力する必要はありません。接続は Pictify の設定の接続済みアプリに表示され、いつでも切断できます。

ローカルサーバーの前提条件

npm パッケージではブラウザーでのログインではなく、API キーを使って認証します。

1. pictify.io でサインアップするか、ログインします
2. API トークンを開きます
3. 新しいトークンを作成してコピーします

Claude Code

claude mcp add pictify -e PICTIFY_API_KEY=your_api_key -- npx -y @pictify/mcp-server

Claude Desktop

設定ファイルに追加します。

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

{
  "mcpServers": {
    "pictify": {
      "command": "npx",
      "args": ["-y", "@pictify/mcp-server"],
      "env": {
        "PICTIFY_API_KEY": "your_api_key"
      }
    }
  }
}

保存後、Claude Desktop を再起動します。

Cursor

Cursor の MCP 設定（設定 > MCP サーバー）に追加します。

{
  "mcpServers": {
    "pictify": {
      "command": "npx",
      "args": ["-y", "@pictify/mcp-server"],
      "env": {
        "PICTIFY_API_KEY": "your_api_key"
      }
    }
  }
}

Windsurf

Windsurf の MCP 設定に追加します。

{
  "mcpServers": {
    "pictify": {
      "command": "npx",
      "args": ["-y", "@pictify/mcp-server"],
      "env": {
        "PICTIFY_API_KEY": "your_api_key"
      }
    }
  }
}

使用例

接続した後、次のようなプロンプトを試してみてください。

ソーシャルメディアカードを作成する：

「『Getting Started with MCP』というタイトルのブログ記事用に、青いグラデーション背景の 1200x630 の Twitter カード画像を作成してください。」

Web サイトのスクリーンショットを撮る：

「stripe.com の 1440x900 のスクリーンショットを撮ってください。」

テンプレートをレンダリングする：

「テンプレートの一覧を表示して、blog-header テンプレートをタイトル『Hello World』でレンダリングしてください。」

画像を一括生成する：

「team-badge テンプレートを使って、次の 10 人のチームメンバーの画像を生成してください：...」

PDF の請求書を作成する：

「請求書テンプレートを、会社名『Acme Inc』、金額『$1,500』、日付『March 2026』で PDF としてレンダリングしてください。」

利用可能なツール

画像生成

ツール	説明
pictify_create_image	HTML/CSS、URL のスクリーンショット、またはテンプレートから画像を生成します
pictify_get_image	ID で指定した画像の詳細を取得します

レンダリング履歴

ツール	説明
pictify_list_renders	レンダリングしたすべての画像、GIF、PDF、動画を 1 つのフィードに一覧表示します

テンプレート管理

ツール	説明
pictify_list_templates	フィルタリングとページネーションを使用して保存済みテンプレートを一覧表示します
pictify_get_template	テンプレートの詳細を取得します
pictify_get_template_variables	テンプレート変数の定義と型を取得します
pictify_render_template	変数を使ってテンプレートをレンダリングします。画像と PDF に対応します（format: 'pdf'）
pictify_multi_size_render	1 回の呼び出しで、1 つのテンプレートを複数のサイズでレンダリングします
pictify_create_template	新しいテンプレートを作成します（HTML または FabricJS）
pictify_update_template	既存のテンプレートを更新します
pictify_delete_template	テンプレートを削除します
pictify_validate_expression	使用前に {{ }} 式を解析できるか確認します
pictify_list_expression_functions	式内で利用可能な関数を一覧表示します

バッチ操作

ツール	説明
pictify_batch_render	バッチレンダリングジョブを開始します（最大 100 項目、非同期）
pictify_get_batch_results	バッチジョブのステータスを確認し、結果の URL を取得します
pictify_cancel_batch	実行中のバッチジョブをキャンセルします

動画

ツール	説明
pictify_list_video_templates	Remotion 動画テンプレートを一覧表示します
pictify_get_video_template	動画テンプレート 1 件の全情報を取得します
pictify_get_video_template_variables	動画テンプレートが必要とする変数を確認します
pictify_render_video	動画テンプレートを MP4 または GIF にレンダリングします
pictify_create_video_template	独自の Remotion シーンをテンプレートとしてアップロードします
pictify_generate_video_template	テキストプロンプトから動画テンプレートを生成します
pictify_update_video_template	動画テンプレートの名前、サイズ、長さ、またはコードを更新します
pictify_duplicate_video_template	動画テンプレートを複製します
pictify_delete_video_template	動画テンプレートを削除します

設定

変数	説明	デフォルト
PICTIFY_API_KEY	Pictify API キー（stdio モードで必須）	—
PICTIFY_BASE_URL	カスタム API ベース URL	https://api.pictify.io
PICTIFY_DEBUG	詳細なログを stderr に出力します	false
PICTIFY_MCP_SOURCE	この MCP サーバーのインストール元を示すスラッグ（例：mcp.so、glama、smithery、claude_desktop_gallery、github）。すべての API 呼び出しで X-Pictify-MCP-Source として送信され、Pictify がディレクトリ別にインストールを把握できるようにします。	unknown
PICTIFY_ANALYTICS_DISABLED	1、true、または yes に設定すると、使用状況分析を一切送信しません	false

HTTP サーバーをセルフホストする場合は、MCP_PORT、MCP_PUBLIC_URL（保護されたリソースのメタデータドキュメントを生成するために使用する公開オリジン）、および PICTIFY_AUTH_SERVER_URL（クライアントの接続先となる OAuth 認可サーバー。デフォルトは https://api.pictify.io。PICTIFY_AUTH_SERVER も使用できます）が追加されます。

使用状況分析

このサーバーは PostHog にツールの使用状況を報告し、エージェントがどのツールを利用し、どのツールで失敗するかを把握できるようにします。各呼び出しでは、ツール名、引数と結果、処理時間、エラーの有無、申告された意図、クライアント名とバージョン、さらに API キーからアカウントが特定できる場合はメールアドレスとプランが記録されます。

引数と結果には、渡された HTML、URL、プロンプト、テンプレート変数が含まれます。これを許容できない場合は、PICTIFY_ANALYTICS_DISABLED=1 を設定してください。データは一切送信されません。

インストール元の識別

@pictify/mcp-server を MCP ディレクトリに登録する際は、掲載先からの登録を把握できるよう、インストールスニペットに PICTIFY_MCP_SOURCE を設定してください。mcp.so ディレクトリエントリの例：

{
  "mcpServers": {
    "pictify": {
      "command": "npx",
      "args": ["-y", "@pictify/mcp-server"],
      "env": {
        "PICTIFY_API_KEY": "your_api_key",
        "PICTIFY_MCP_SOURCE": "mcp.so"
      }
    }
  }
}

ホスト型リモートサーバー（https://mcp.pictify.io）では、代わりにコネクター URL のクエリパラメーターとしてスラッグを渡してください。サーバーはこれを OAuth セッションに保存します。

https://mcp.pictify.io?source=mcp.so

使用できるスラッグ：小文字、数字、.、-、_。最大 64 文字です。それ以外の値は unknown に置き換えられます。

開発

git clone https://github.com/pictify-io/pictify-mcp.git
cd pictify-mcp
npm install
npm run build

MCP Inspector でテストします。

PICTIFY_API_KEY=your_key npm run inspector

ライセンス

MIT