Web UI

A fully local chat UI that drives Photoshop through the MCP server. One command, and your browser opens — no IDE required.

Start with one command

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

A local server starts on 127.0.0.1 (random free port) and your default browser opens the chat UI automatically.

Pick a provider

On first launch, choose one — with an API key, or your existing CLI subscription account (Anthropic and Google).

Provider	Models	API key	CLI account
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	—
Google	Gemini 2.5 Pro / Flash / Flash-Lite	aistudio.google.com	`npm i -g @google/gemini-cli → gemini auth login`
OpenRouter	100+ models	openrouter.ai	—

Two ways to authenticate

API keydefault

Vercel AI SDK with your provider key. Usage is billed per token at API rates; the UI shows the estimated cost per chat.

Uses your accountIncluded in subscription

Reuses your local Claude Code or Gemini CLI OAuth session. No API key is stored; usage counts against your subscription quota instead of API billing.

You can switch the auth method per provider in Settings without losing the other credential — keep an API key while trying CLI account, then switch back.

What happens on first launch

Pick a provider and choose API key or Uses your account.
Validate the key or check the CLI connection. Config is stored locally at ~/.photoshop-mcp/data.db (SQLite, chmod 600) — keys never leave your machine.
Type natural-language prompts. The UI streams the model's reply, runs Photoshop tool calls in real time, and renders each call as an inspectable card (input + result).
Switch provider, auth method or model anytime from Settings or the model selector — chats, costs and tool history persist across sessions.

Action PlanBeta

An optional execution mode for API key auth. Instead of a per-step model → tool loop, one planning call builds an ordered todo list of Photoshop tool calls that run directly in sequence.

One planning call builds an ordered todo list of Photoshop tool calls.
Tools execute directly in sequence — no extra model round-trips between steps.
On a failed step, a bounded repair loop re-plans only the remaining steps (up to 3 times).

Off by default — toggle it next to the model selector. Ideal for multi-step prompts like “remove the background and export for web”, with fewer model calls and faster end-to-end execution.

Switching auth later

Open Settings from the sidebar at any time.

Action	API key mode	CLI account mode
Set up	Paste key → Save	Install CLI → auth login → Check connection
Switch away	Choose API key — the stored key is kept	Choose Uses your account — the key is not deleted
Custom binary	—	Optional CLI path if claude / gemini is not on PATH
Cost display	Per-token estimate in the status bar	Included in subscription badge

The auth method is stored per provider in ~/.photoshop-mcp/data.db — existing configs keep working unchanged.

CLI flags

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

Local API security

The UI server holds your provider keys and can drive Photoshop, so every /api/* request passes three checks:

Host — must be the loopback address (or the --host you bound to) on the server's port. Blocks DNS rebinding.
Origin — when present, must match the UI's own origin. Blocks cross-origin browser callers.
Session token — a random per-start secret. Blocks other local processes, which can forge any header but cannot read the token.

The browser never has to deal with the token — the server injects it into the page it serves. For scripting, read it from ~/.photoshop-mcp/ui-session.json and send it as a header:

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> works too. Set PSMCP_UI_TOKEN before starting the server to pin a known token; requests without a valid token get 401 unauthorized.

Environment variables

PHOTOSHOP_PATH — custom Photoshop installation path (optional)
LOG_LEVEL — logging level (0=DEBUG, 1=INFO, 2=WARN, 3=ERROR)
PSMCP_UI_TOKEN — pin the Web UI session token
ANALYTICS_DISABLED — set to 1 or true to disable anonymous usage analytics entirely
POSTHOG_DISABLED — legacy alias for ANALYTICS_DISABLED
RYBBIT_API_KEY / RYBBIT_HOST / RYBBIT_SITE_ID — optional analytics overrides for forks or staging

Running into issues?

401 errors, connection problems and CLI account fixes live on the troubleshooting page.

Open troubleshooting