MCP Image Placeholder

🚀 MCP 圖像佔位符服務器

MCP 圖像佔位符服務器是一個基於模型上下文協議 (MCP) 的服務器，它提供了一個實用工具，可從不同供應商處生成佔位符圖像，滿足多樣化的圖像佔位需求。

🚀 快速開始

本服務器能依據指定參數生成佔位符圖像，支持不同圖像提供商，為您的項目快速提供合適的佔位圖像。使用前，需滿足以下兼容性要求並完成安裝配置。

✨ 主要特性

• 圖像生成：根據指定參數生成佔位符圖像。
• 多提供商支持：支持兩種圖像提供商，分別為：
  • 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)

參數說明

• provider：要使用的圖像提供商 (placehold 或 lorem-picsum)。
• width：圖像的寬度 (1 - 10000)。
• height：圖像的高度 (1 - 10000)。

返回值

生成的圖像 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 License 許可協議。