Web UI

MCP サーバー経由で Photoshop を操作する、完全ローカルのチャット UI。1 コマンドでブラウザが開きます — IDE は不要です。

1 コマンドで開始

npx -p @alisaitteke/photoshop-mcp photoshop-mcp-ui

127.0.0.1(空きポートは自動選択)でローカルサーバーが起動し、既定のブラウザでチャット UI が自動的に開きます。

プロバイダーを選ぶ

初回起動時に 1 つ選びます — API キー、または既存の CLI サブスクリプションアカウント(Anthropic と Google)。

プロバイダーモデルAPI キーCLI アカウント
AnthropicClaude Sonnet / Opus / Haikuconsole.anthropic.comnpm i -g @anthropic-ai/claude-code → claude auth login
OpenAIGPT-5, GPT-4.1, o-seriesplatform.openai.com—
GoogleGemini 2.5 Pro / Flash / Flash-Liteaistudio.google.comnpm i -g @google/gemini-cli → gemini auth login
OpenRouter100+ modelsopenrouter.ai—

2 つの認証方法

API キー既定
プロバイダーのキーを使う Vercel AI SDK。使用量は API 料金としてトークンごとに課金され、UI にはチャットごとの推定コストが表示されます。
Uses your accountサブスクリプションに含まれる
ローカルの Claude Code または Gemini CLI の OAuth セッションを再利用します。API キーは保存されず、使用量は API 課金ではなくサブスクリプションのクォータにカウントされます。

Settings でプロバイダーごとに認証方法を切り替えられます。もう一方の資格情報は失われません — API キーを残したまま CLI アカウントを試し、あとで戻すこともできます。

初回起動時の流れ

  1. プロバイダーを選び、API key または Uses your account を選択します。
  2. キーを検証するか、CLI 接続を確認します。設定はローカルの ~/.photoshop-mcp/data.db(SQLite、chmod 600)に保存されます — キーがマシンの外に出ることはありません。
  3. 自然言語でプロンプトを入力します。UI はモデルの返答をストリーミング表示し、Photoshop のツール呼び出しをリアルタイムで実行し、各呼び出しを確認可能なカード(入力+結果)として描画します。
  4. プロバイダー、認証方法、モデルは Settings またはモデルセレクターからいつでも切り替えられます — チャット、コスト、ツール履歴はセッションをまたいで保持されます。
Action Planベータ

API キー認証向けのオプションの実行モード。ステップごとのモデル → ツールのループの代わりに、1 回の計画呼び出しで Photoshop ツール呼び出しの順序付き todo リストを作成し、それを順番に直接実行します。

  • 1 回の計画呼び出しで、Photoshop ツール呼び出しの順序付き todo リストを作成します。
  • ツールは順番に直接実行されます — ステップ間の余分なモデルの往復はありません。
  • ステップが失敗した場合は、上限付きの修復ループが残りのステップだけを再計画します(最大 3 回)。

既定ではオフ — モデルセレクターの横のトグルで切り替えます。「背景を削除して Web 用に書き出して」のような複数ステップのプロンプトに最適で、モデル呼び出しが減り、全体の実行が速くなります。

あとから認証を切り替える

サイドバーからいつでも Settings を開けます。

操作API キーモードCLI アカウントモード
セットアップキーを貼り付け → SaveCLI をインストール → auth login → Check connection
切り替えAPI key を選択 — 保存済みのキーは残りますUses your account を選択 — キーは削除されません
カスタムバイナリ—claude / gemini が PATH にない場合の任意の CLI パス
コスト表示ステータスバーにトークンごとの推定コストを表示「サブスクリプションに含まれる」バッジ

認証方法はプロバイダーごとに ~/.photoshop-mcp/data.db に保存されます — 既存の設定はそのまま動作し続けます。

CLI フラグ

photoshop-mcp-ui [--port 5174] [--host 127.0.0.1] [--no-open]

ローカル API のセキュリティ

UI サーバーはプロバイダーのキーを保持し、Photoshop を操作できるため、すべての /api/* リクエストは 3 つのチェックを通過します:

  • Host — サーバーのポート上のループバックアドレス(または --host でバインドしたアドレス)であること。DNS リバインディングをブロックします。
  • Origin — 存在する場合、UI 自身のオリジンと一致すること。クロスオリジンのブラウザからの呼び出しをブロックします。
  • Session token — 起動ごとに生成されるランダムな秘密値。他のローカルプロセスはどんなヘッダーも偽造できますがトークンは読めないため、それらをブロックします。

ブラウザはトークンを意識する必要はありません — サーバーが配信するページに注入します。スクリプトから使う場合は ~/.photoshop-mcp/ui-session.json から読み取り、ヘッダーとして送信してください:

terminal
TOKEN=$(node -p "require('$HOME/.photoshop-mcp/ui-session.json').token")
curl -H "x-psmcp-token: $TOKEN" http://127.0.0.1:5174/api/status

Authorization: Bearer <token> でも構いません。サーバー起動前に PSMCP_UI_TOKEN を設定すると既知のトークンを固定でき、有効なトークンのないリクエストは 401 unauthorized になります。

環境変数

  • PHOTOSHOP_PATH — カスタムの Photoshop インストールパス(任意)
  • LOG_LEVEL — ログレベル(0=DEBUG、1=INFO、2=WARN、3=ERROR)
  • PSMCP_UI_TOKEN — Web UI のセッショントークンを固定
  • ANALYTICS_DISABLED — 1 または true に設定すると匿名の使用状況分析を完全に無効化
  • POSTHOG_DISABLED — ANALYTICS_DISABLED の旧エイリアス
  • RYBBIT_API_KEY / RYBBIT_HOST / RYBBIT_SITE_ID — フォークやステージング向けの任意の分析オーバーライド

問題が発生しましたか?

401 エラー、接続の問題、CLI アカウントの修正はトラブルシューティングページにあります。

トラブルシューティングを開く