attalla1/photopea-mcp-server

Photopea MCP 服务器

设计海报、编辑照片，并直接从终端转换图像。由Photopea支持——一款免费的基于浏览器的Photoshop替代品——通过MCP与你的AI代理连接。

演示

本次演示中使用的提示词：examples/album-cover-demo.md

工作原理

你的代理通过MCP协议发送编辑命令。服务器将这些命令转换为Photopea JavaScript的API调用，并通过WebSocket桥接器执行到浏览器。

注意： 浏览器窗口将在第一次工具调用时自动打开。这是预期中的——Photopea 完全运行在浏览器中，服务器需要它来执行图像编辑操作。

快速启动

然后重新开启一个 Claude Code 会话，要求它编辑图片。Photopea 编辑器会在第一次工具调用时自动在浏览器中打开。

安装

克劳德·科德

NPX（推荐）:

全局安装：

克劳德桌面

添加到你的Claude Desktop配置文件（macOS版为~/Library/Application Support/Claude/claude_desktop_config.json）：

光标

添加到光标MCP设置中（项目中的.cursor/mcp.json或全局~/.cursor/mcp.json）：

Photopea MCP Server

Design posters, edit photos, and transform images directly from your terminal. Powered by Photopea – a free, browser-based alternative to Photoshop – connected to your AI agent via MCP.

Demo

Prompt used in this demo: examples/album-cover-demo.md

How It Works

graph LR
    A[Agent] |stdio| B[MCP Server]
    B |WebSocket| C[Browser]
    C |postMessage| D[Photopea]

Your agent sends editing commands through the MCP protocol. The server translates these into Photopea JavaScript API calls and executes them via a WebSocket bridge to the browser.

Note: A browser window will open automatically on the first tool call. This is expected – Photopea runs entirely in the browser and the server needs it to perform image editing operations.

Quick Start

claude mcp add -s user photopea -- npx -y photopea-mcp-server

Then start a new Claude Code session and ask it to edit images. The Photopea editor will open in your browser automatically on the first tool call.

Installation

Claude Code

npx (recommended):

claude mcp add -s user photopea -- npx -y photopea-mcp-server

Global install:

npm install -g photopea-mcp-server
claude mcp add -s user photopea -- photopea-mcp-server

Claude Desktop

Add to your Claude Desktop config file (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

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

Cursor

Add to Cursor MCP settings (.cursor/mcp.json in your project or ~/.cursor/mcp.json globally):

{
  "mcpServers": {
    "photopea": {
      "command": "npx",