Pixel AI Editor

日本語 | English

AI がドット絵のラフを描き、それを自分で手直しできる 16×16 / 32×32 / 64×64 用のドット絵エディタ（Windows デスクトップアプリ）。 MCP に対応しているので、Claude から直接キャンバスに描かせることもできます。

🌐 紹介ページ: https://motchan2000.github.io/pixel-ai-editor/ ⬇️ ダウンロード: 最新リリース

特長

• AI ラフ生成 — お題を書くと AI が指定サイズのドット絵を描いてキャンバスに置きます。半透明の下絵としてなぞることもできます。

• 手直し用のツール一式 — ペン、消しゴム、塗りつぶし、スポイト、直線、四角、左右対称、移動、反転、Undo/Redo。

• MCP 対応 — Claude Code / Claude Desktop から描画・確認・書き出しができ、起動中のアプリにリアルタイムで反映されます。

• 書き出し — PNG（×1 / ×8 / ×16）とプロジェクトファイル（JSON）。

Related MCP server: Heroquarium ArtGen MCP Server

インストール

1. Releases から Pixel-AI-Editor-Setup-x.y.z.exe をダウンロードして実行

   • 署名していないため Windows SmartScreen の警告が出ることがあります。「詳細情報」→「実行」で進めてください。

2. 起動したら右下の「AI設定」で使うサービスを選び、APIキーを入力して保存

   • 対応: DeepSeek / OpenAI / Anthropic (Claude) / Google Gemini / OpenRouter / Ollama・LM Studio（ローカル、キー不要）/ その他 OpenAI 互換 API

   • ベースURL とモデル名は自由に変更できます

   • キーはこの PC の %APPDATA%\pixel-ai-editor\settings.json にのみ保存されます。

使い方

1. 上部でサイズ（16 / 32 / 64）を選ぶ

2. 右の欄にお題を書いて「ラフを生成」→ キャンバスに反映（Ctrl+Z で元に戻せる）

3. ツールで手直し。「下絵として表示」でラフを半透明で重ねてなぞることも可能

4. 「PNG書き出し」または「保存」

MCP（Claude から操作）

アプリ右側の「MCP連携」にあるボタンで、この PC 用の登録設定をコピーできます。

• Claude Code 用コマンド … ターミナルに貼り付けて実行

• Claude Desktop 用JSON … %APPDATA%\Claude\claude_desktop_config.json の mcpServers に追記

インストール版はアプリ自身が MCP サーバーとして動くので、Node.js は不要です。 Claude からの操作は起動中のエディタに即反映され（未起動なら自動で起動）、ヘッダーの「MCP」バッジが青く光ります。

仕組み: エディタは起動時に 127.0.0.1 のランダムなポートで待ち受け、ポートと使い捨てトークンを %APPDATA%\pixel-ai-editor\bridge.json に書き出します。MCP サーバー（mcp-server.mjs）はそれを読んで接続します。

ソースから動かす

Node.js 20 以上が必要です。

git clone https://github.com/motchan2000/pixel-ai-editor.git
cd pixel-ai-editor
npm install
npm start

• APIキーは画面から設定するか、環境変数（または .env）に DEEPSEEK_API_KEY / OPENAI_API_KEY / ANTHROPIC_API_KEY / GEMINI_API_KEY / OPENROUTER_API_KEY を設定

• MCP 登録（ソース版）: claude mcp add pixel-editor -s user -- node <このフォルダ>/mcp-server.mjs

• インストーラーのビルド: npm run dist（dist/ に出力）

テスト

• npm test … AI 応答のパース処理

• node test/mcp-e2e.mjs … MCP クライアントとして全ツールを呼ぶ通しテスト（エディタが開きます）

ライセンス

MIT