名称： opengraph-io
版本： 1.4.0
描述： "通过 OpenGraph.io 提取网页数据、捕获截图、抓取内容并生成 AI 图像。适用于处理 URL（展开链接、预览、元数据）、捕获网页截图、抓取 HTML 内容、询问网页相关问题或生成图像（图表、图标、社交卡片、二维码）。触发词：'获取 OG 标签'、'给这个页面截图'、'抓取这个 URL'、'生成图表'、'创建社交卡片'、'这个页面说了什么关于'。"
主页： https://www.opengraph.io
元数据： {"clawdbot":{"emoji":"🔗","requires":{"bins":["curl"],"env":["OPENGRAPH_APP_ID"]},"primaryEnv":"OPENGRAPH_APP_ID","install":[{"id":"mcp","kind":"npm","package":"opengraph-io-mcp","global":true,"bins":["opengraph-io-mcp"],"label":"安装 MCP 服务器（可选，用于其他 AI 客户端）"}]}}

OpenGraph.io

通过 OpenGraph.io API 提取网页数据、捕获截图并生成 AI 驱动的图像。

🤖 AI 智能体： 如需完整的参数文档和使用模式，请同时阅读 references/for-ai-agents.md。

快速决策指南

“我需要从 URL 获取数据”

“我需要生成图像”

二维码：基础版 vs 高级版

基础版 (kind: "qr-code")：仅生成功能性的二维码。

高级版 (kind: "illustration")：生成完整的营销素材，二维码嵌入精心设计的构图中（渐变、3D 元素、行动号召、设备模型）。示例提示词：

“为 https://myapp.com 设计的高级营销卡片，包含二维码，采用宇宙紫色渐变背景，漂浮的 3D 球体，发光点缀，以及‘扫描下载’的行动号召语”

图表生成技巧

• 使用 diagramCode + diagramFormat 确保语法可靠（绕过 AI 生成）
• 对于结构关键的图表，使用 outputStyle: "standard"（高级风格可能改变布局）
• ❌ 不要混合语法和描述："graph LR A-->B 让它更漂亮" 会导致失败

定价与要求

💡 免费试用图像生成！ 免费套餐每月提供 4 次高级图像生成 — 无需信用卡。

前往 dashboard.opengraph.io 注册

快速设置

1. 注册 账户 dashboard.opengraph.io — 提供免费试用
2. 配置（选择一种方式）：

选项 A：Clawdbot 配置（推荐）

// ~/.clawdbot/clawdbot.json
{
  skills: {
    entries: {
      "opengraph-io": {
        apiKey: "YOUR_APP_ID"
      }
    }
  }
}

选项 B：环境变量

export OPENGRAPH_APP_ID="YOUR_APP_ID"

Clawdbot 使用指南（REST API）

使用 curl 并设置 OPENGRAPH_APP_ID 环境变量。基础 URL：https://opengraph.io/api/1.1/

提取 OpenGraph 数据（网站/链接展开）

# 从 URL 获取 OG 标签
curl -s "https://opengraph.io/api/1.1/site/$(echo -n 'https://example.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}"

响应包含 hybridGraph.title、hybridGraph.description、hybridGraph.image 等字段。

网页截图

# 捕获截图（尺寸：sm, md, lg, xl）
curl -s "https://opengraph.io/api/1.1/screenshot/$(echo -n 'https://example.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&dimensions=lg"

响应：{ "screenshotUrl": "https://..." }

抓取 HTML 内容

# 获取渲染后的 HTML（可选代理）
curl -s "https://opengraph.io/api/1.1/scrape/$(echo -n 'https://example.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&use_proxy=true"

提取特定元素

# 提取 h1, h2, p 标签
curl -s "https://opengraph.io/api/1.1/extract/$(echo -n 'https://example.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&html_elements=h1,h2,p"

查询（向 AI 询问关于页面的问题）

curl -s -X POST "https://opengraph.io/api/1.1/query/$(echo -n 'https://example.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}" \
  -H "Content-Type: application/json" \
  -d '{"query": "这家公司提供哪些服务？"}'

图像生成（REST API）

基础 URL：https://opengraph.io/image-agent/

步骤 1：创建会话

SESSION=$(curl -s -X POST "https://opengraph.io/image-agent/sessions?app_id=${OPENGRAPH_APP_ID}" \
  -H "Content-Type: application/json" \
  -d '{"name": "my-session"}')
SESSION_ID=$(echo $SESSION | jq -r '.sessionId')

步骤 2：生成图像

curl -s -X POST "https://opengraph.io/image-agent/sessions/${SESSION_ID}/generate?app_id=${OPENGRAPH_APP_ID}" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "一个链接到 https://example.com 的漂亮二维码，采用现代渐变设计",
    "kind": "qr-code",
    "aspectRatio": "square",
    "quality": "high"
  }'

图像类型： illustration、diagram、icon、social-card、qr-code

风格预设： github-dark、vercel、stripe、neon-cyber、pastel、minimal-mono

宽高比： square、og-image (1200×630)、twitter-card、instagram-story 等。

步骤 3：下载资源

ASSET_ID="<来自生成响应>"
curl -s "https://opengraph.io/image-agent/assets/${ASSET_ID}/file?app_id=${OPENGRAPH_APP_ID}" -o output.png

步骤 4：迭代（优化图像）

curl -s -X POST "https://opengraph.io/image-agent/sessions/${SESSION_ID}/iterate?app_id=${OPENGRAPH_APP_ID}" \
  -H "Content-Type: application/json" \
  -d '{
    "assetId": "<上一个资源ID>",
    "prompt": "将背景改为蓝色"
  }'

自然语言示例

当用户使用自然语言提问时，将其转换为相应的 API 调用：

二维码选项

基础二维码 (kind: "qr-code")：生成仅具有基本样式的功能性二维码。

高级二维码营销卡片 (kind: "illustration")：生成完整的营销素材，二维码嵌入专业设计的构图中 — 渐变、3D 元素、行动号召、设备模型等。

# 高级二维码营销卡片示例
curl -s -X POST "https://opengraph.io/image-agent/sessions/${SESSION_ID}/generate?app_id=${OPENGRAPH_APP_ID}" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "为 https://myapp.com 设计的高级营销卡片，包含二维码，采用宇宙紫色渐变背景，漂浮的 3D 球体，发光点缀，以及‘扫描下载’的行动号召语",
    "kind": "illustration",
    "aspectRatio": "square",
    "outputStyle": "premium",
    "brandColors": ["#6B4CE6", "#9B6DFF"],
    "stylePreferences": "现代、宇宙感、高级营销、3D 元素"
  }'

MCP 集成（适用于 Claude Desktop、Cursor 等）

对于支持 MCP 的 AI 客户端，使用 MCP 服务器：

# 交互式安装器
npx opengraph-io-mcp --client cursor --app-id YOUR_APP_ID

# 或手动配置：
{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "OPENGRAPH_APP_ID": "YOUR_APP_ID"
      }
    }
  }
}

查看 references/mcp-clients.md 获取特定客户端的设置说明。

更多详情

• references/for-ai-agents.md — AI 智能体参考（工具模式、决策树、使用模式）
• references/api-reference.md — 完整 API 文档（所有接口、参数、响应模式）
• references/platform-support.md — 平台支持指南（YouTube、Vimeo、TikTok、社交媒体、电子商务）
• references/troubleshooting.md — 故障排除指南（常见错误、调试技巧）
• references/image-generation.md — 图像预设、风格、模板
• references/mcp-clients.md — MCP 客户端配置