attalla1/photopea-mcp-server

Developer tools

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。原文を見る

46 stars 8 forks 品質 73 トレンド 13MIT

Repository Install

PhotopeaでAI主導の画像編集用MCPサーバー

概要

ポスターをデザインし、写真を編集し、端末から直接画像を変換します。 Photopea - Photoshop - 無料のブラウザベースの代替 - MCP を介してAIエージェントに接続します。このデモで使用されるプロンプト:例/album-cover-demo.md エージェントは、MCP プロトコルを介して編集コマンドを送信します。サーバは、これらを Photopea JavaScript API 呼び出しに変換し、WebSocket ブリッジをブラウザに実行します。ブラウザウィンドウが最初のツールコールで自動的に開きます。これは期待されます - Photopeaはブラウザで完全に実行され、サーバーは画像編集操作を実行する必要があります。その後、新しいClaudeコードセッションを開始し、画像を編集するように依頼してください。 Photopeaエディタは、最初のツールコールで自動的にブラウザで開きます。 Claudeデスクトップ設定ファイル(~/Library/Application Support/Claude/claude desktop config.json)に追加します。 Cursor MCP の設定 (.cursor/mcp.json をプロジェクトに追加するか、~/.cursor/mcp.json をグローバルに追加してください): .vscode/mcp に追加します.

概要（AI 翻訳）

フォトペア MCP サーバー

ポスターをデザインし、写真を編集し、端末から直接画像を変換します。 Photopea - Photoshop - 無料のブラウザベースの代替 - MCP を介してAIエージェントに接続します。

デモ

このデモで使用されるプロンプト:例/album-cover-demo.md

使い方

エージェントは、MCP プロトコルを介して編集コマンドを送信します。サーバは、これらを Photopea JavaScript API 呼び出しに変換し、WebSocket ブリッジをブラウザに実行します。

注意: ブラウザウィンドウが最初のツールコールで自動的に開きます。これは期待されます - Photopeaはブラウザで完全に実行され、サーバーは画像編集操作を実行する必要があります。

クイックスタート

その後、新しいClaudeコードセッションを開始し、画像を編集するように依頼してください。 Photopeaエディタは、最初のツールコールで自動的にブラウザで開きます。

インストール

##Claudeコード

npx (推奨):

グローバルインストール:

##Claudeデスクトップ

macOSのClaudeデスクトップコンフィグファイル(~/Library/Application Support/Claude/claude_desktop_config.json)に追加します。

カーソル

Cursor MCP の設定 ([.cursor/mcp.json]) をプロジェクトまたは [~/.cursor/mcp.json にグローバルに追加します

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。

README

以下は原文 README の抜粋です。原文を見る。

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",

GitHub で README 全文を見る

インストール

npx -y photopea-mcp-server

MCP 初心者？mcpskill.org のガイドから始めましょう →

設定

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