OpenGraph MCP 服务器 (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 的最简单方法：

# Interactive mode - guides you through setup
npx opengraph-io-mcp-install

# Direct mode - specify client and app ID
npx opengraph-io-mcp-install --client cursor --app-id YOUR_APP_ID

支持的客户端：cursor, claude-desktop, windsurf, vscode, zed, jetbrains

Claude Desktop 扩展

对于 Claude Desktop 用户，您也可以从 Releases 页面 下载 .mcpb 扩展进行一键安装。

客户端配置

以下所有配置均使用托管的 HTTPS 传输（推荐）。将 YOUR_OPENGRAPH_APP_ID 替换为您的 OpenGraph.io App ID。无需本地安装或 npx —— 只需将您的客户端指向托管 URL 即可。

Claude Desktop

配置位置：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "opengraph": {
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Claude Code

一键安装：

claude mcp add --transport http --header "x-app-id: YOUR_OPENGRAPH_APP_ID" opengraph https://mcp.opengraph.io/mcp

Cursor

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

{
  "mcpServers": {
    "opengraph": {
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

VS Code

配置位置：.vscode/mcp.json（在您的项目目录中）

VS Code 支持用于安全凭据处理的输入提示：

{
  "inputs": [
    {
      "type": "promptString",
      "id": "opengraph-app-id",
      "description": "OpenGraph App ID",
      "password": true
    }
  ],
  "servers": {
    "opengraph": {
      "type": "http",
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "${input:opengraph-app-id}"
      }
    }
  }
}

Windsurf

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

{
  "mcpServers": {
    "opengraph": {
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

JetBrains AI Assistant

添加到您的 JetBrains AI Assistant MCP 配置中：

{
  "mcpServers": {
    "opengraph": {
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Zed

配置位置：~/.config/zed/settings.json

注意：Zed 使用 context_servers 而不是 mcpServers：

{
  "context_servers": {
    "opengraph": {
      "transport": "http",
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-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

使用示例：

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

// Generate a diagram from Mermaid syntax
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 传输中，路径将被忽略，图像仅以内联方式返回。

示例：

// Inline only (works everywhere)
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate"
})

// Save to disk (stdio/local only)
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate",
  destinationPath: "/Users/me/project/images/hero.png"
})

工作原理

图表由 og-mcp 的图像生成工具生成

og-mcp 服务器充当 AI 客户端（如 Claude 或其他 LLM）与 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 App 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
# or
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 访问并使用 SSE 进行流式传输的 Web 服务器：

npm start

故障排除

• 如果工具未显示，请检查服务器是否正在运行以及 URL 是否在 Cursor 中正确配置

• 检查服务器日志以查看是否有任何连接或授权问题

• 验证是否已指示 Claude 按名称使用特定工具