Which integrations are available for this server?

Leverages the Sharp image processing library to perform various image editing operations including brightness adjustment, cropping and compression

How do I use ImageEditorMCPServer?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@ImageEditorMCPServer brighten the sunset photo by 1.3x and compress it to 80% quality" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

ImageEditorMCPServer

以下の機能を備えたMCPサーバー（Typescriptで構築）

画像の明るさ調整
画像のトリミング
画像の圧縮

🔨 使用手順(Claude for Desktopの場合)

1. サーバーをビルド

npm install npm run build

2. Claude for Desktopの設定して再起動

cloude_desktop_config.jsonに以下を追記して再起動

{ "mcpServers": { "image-editor": { "command": "node", "args": [ "/Users/your-username/path/to/image-editor-mcp/build/index.js", "/Users/your-username/Pictures/Editing" ] } } }

3. 使用プロンプト

画像の明るさを調整する

「（画像フォルダへのパス）にあるsample.jpgの明るさを1.5倍にして」

画像をトリミングする

「（画像フォルダへのパス）のtrip-photo.pngを、左上(100, 50)から幅400、高さ300でトリミングして」

画像を圧縮する

「（画像フォルダへのパス）にあるlarge-image.jpgを品質75で圧縮してください」

Related MCP server: Edit File Lines MCP Server

📚 構築準備

1️⃣ Building MCP with LLMsにアクセス

https://modelcontextprotocol.io/tutorials/building-mcp-with-llms

2️⃣ llms-full.txtをダウンロード

https://modelcontextprotocol.io/llms-full.txt

3️⃣ MCP Typescript SDK or Python SDK repositoryのREADME.mdをダウンロード

https://github.com/modelcontextprotocol/typescript-sdk

4️⃣ Google AI StduioでMCPサーバーを構築させる

llm-full.txtとMCP Typescript SDK README.mdをアップロードし、以下のプロンプトを入力する

✍️ 画像編集MCPサーバーを構築するプロンプト

# 実現したいこと入力された画像を編集するMCPサーバーを作成したい。コードを作成して、設定方法・使用方法も教えてください。 # 資料の説明添付したllms-full.txtは、MCPに関する全仕様書である。 MCPのSDKの仕様書READMEも添付したので、参照しながら、作成してください。 # 使用する言語 TypeScriptを使ってMCPサーバーを作成する。 # MCPサーバーの種類 ToolsのMCPサーバーを作成する。 # 機能の詳細以下の機能を持つMCPサーバーを作成したい。名前は、image-editor-mcpで。引数で画像フォルダのパスを指定する。その中の特定の画像ファイルを編集できるようにして。画像は、バイナリ形式の出力ではなく、JavaScriptの画像編集ライブラリSharpのコマンドを実行することによって実行できるようにしてください。 ## 画像の明るさを調整ユーザーの指示によって、画像の明るくしたり、暗くしたりする。 ## 画像のトリミング指定された範囲にトリミングする。そのとき、比率は保つこと。 ## 画像の軽量化（圧縮）指定されたサイズに圧縮する。 # 補足 jsonファイルには、コメントがあるとエラーが発生するので、コメントは入れないで。

✅ 動作確認

以下の画像は、ImageEditorMCPServerの各機能の動作確認結果を示しています：

1. 画像の明るさ調整

明るさ調整の動作確認

2. 画像のトリミング

トリミングの動作確認

3. 画像の圧縮

圧縮の動作確認

4. 複合機能の動作確認

複合機能の動作確認

ImageEditorMCPServer

ImageEditorMCPServer

🔨 使用手順(Claude for Desktopの場合)

1. サーバーをビルド

2. Claude for Desktopの設定して再起動

3. 使用プロンプト

📚 構築準備

1️⃣ Building MCP with LLMsにアクセス

2️⃣ llms-full.txtをダウンロード

3️⃣ MCP Typescript SDK or Python SDK repositoryのREADME.mdをダウンロード

4️⃣ Google AI StduioでMCPサーバーを構築させる

✍️ 画像編集MCPサーバーを構築するプロンプト

✅ 動作確認

1. 画像の明るさ調整

2. 画像のトリミング

3. 画像の圧縮

4. 複合機能の動作確認

Resources

Appeared in Searches

New MCP Servers

Latest Blog Posts

MCP directory API