opengraph-io – OpenClaw Skill

---

name: opengraph-io version: 1.4.0 description: "Extract web data, capture screenshots, scrape content, and generate AI images via OpenGraph.io. Use when working with URLs (unfurling, previews, metadata), capturing webpage screenshots, scraping HTML content, asking questions about webpages, or generating images (diagrams, icons, social cards, QR codes). Triggers: 'get the OG tags', 'screenshot this page', 'scrape this URL', 'generate a diagram', 'create a social card', 'what does this page say about'." homepage: https://www.opengraph.io metadata: {"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":"Install MCP server (optional, for other AI clients)"}]}}

OpenGraph.io

Extract web data, capture screenshots, and generate AI-powered images via OpenGraph.io APIs.

🤖 AI Agents: For complete parameter docs and patterns, also read references/for-ai-agents.md.

---

Quick Decision Guide

"I need data from a URL"

Need	Endpoint
Meta tags / link preview data	GET /site/{url}
Raw HTML content	GET /scrape/{url} (add use_proxy=true if geo-blocked)
Specific elements (h1, h2, p)	GET /extract/{url}?html_elements=h1,h2,p
AI answer about the page	POST /query/{url} ⚠️ paid
Visual screenshot	GET /screenshot/{url}

"I need to generate an image"

Need	Settings
Technical diagram	kind: "diagram" — use diagramCode + diagramFormat for control
App icon/logo	kind: "icon" — set transparent: true
Social card (OG/Twitter)	kind: "social-card" — use aspectRatio: "og-image"
Basic QR code	kind: "qr-code"
Premium QR marketing card	kind: "illustration" — describe full design in prompt
General illustration	kind: "illustration"

QR Code: Basic vs Premium

Basic (kind: "qr-code"): Just the functional QR code.

Premium (kind: "illustration"): Full marketing asset with QR embedded in designed composition (gradients, 3D elements, CTAs, device mockups). Example prompt:

"Premium marketing card with QR code for https://myapp.com, cosmic purple gradient 
with floating 3D spheres, glowing accents, 'SCAN TO DOWNLOAD' call-to-action"

Diagram Tips

• Use diagramCode + diagramFormat for reliable syntax (bypasses AI generation)
• Use outputStyle: "standard" for structure-critical diagrams (premium may alter layout)
• ❌ Don't mix syntax with description: "graph LR A-->B make it pretty" will fail

---

Pricing & Requirements

Feature	Free Tier	Paid Plans
Site/Unfurl	✅ 100/month	Unlimited
Screenshot	✅ 100/month	Unlimited
Scrape	✅ 100/month	Unlimited
Extract	✅ 100/month	Unlimited
Query (AI)	❌	✅
Image Generation	✅ 4/month	Unlimited

💡 Try image generation free! Get 4 premium image generations per month on the free plan — no credit card required.

Sign up at dashboard.opengraph.io

Quick Setup

1. Sign up at dashboard.opengraph.io — free trial available
2. Configure (choose one):

Option A: Clawdbot config (recommended)

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

Option B: Environment variable

export OPENGRAPH_APP_ID="YOUR_APP_ID"

---

Clawdbot Usage (REST API)

Use curl with the OPENGRAPH_APP_ID environment variable. Base URL: https://opengraph.io/api/1.1/

Extract OpenGraph Data (Site/Unfurl)

# Get OG tags from a URL
curl -s "https://opengraph.io/api/1.1/site/$(echo -n 'https://example.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}"

Response includes hybridGraph.title, hybridGraph.description, hybridGraph.image, etc.

Screenshot a Webpage

# Capture screenshot (dimensions: 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"

Response: { "screenshotUrl": "https://..." }

Scrape HTML Content

# Fetch rendered HTML (with optional proxy)
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"

Extract Specific Elements

# Pull h1, h2, p tags
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"

Query (Ask AI About a Page)

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": "What services does this company offer?"}'

---

Image Generation (REST API)

Base URL: https://opengraph.io/image-agent/

Step 1: Create a Session

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')

Step 2: Generate an Image

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": "A beautiful QR code linking to https://example.com with modern gradient design",
    "kind": "qr-code",
    "aspectRatio": "square",
    "quality": "high"
  }'

Image kinds: illustration, diagram, icon, social-card, qr-code

Style presets: github-dark, vercel, stripe, neon-cyber, pastel, minimal-mono

Aspect ratios: square, og-image (1200×630), twitter-card, instagram-story, etc.

Step 3: Download the Asset

ASSET_ID="<from-generate-response>"
curl -s "https://opengraph.io/image-agent/assets/${ASSET_ID}/file?app_id=${OPENGRAPH_APP_ID}" -o output.png

Step 4: Iterate (Refine an Image)

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": "<previous-asset-id>",
    "prompt": "Change the background to blue"
  }'

---

Natural Language Examples

When users ask in natural language, translate to the appropriate API call:

User says	API to use
"Get the OG tags from URL"	GET /site/{url}
"Screenshot this page"	GET /screenshot/{url}
"Scrape the HTML from URL"	GET /scrape/{url}
"What does this page say about X?"	POST /query/{url}
"Generate a QR code for URL"	POST /image-agent/sessions/{id}/generate with kind: "qr-code"
"Create a premium QR marketing card"	POST /image-agent/sessions/{id}/generate with kind: "illustration" + design in prompt
"Create a social card for my blog"	POST /image-agent/sessions/{id}/generate with kind: "social-card"
"Make an architecture diagram"	POST /image-agent/sessions/{id}/generate with kind: "diagram"

QR Code Options

Basic QR Code (kind: "qr-code"): Generates just the functional QR code with minimal styling.

Premium QR Marketing Card (kind: "illustration"): Generates a complete marketing asset with the QR code embedded in a professionally designed composition - gradients, 3D elements, CTAs, device mockups, etc.

# Premium QR marketing card example
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": "Premium marketing card with QR code for https://myapp.com, cosmic purple gradient background with floating 3D spheres, glowing accents, SCAN TO DOWNLOAD call-to-action",
    "kind": "illustration",
    "aspectRatio": "square",
    "outputStyle": "premium",
    "brandColors": ["#6B4CE6", "#9B6DFF"],
    "stylePreferences": "modern, cosmic, premium marketing, 3D elements"
  }'

---

MCP Integration (for Claude Desktop, Cursor, etc.)

For AI clients that support MCP, use the MCP server:

# Interactive installer
npx opengraph-io-mcp --client cursor --app-id YOUR_APP_ID

# Or configure manually:
{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "OPENGRAPH_APP_ID": "YOUR_APP_ID"
      }
    }
  }
}

See references/mcp-clients.md for client-specific setup.

More Details

• references/for-ai-agents.md — AI agent reference (tool schemas, decision trees, patterns)
• references/api-reference.md — Complete API documentation (all endpoints, parameters, response schemas)
• references/platform-support.md — Platform support guide (YouTube, Vimeo, TikTok, social media, e-commerce)
• references/troubleshooting.md — Troubleshooting guide (common errors, debugging tips)
• references/image-generation.md — Image presets, styles, templates
• references/mcp-clients.md — MCP client configurations

OpenGraph.io Skill for Clawdbot

<p align="center"> <img src="examples/opengraph-hero.jpg" alt="OpenGraph.io - Extract, Screenshot, Scrape, Query, Generate" width="700"> </p> <p align="center"> <a href="https://www.opengraph.io">Website</a> • <a href="https://dashboard.opengraph.io">Get API Key</a> • <a href="https://www.opengraph.io/documentation">API Docs</a> </p>

---

What is this?

A Clawdbot skill that gives your AI assistant the power to:

• 🔗 Extract OpenGraph data — Get titles, descriptions, images from any URL
• 📸 Capture screenshots — Render webpages as images
• 🌐 Scrape content — Fetch HTML with JavaScript rendering
• 🔍 Extract elements — Pull specific HTML elements (h1, p, etc.)
• 🤖 Query pages — Ask AI questions about any webpage
• 🎨 Generate images — Create diagrams, icons, social cards, QR codes

Quick Start

1. Get your API key

Sign up at dashboard.opengraph.io and copy your App ID.

2. Install the skill

clawdbot skill install opengraph-io

3. Configure your API key

Option A: Clawdbot config (recommended)

clawdbot configure --section skills
# Select opengraph-io, enter your App ID

Option B: Environment variable

export OPENGRAPH_APP_ID="your-app-id"

Option C: Config file

// ~/.clawdbot/clawdbot.json
{
  "skills": {
    "entries": {
      "opengraph-io": {
        "apiKey": "your-app-id"
      }
    }
  }
}

4. Use it!

Just ask your AI assistant:

"Get the OG tags from https://github.com"
"Screenshot https://securecoders.com"  
"Generate a diagram: graph TD; A-->B-->C"
"Create a social card for my blog post about AI"

Features

Web Data Extraction

Capability	Description
Unfurl URLs	Extract OpenGraph, Twitter Cards, meta tags
Screenshot	Capture full-page or viewport screenshots
Scrape	Fetch HTML with JS rendering and proxy support
Extract	Pull specific elements in structured format
Query	Ask questions, get AI-powered answers

AI Image Generation

Type	Examples
Diagrams	Mermaid flowcharts, architecture diagrams, ERDs
Icons	App icons, logos, symbols
Social Cards	OG images, Twitter cards, LinkedIn banners
QR Codes	Styled QR codes with branding
Illustrations	Hero images, backgrounds, artwork

Style presets: github-dark, vercel, stripe, linear, neon-cyber, and more.

Aspect ratios: og-image, twitter-card, instagram-story, youtube-thumbnail, and more.

For Other AI Clients (MCP)

This skill wraps opengraph-io-mcp, which works with any MCP-compatible client:

# Interactive setup for Cursor, Claude Desktop, VS Code, etc.
npx opengraph-io-mcp --client cursor --app-id YOUR_APP_ID

See references/mcp-clients.md for detailed setup guides.

Documentation

• SKILL.md — Main skill documentation
• references/image-generation.md — Image gen presets, styles, templates
• references/mcp-clients.md — Setup for Claude, Cursor, VS Code, etc.

Examples

Extract metadata

User: "What's the OG image for https://stripe.com?"
Assistant: [fetches and returns OpenGraph data including image URL]

Generate a diagram

User: "Create an architecture diagram for: User -> API Gateway -> Auth Service -> Database"
Assistant: [generates styled Mermaid diagram as PNG]

Screenshot a page

User: "Screenshot https://linear.app and save it"
Assistant: [captures screenshot, provides image]

Ask about a page

User: "What pricing tiers does https://notion.so offer?"
Assistant: [queries page with AI, returns structured answer]

Scrape with proxy

User: "Scrape https://weather.com with proxy enabled"
Assistant: [fetches full HTML content via residential proxy, returns page data]

Pricing

Feature	Free Tier	Paid Plans
Web extraction (unfurl, scrape, screenshot)	✅ 100/month	Unlimited
AI Query	❌	✅
Image Generation	✅ 4/month	Unlimited

🎉 Try it free! Get 4 premium image generations per month — no credit card required. Sign up →

Paid Plans

Plan	Requests/month	Price
Starter	10,000	$29/mo
Growth	100,000	$99/mo
Enterprise	Unlimited	Custom

Image generation: ~$0.01–$0.15 per image (billed separately via credits).

Generated Examples

OpenGraph.io Social Card

<p align="center"> <img src="examples/social-card.jpg" alt="OpenGraph.io Social Card" width="600"> </p>

Generate a social card for OpenGraph.io - a web data extraction and AI image 
generation API. Include icons representing links/URLs, screenshots, code, and 
AI sparkles. Use a dark gradient background with blue and purple accents. 
Style: vercel, aspect ratio: og-image

Architecture Diagram

<p align="center"> <img src="examples/architecture-diagram.png" alt="Architecture Diagram" width="600"> </p>

Clean, professional enterprise architecture diagram. Crisp white background 
with blue (#0071CE) as primary color and yellow (#FFC220) accents. 
Horizontal flow: Left shows 'AI Assistant' card with Claude, Cursor, VSCode. 
Center shows 'MCP Server Tool Router' hub. Right shows 5 API service cards: 
Unfurl, Screenshot, Scrape, Query, Image Gen. Clean blue connecting lines 
with subtle yellow spark highlights at connection points. Flat design, 
minimal shadows, professional corporate aesthetic.

kind: social-card, aspectRatio: og-image, stylePreset: corporate,
brandColors: ["#0071CE", "#FFC220", "#FFFFFF"], quality: high

DashDrop Signup Promo Card

<p align="center"> <img src="examples/dashdrop-card.jpg" alt="DashDrop Gig Economy Signup Card" width="600"> </p>

Premium OpenGraph card for DashDrop grocery delivery app signup promotion. 
Fresh, clean aesthetic with vibrant green gradient background. Friendly 
delivery person carrying a paper grocery bag with fresh vegetables visible. 
Bold 'DashDrop' wordmark at top. Headline 'First 10 Deliveries FREE' 
prominently displayed. Include subtle illustrations of fresh produce 
(carrots, apples, leafy greens). Modern app-style design with rounded 
corners and soft shadows. Warm, inviting, and trustworthy feel.

kind: social-card, aspectRatio: og-image, stylePreset: startup,
brandColors: ["#0AAD05", "#FF7009", "#003D29"], quality: high

Web Scraping with Proxy

Scrape geo-restricted or bot-protected sites through residential proxies:

User: "Scrape https://weather.com with proxy enabled"

API: GET /scrape/{url}?app_id=XXX&use_proxy=true

Response:
{
  "htmlContent": "<!DOCTYPE html><html>...",
  "url": "https://weather.com/",
  "statusCode": 200,
  "contentLength": 2830768
}

App Marketing Card with QR Code

<p align="center"> <img src="examples/qr-code.png" alt="TaskFlow App Marketing Card" width="600"> </p>

Premium app marketing card for TaskFlow productivity app. Dark gradient 
background. Left side shows iPhone mockup displaying the app interface. 
Center has 'TaskFlow' headline with tagline 'Organize Your Life'. Right 
side features QR code with 'Scan to Download' and App Store badge. 
Decorative productivity icons. Modern SaaS aesthetic.

kind: social-card, aspectRatio: og-image, stylePreset: vercel,
brandColors: ["#6366F1", "#8B5CF6", "#0F172A"], quality: high

See examples/EXAMPLES.md for more prompts, settings, and details.

Support

• 📖 OpenGraph.io Documentation
• 💬 Clawdbot Discord
• 🐛 Report Issues

License

MIT

---

<p align="center"> Made with 🎯 by <a href="https://securecoders.com">SecureCoders</a> </p>