Opengraph Io MCP

🚀 OpenGraph MCP Server (og-mcp)

og-mcp 是一個模型 - 上下文 - 協議（MCP）服務器，它通過標準的 MCP 接口，讓每個 OpenGraph.io（https://opengraph.io ）的 API 端點都能供 AI 代理（如 Anthropic Claude、Cursor、LangGraph）使用。

為什麼要這樣做呢？如果你已經在使用 OpenGraph.io 來展開鏈接、抓取 HTML、提取文章文本或截取屏幕截圖，那麼現在你可以在不暴露原始 API 密鑰的情況下，讓你的自主代理也具備相同的能力。

🚀 快速開始

全局安裝

你可以通過 npm 全局安裝這個包：

npm install -g opengraph-io-mcp

快速安裝

CLI 安裝程序（推薦）

為任何受支持的客戶端配置 OpenGraph MCP 的最簡單方法：

# 交互模式 - 引導你完成設置
npx opengraph-io-mcp-install

# 直接模式 - 指定客戶端和應用 ID
npx opengraph-io-mcp-install --client cursor --app-id YOUR_APP_ID

支持的客戶端：cursor、claude-desktop、windsurf、vscode、zed、jetbrains

Claude Desktop 擴展

對於 Claude Desktop 用戶，你還可以從 發佈頁面 下載 .mcpb 擴展進行一鍵安裝。

📦 安裝指南

客戶端配置

以下所有配置均使用 stdio 傳輸（推薦）。請將 YOUR_OPENGRAPH_APP_ID 替換為你的 OpenGraph.io 應用 ID。

Claude Desktop

配置位置：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Claude Code

一鍵安裝命令：

# macOS/Linux
claude mcp add --transport stdio --env APP_ID=YOUR_OPENGRAPH_APP_ID opengraph -- npx -y opengraph-io-mcp

# Windows（需要 cmd /c 包裝器）
claude mcp add --transport stdio --env APP_ID=YOUR_OPENGRAPH_APP_ID opengraph -- cmd /c npx -y opengraph-io-mcp

Cursor

配置位置：~/.cursor/mcp.json

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

VS Code

配置位置：.vscode/mcp.json（在你的項目目錄中） VS Code 支持輸入提示以進行安全的憑證處理：

{
  "inputs": [
    {
      "type": "promptString",
      "id": "opengraph-app-id",
      "description": "OpenGraph 應用 ID",
      "password": true
    }
  ],
  "servers": {
    "opengraph": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "${input:opengraph-app-id}"
      }
    }
  }
}

Windsurf

配置位置：~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

JetBrains AI 助手

添加到你的 JetBrains AI 助手 MCP 配置中：

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Zed

配置位置：~/.config/zed/settings.json 注意：Zed 使用 context_servers 而不是 mcpServers：

{
  "context_servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

💻 使用示例

OpenGraph.io 數據工具

圖像生成工具

圖像生成

og-mcp 服務器具備強大的 AI 驅動圖像生成功能，非常適合創建社交媒體卡片、架構圖、圖標等。

生成圖像

根據自然語言提示或圖表代碼創建圖像。 支持的圖像類型 (kind)：

• illustration - 通用 AI 生成圖像
• diagram - 基於 Mermaid、D2 或 Vega 語法的技術圖表
• icon - 應用圖標和徽標
• social-card - 針對社交分享優化的 OG 圖像
• qr-code - 可選樣式的二維碼

預設縱橫比：

• 社交：og-image、twitter-card、twitter-post、linkedin-post、facebook-post、instagram-square、instagram-portrait、instagram-story、youtube-thumbnail
• 標準：wide、square、portrait
• 圖標：icon-small、icon-medium、icon-large

樣式預設： github-dark、github-light、notion、vercel、linear、stripe、neon-cyber、pastel、minimal-mono、corporate、startup、documentation、technical

圖表模板： auth-flow、oauth2-flow、crud-api、microservices、ci-cd、gitflow、database-schema、state-machine、user-journey、cloud-architecture、system-context

示例用法：

// 生成社交卡片
generateImage({
  prompt: "A modern tech startup hero image with abstract geometric shapes",
  kind: "social-card",
  aspectRatio: "og-image",
  stylePreset: "vercel",
  brandColors: ["#0070F3", "#000000"]
})

// 根據 Mermaid 語法生成圖表
generateImage({
  prompt: "graph TD; A[User] --> B[API]; B --> C[Database]",
  kind: "diagram",
  diagramSyntax: "mermaid",
  stylePreset: "github-dark"
})

迭代圖像

細化或修改現有的生成圖像。 用例：

• 編輯特定部分：“將背景改為藍色”
• 應用樣式更改：“使其更簡約”
• 修復問題：“移除文本”、“增大圖標”
• 裁剪到特定座標

示例：

iterateImage({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate",
  prompt: "Change the primary color to #0033A0 and add a subtle drop shadow"
})

檢查圖像會話

查看會話詳細信息並查找用於迭代的資產 ID。 返回：

• 會話元數據（創建時間、名稱、狀態）
• 所有資產的列表，包含提示、工具鏈和狀態
• 顯示迭代歷史的父子關係

示例：

inspectImageSession({
  sessionId: "uuid-from-generate"
})

導出圖像資產

通過會話和資產 ID 導出生成的圖像資產。返回內聯的 base64 圖像以及元數據（格式、尺寸、大小）。 在本地運行時（stdio 傳輸），你可以選擇提供 destinationPath 將圖像保存到磁盤。在託管/HTTP 傳輸中，路徑將被忽略，僅返回內聯圖像。 示例：

// 僅內聯（適用於所有情況）
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate"
})

// 保存到磁盤（僅適用於 stdio/本地）
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate",
  destinationPath: "/Users/me/project/images/hero.png"
})

🔧 技術細節

工作原理

^{圖表使用 og-mcp 的圖像生成工具生成}

og-mcp 服務器充當 AI 客戶端（如 Claude 或其他大語言模型）與 OpenGraph.io API 之間的橋樑：

1. AI 客戶端調用可用的 MCP 函數之一。
2. og-mcp 服務器接收請求並將其格式化為適合 OpenGraph.io API 的形式。
3. OpenGraph.io 處理請求並返回數據。
4. og-mcp 將響應轉換為適合 AI 客戶端的格式。
5. AI 客戶端接收準備好使用的結構化數據。

這種抽象方式可以避免直接向 AI 暴露 API 密鑰，同時提供對 OpenGraph.io 功能的完全訪問權限。

設置和運行

1. 克隆此倉庫
2. 安裝依賴項：

   npm install
   

3. 構建 TypeScript 代碼：

   npm run build
   

4. 啟動服務器：

   npm start
   

服務器默認運行在 3010 端口（可通過 PORT 環境變量進行配置）。

配置

服務器需要一個 OpenGraph.io 應用 ID 才能正常工作。你可以通過以下幾種方式提供：

1. 使用環境變量：在 .env 文件中設置 OPENGRAPH_APP_ID 或 APP_ID，或者將其作為環境變量設置。
2. 使用 stdio 傳輸時使用命令行參數：--app-id YOUR_APP_ID
3. 使用 SSE 傳輸時：將其作為查詢參數包含在 URL 中（?app_id=YOUR_APP_ID）

示例 .env 文件：

OPENGRAPH_APP_ID=your_app_id_here
# 或者
APP_ID=your_app_id_here

傳輸選項

Stdio 傳輸（推薦）

對於命令行使用和 npm 全局安裝，服務器可以使用 stdio 傳輸運行：

npm run start:stdio

你可以通過命令行參數直接傳遞 OpenGraph API 密鑰：

npm run start:stdio -- --app-id YOUR_APP_ID

全局安裝時：

opengraph-io-mcp --app-id YOUR_APP_ID

此模式允許服務器由其他使用 MCP 的應用程序直接調用。

HTTP/SSE 傳輸

此方法運行一個可以通過 HTTP 訪問的 Web 服務器，並使用 SSE 進行流式傳輸：

npm start

HTTP/SSE 傳輸（替代方法）

如果你更喜歡運行一個持久的服務器而不是使用 stdio：

npm start

然後將你的客戶端配置為連接到：

http://localhost:3010/sse?app_id=YOUR_OPENGRAPH_APP_ID

📚 詳細文檔

故障排除

• 如果工具未顯示，請檢查服務器是否正在運行，以及 Cursor 中的 URL 是否配置正確。
• 檢查服務器日誌以查看是否有連接或授權問題。
• 驗證 Claude 是否已被指示按名稱使用特定工具。