MCP Image Placeholder

🚀 MCP 画像プレースホルダーサーバー

これはモデルコンテキストプロトコル (MCP) サーバーで、さまざまなプロバイダーからプレースホルダー画像を生成するツールを提供します。

✨ 主な機能

• 指定されたパラメータに基づいてプレースホルダー画像を生成します。
• 2種類の画像プロバイダーをサポートしています。
  • placehold: シンプルなプレースホルダー画像を提供します。
  • lorem-picsum: 実際の画像をプレースホルダー画像として提供します。
• 入力パラメータの検証を行います。
• 直接使用できる画像URLを返します。

📦 インストール

互換性要件

• Python 3.9 以上
• uv パッケージマネージャー

インストール手順

1. このリポジトリをクローンします。
2. MCPサーバーの設定を行います。

💻 使用例

基本的な使用法

このサーバーは image_placeholder というツールを公開しています。このツールは、指定されたパラメータに基づいてプレースホルダー画像のURLを生成します。

# 300x200 ピクセルのプレースホルダー画像を生成
url = image_placeholder(provider="placehold", width=300, height=200)

# 500px の正方形の lorem-picsum 画像を生成
url = image_placeholder(provider="lorem-picsum", width=500)

パラメータ

戻り値

生成された画像のURL文字列

📚 ドキュメント

設定

Claude for Desktopへの接続

1. claude_desktop_config.json に以下の内容を追加します。

{
    "mcpServers": {
        "image-placeholder": {
            "command": "uv",
            "args": [
                "--directory",
                "/ABSOLUTE/PATH/TO/PROJECT",
                "run",
                "main.py"
            ]
        }
    }
}

2. Claude for Desktopを再起動します。

Cursorへの接続

1. Cursorの設定を開きます。
2. 機能 セクションに移動します。
3. MCPサーバー セクションまでスクロールします。
4. 新しいMCPサーバーを追加 ボタンをクリックします。
5. 以下の情報を入力します。
   • 名前: image-placeholder
   • タイプ: command
   • サーバーURL: uv --directory /ABSOLUTE/PATH/TO/PROJECT run main.py
6. 追加 ↵ ボタンをクリックします。

トラブルシューティング

ツールが検出されない場合は、uv コマンドの絶対パスを使用してください。例えば:

/ABSOLUTE/PATH/TO/uv --directory /ABSOLUTE/PATH/TO/PROJECT run main.py

実行例と出力 (Cursor)

プロンプト

"example" という名前の新しいディレクトリと output.html という名前のファイルを作成します。

次に、尾部CSSを使用してシングルページを作成します: https://unpkg.com/@tailwindcss/browser@4

写真ギャラリーを表示する素敵なタイトル、コンテンツ、フッターを表示します。

これを output.html に保存します。

スクリーンショット

出力

実行例の出力 (Cursor)

📄 ライセンス

MITライセンス