Web UI
MCP サーバー経由で Photoshop を操作する、完全ローカルのチャット UI。1 コマンドでブラウザが開きます — IDE は不要です。
1 コマンドで開始
npx -p @alisaitteke/photoshop-mcp photoshop-mcp-ui127.0.0.1(空きポートは自動選択)でローカルサーバーが起動し、既定のブラウザでチャット UI が自動的に開きます。
プロバイダーを選ぶ
初回起動時に 1 つ選びます — API キー、または既存の CLI サブスクリプションアカウント(Anthropic と Google)。
| プロバイダー | モデル | API キー | CLI アカウント |
|---|---|---|---|
| Anthropic | Claude Sonnet / Opus / Haiku | console.anthropic.com | npm i -g @anthropic-ai/claude-code → claude auth login |
| OpenAI | GPT-5, GPT-4.1, o-series | platform.openai.com | — |
| Gemini 2.5 Pro / Flash / Flash-Lite | aistudio.google.com | npm i -g @google/gemini-cli → gemini auth login | |
| OpenRouter | 100+ models | openrouter.ai | — |
2 つの認証方法
Settings でプロバイダーごとに認証方法を切り替えられます。もう一方の資格情報は失われません — API キーを残したまま CLI アカウントを試し、あとで戻すこともできます。
初回起動時の流れ
- プロバイダーを選び、API key または Uses your account を選択します。
- キーを検証するか、CLI 接続を確認します。設定はローカルの ~/.photoshop-mcp/data.db(SQLite、chmod 600)に保存されます — キーがマシンの外に出ることはありません。
- 自然言語でプロンプトを入力します。UI はモデルの返答をストリーミング表示し、Photoshop のツール呼び出しをリアルタイムで実行し、各呼び出しを確認可能なカード(入力+結果)として描画します。
- プロバイダー、認証方法、モデルは Settings またはモデルセレクターからいつでも切り替えられます — チャット、コスト、ツール履歴はセッションをまたいで保持されます。
API キー認証向けのオプションの実行モード。ステップごとのモデル → ツールのループの代わりに、1 回の計画呼び出しで Photoshop ツール呼び出しの順序付き todo リストを作成し、それを順番に直接実行します。
- 1 回の計画呼び出しで、Photoshop ツール呼び出しの順序付き todo リストを作成します。
- ツールは順番に直接実行されます — ステップ間の余分なモデルの往復はありません。
- ステップが失敗した場合は、上限付きの修復ループが残りのステップだけを再計画します(最大 3 回)。
既定ではオフ — モデルセレクターの横のトグルで切り替えます。「背景を削除して Web 用に書き出して」のような複数ステップのプロンプトに最適で、モデル呼び出しが減り、全体の実行が速くなります。
あとから認証を切り替える
サイドバーからいつでも Settings を開けます。
| 操作 | API キーモード | CLI アカウントモード |
|---|---|---|
| セットアップ | キーを貼り付け → Save | CLI をインストール → 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 から読み取り、ヘッダーとして送信してください:
TOKEN=$(node -p "require('$HOME/.photoshop-mcp/ui-session.json').token")
curl -H "x-psmcp-token: $TOKEN" http://127.0.0.1:5174/api/statusAuthorization: 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 アカウントの修正はトラブルシューティングページにあります。