truepane

truepane-mcp

Truepane 用のローカル MCP サーバーです。AI エージェント （Claude Code、Codex、…）が、シミュレーターで撮影したものなど、アプリの生のスクリーンショットを使って、 App Store／Google Play 向けのストア掲載用スライドを作成できます。ストアの正確な解像度に合わせた手順生成のデバイスフレーム、生成背景、 タイポグラフィ、言語ごとのローカライズに対応しています。

すべてローカルで実行されます。ネイティブキャンバス （@napi-rs/canvas）でレンダリングし、スクリーンショットはローカルのファイルパスから読み込み、PNG は ローカルのファイルパスに書き込みます。どこにもアップロードされません。**設定も API キーも不要です。**エージェント自体が言語モデルであるため、スタイル設定と 翻訳はエージェント自身の判断で行います。

エージェントでできること

• iPhone、iPad、Android スマートフォン、Android タブレット向けのプロジェクトを作成し、ターゲットやロケールごとのスクリーンショットを用意します。
• import_screenshots を使ってスクリーンショットのディレクトリを決定論的にプレビューして適用します。競合によって上書きが黙って行われることはありません。
• 正規化座標でテキストやデバイスを配置し、モックアップのサイズを変更し、テキストを整列させ、デバイスを −20°～+20°で回転させ、テキストブロックを −12°～+12°で傾けます。
• set_background_image を使って、スライドごと、すべてのスライド共通、または帯全体にまたがる長い背景をスライスして、スライドごとにカスタム背景画像を設定できます。その後、不透明度、スクリーン、フィット方法を調整できます。スクリーンを使うと、写真の上でもタイトルを読みやすく保てます。スライド自体のスクリーンショットから背景を作ることもでき、その場合はストレージを一切消費しません。
• custom 形状ファミリーでパラメーター指定の背景を構成できます。5 種類の配置（scatter、grid、row、radial、wave）に、6 種類のプリミティブ（ring、disc、arc、triangle、bar、blob）を組み合わせ、サイズ、ジッター、回転、間隔、位相、線幅、不透明度の段階変化を設定できます。これはコードではなくデータです。シードから決定論的に生成され、プロジェクトファイルで安全に共有でき、帯の空間上に配置されるため、複数スライドにわたって背景が連続します。
• 隣り合う 2 枚のスライドに、同期したデバイス 1 台をまたがって配置できます。切り抜かれた両半分では、スクリーンショット、位置、拡大縮小、回転が連動します。
• スクリーンショットやプロジェクトデータを含めずに、移植可能なブランドキットを保存して適用します。
• ネイティブのストアサイズ、1024×500 の Google Play フィーチャーグラフィック、または制限付きのカスタム寸法でレンダリングします。カスタムの幅と高さはセットで検証され、黙って置き換えられたり、上限・下限に丸められたりせず、無効な値は拒否されます。
• ブラウザーエディターと同じ、リリース前のアドバイザリー検査を実行します。
• リリースのベースラインを保存し、追加・変更・未変更・削除されたアセットを比較して、変更されたアセットだけをレンダリングします。
• Truepane のウェブエディターとの間で、編集可能なプロジェクト JSON を往復できます。

インストール

標準的な stdio MCP サーバーです。MCP 対応クライアントであれば、npx -y truepane-mcp で起動できます（チェックアウト不要）。Node ≥ 18 が必要です。

Claude Code

claude mcp add --scope user truepane -- npx -y truepane-mcp

Codex CLI

codex mcp add truepane -- npx -y truepane-mcp

または ~/.codex/config.toml で Codex を手動設定します。

[mcp_servers.truepane]
command = "npx"
args = ["-y", "truepane-mcp"]

Cursor、Windsurf、Claude Desktop、その他の JSON 設定対応クライアント — クライアントの mcpServers ブロックに追加します。

{
  "mcpServers": {
    "truepane": { "command": "npx", "args": ["-y", "truepane-mcp"] }
  }
}

クライアントを再起動し、Truepane のツールが利用可能になっていることを確認してください。

推奨されるエージェントのワークフロー

1. 最初に list_options を呼び出します。機能の全体マップと、有効なプラットフォーム、出力先、フォント、背景、構成プリセットが返されます。
2. スライドのコピーと任意のスクリーンショットには create_project を使用します。複数プラットフォームのプロジェクトでは targets を渡します。
3. ターゲット／ロケール用のメディアは set_screenshots で添付するか、import_screenshots で準備済みのディレクトリをプレビューし、レビュー済みのマップを明示的に適用します。
4. タイポグラフィ、色、背景、構成には set_style を使用します。背景写真またはストリップ全体の背景を使う場合は、まずローカルファイルを指定して set_background_image を呼び出し、その後 set_style background.image で調整します。 slide_index を指定すると構成はスライドごとに設定されます。デバイスの位置は正規化されたキャンバス空間で指定し、スケールは 0.4..1.6、回転は −20..20 です。 suggest_palette_from_screenshot はローカル計算による初期パレットを提供します。
5. 隣接するスライドの境界をまたいで1つのデバイスを連続して表示する場合は、span_device_across_slides を使用します。
6. set_translations でローカライズ済みのコピーと任意のローカライズ済みスクリーンショットを追加します。ロケール別のサブフォルダーに出力するには、language: "all" でレンダリングします。
7. validate_project を呼び出してから、render を実行し、インラインプレビューを確認します。完成するまで調整と再レンダリングを繰り返します。
8. ブラウザーエディターへの受け渡しには、export_project／load_project を使用します。

ツールマップ

目的	ツール
コンテンツの作成と編集	create_project、set_slides、set_screenshots、set_translations
メディアの一括処理と複数ターゲットへの対応	import_screenshots、set_screenshots
スタイルと構成	set_style、suggest_palette_from_screenshot、span_device_across_slides
背景画像	set_background_image、background.image を指定した set_style
再利用可能なビジュアルシステム	export_brand_kit、apply_brand_kit
ネイティブ、機能別、カスタムのキャンバス	set_output、render
リリースの安全性	validate_project、compare_release、set_release_baseline、changed_only を指定した render
ウェブエディターへの受け渡し	export_project、load_project

render はフル解像度の PNG を書き出し、コンパクトなインラインプレビューを返します。 全組み合わせを処理するには、target: "all" および／または language: "all" を指定します。連続した横長ストリップには what: "strip" を使用します。

フォント

Google Fonts は必要に応じて取得され、~/.cache/truepane/fonts にキャッシュされます（Inter は同梱されているため、オフラインでもすぐにレンダリングできます）。-apple-system フォントは macOS では実際の San Francisco としてレンダリングされます。これはインストール済みのシステムフォントを使用するもので、同梱または再配布されることはありません。Linux／CI では Inter にフォールバックします。SF は可変フォントのため、Regular／Bold だけでなく、全ウェイト範囲（titleWeight／subtitleWeight による Heavy／Black を含む）が解決されます。厳選された Google Fonts の Inter、Manrope、Fraunces も単一ファイルの可変フォントとして読み込まれるため、全ウェイト範囲が解決されます。それ以外の Google Fonts では静的フォントフェイスが使用されます（最大で約 700）。別のフォントの全ウェイト範囲を使いたい場合は、server/mcp/fonts.ts の VARIABLE_FONT_URLS に追加する issue または PR を作成してください。ラテン文字以外のターゲット言語では、対象の文字体系をカバーするフォントを選んでください（Inter はキリル文字／ギリシャ文字をカバーします。CJK には Noto Sans JP/KR/SC、アラビア語には Noto Sans Arabic を使用します。アラビア語は自動的に右から左へ整形・配置されます）。ブラウザーとは異なり、サーバーサイドのレンダリングではグリフごとのシステムフォントへのフォールバックがないため、フォントに含まれないグリフはボックスとして表示されます。

ライセンス

AGPL-3.0。Truepane プロジェクトの一部です。ウェブアプリと全ドキュメントについては、メインリポジトリをご覧ください。