Website • Get API Key • API Docs
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
Sign up at dashboard.opengraph.io and copy your App ID.
clawdbot skill install opengraph-ioOption A: Clawdbot config (recommended)
clawdbot configure --section skills
# Select opengraph-io, enter your App IDOption 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"
}
}
}
}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"
| 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 |
| 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.
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_IDSee references/mcp-clients.md for detailed setup guides.
- 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.
User: "What's the OG image for https://stripe.com?"
Assistant: [fetches and returns OpenGraph data including image URL]
User: "Create an architecture diagram for: User -> API Gateway -> Auth Service -> Database"
Assistant: [generates styled Mermaid diagram as PNG]
User: "Screenshot https://linear.app and save it"
Assistant: [captures screenshot, provides image]
User: "What pricing tiers does https://notion.so offer?"
Assistant: [queries page with AI, returns structured answer]
User: "Scrape https://weather.com with proxy enabled"
Assistant: [fetches full HTML content via residential proxy, returns page data]
| 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 →
| 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).
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
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
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
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
}
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.
MIT
Made with 🎯 by SecureCoders