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 是否已被指示按名称使用特定工具。