# ImageEditorMCPServer
以下の機能を備えたMCPサーバー（Typescriptで構築）
  1. 画像の明るさ調整
  2. 画像のトリミング
  3. 画像の圧縮

## 🔨 使用手順(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で圧縮してください」
```

## 📚 構築準備
### 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. 画像の明るさ調整
![明るさ調整の動作確認](images/readme/result-confirm1.png)

### 2. 画像のトリミング
![トリミングの動作確認](images/readme/result-confirm2.png)

### 3. 画像の圧縮
![圧縮の動作確認](images/readme/result-confirm3.png)

### 4. 複合機能の動作確認
![複合機能の動作確認](images/readme/result-confirm4.png)