[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6Q3H7RPRDKSPAC7WNZ9187P":3,"skill-same:01M6Q3H7RPRDKSPAC7WNZ9187P":125},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":66,"commitSha":67,"skillDirectory":68,"forksCount":69,"repositoryHtmlUrl":70,"repositoryHomepageUrl":6,"ownerHtmlUrl":71,"ownerBlogUrl":6,"ownerDescription":72,"updatedAt":73,"install":74,"resources":86},"01M6Q3H7RPRDKSPAC7WNZ9187P","opengraph-io",null,"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'.","Kernel8901\u002Fai-agent-skills-classification","Kernel8901","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F72647553?v=4","01M6KV388J2H5PNC8D8P940BJD","01M6KV38CS5B3AY63RKZB410YM",7,"MIT","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"opengraph io","io","images","qr","URL","card","app","get","social","diagrams","MCP","install","scraping","scrape","data","server","generate","create","diagram","mcp server","2026-11-10 10:12:30",false,"---\nname: opengraph-io\nversion: 1.4.0\ndescription: \"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'.\"\nhomepage: https:\u002F\u002Fwww.opengraph.io\nmetadata: {\"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)\"}]}}\n---\n\n# OpenGraph.io\n\n![OpenGraph.io - Extract, Screenshot, Scrape, Query, Generate](https:\u002F\u002Fraw.githubusercontent.com\u002Fsecurecoders\u002Fopengraph-io-skill\u002Fmain\u002Fexamples\u002Fopengraph-hero.jpg)\n\nExtract web data, capture screenshots, and generate AI-powered images via OpenGraph.io APIs.\n\n> ? **AI Agents:** For complete parameter docs and patterns, also read [references\u002Ffor-ai-agents.md](references\u002Ffor-ai-agents.md).\n\n---\n\n## Quick Decision Guide\n\n### \"I need data from a URL\"\n| Need | Endpoint |\n|------|----------|\n| Meta tags \u002F link preview data | `GET \u002Fsite\u002F{url}` |\n| Raw HTML content | `GET \u002Fscrape\u002F{url}` (add `use_proxy=true` if geo-blocked) |\n| Specific elements (h1, h2, p) | `GET \u002Fextract\u002F{url}?html_elements=h1,h2,p` |\n| AI answer about the page | `POST \u002Fquery\u002F{url}` ⚠️ paid |\n| Visual screenshot | `GET \u002Fscreenshot\u002F{url}` |\n\n### \"I need to generate an image\"\n| Need | Settings |\n|------|----------|\n| Technical diagram | `kind: \"diagram\"` — use `diagramCode` + `diagramFormat` for control |\n| App icon\u002Flogo | `kind: \"icon\"` — set `transparent: true` |\n| Social card (OG\u002FTwitter) | `kind: \"social-card\"` — use `aspectRatio: \"og-image\"` |\n| Basic QR code | `kind: \"qr-code\"` |\n| **Premium QR marketing card** | `kind: \"illustration\"` — describe full design in prompt |\n| General illustration | `kind: \"illustration\"` |\n\n### QR Code: Basic vs Premium\n\n**Basic** (`kind: \"qr-code\"`): Just the functional QR code.\n\n**Premium** (`kind: \"illustration\"`): Full marketing asset with QR embedded in designed composition (gradients, 3D elements, CTAs, device mockups). Example prompt:\n```\n\"Premium marketing card with QR code for https:\u002F\u002Fmyapp.com, cosmic purple gradient \nwith floating 3D spheres, glowing accents, 'SCAN TO DOWNLOAD' call-to-action\"\n```\n\n### Diagram Tips\n- Use `diagramCode` + `diagramFormat` for reliable syntax (bypasses AI generation)\n- Use `outputStyle: \"standard\"` for structure-critical diagrams (premium may alter layout)\n- ❌ Don't mix syntax with description: `\"graph LR A-->B make it pretty\"` will fail\n\n---\n\n## Pricing & Requirements\n\n| Feature | Free Tier | Paid Plans |\n|---------|-----------|------------|\n| Site\u002FUnfurl | ✅ 100\u002Fmonth | Unlimited |\n| Screenshot | ✅ 100\u002Fmonth | Unlimited |\n| Scrape | ✅ 100\u002Fmonth | Unlimited |\n| Extract | ✅ 100\u002Fmonth | Unlimited |\n| Query (AI) | ❌ | ✅ |\n| **Image Generation** | ✅ **4\u002Fmonth** | Unlimited |\n\n> ? **Try image generation free!** Get 4 premium image generations per month on the free plan — no credit card required.\n\nSign up at [dashboard.opengraph.io](https:\u002F\u002Fdashboard.opengraph.io\u002Fregister)\n\n## Quick Setup\n\n1. **Sign up** at [dashboard.opengraph.io](https:\u002F\u002Fdashboard.opengraph.io\u002Fregister) — free trial available\n2. Configure (choose one):\n\n**Option A: Clawdbot config** (recommended)\n```json5\n\u002F\u002F ~\u002F.clawdbot\u002Fclawdbot.json\n{\n  skills: {\n    entries: {\n      \"opengraph-io\": {\n        apiKey: \"YOUR_APP_ID\"\n      }\n    }\n  }\n}\n```\n\n**Option B: Environment variable**\n```bash\nexport OPENGRAPH_APP_ID=\"YOUR_APP_ID\"\n```\n\n---\n\n## Clawdbot Usage (REST API)\n\nUse `curl` with the `OPENGRAPH_APP_ID` environment variable. Base URL: `https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002F`\n\n### Extract OpenGraph Data (Site\u002FUnfurl)\n\n```bash\n# Get OG tags from a URL\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fsite\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}\"\n```\n\nResponse includes `hybridGraph.title`, `hybridGraph.description`, `hybridGraph.image`, etc.\n\n### Screenshot a Webpage\n\n```bash\n# Capture screenshot (dimensions: sm, md, lg, xl)\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fscreenshot\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&dimensions=lg\"\n```\n\nResponse: `{ \"screenshotUrl\": \"https:\u002F\u002F...\" }`\n\n### Scrape HTML Content\n\n```bash\n# Fetch rendered HTML (with optional proxy)\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fscrape\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&use_proxy=true\"\n```\n\n### Extract Specific Elements\n\n```bash\n# Pull h1, h2, p tags\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fextract\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&html_elements=h1,h2,p\"\n```\n\n### Query (Ask AI About a Page)\n\n```bash\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fquery\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"query\": \"What services does this company offer?\"}'\n```\n\n---\n\n## Image Generation (REST API)\n\nBase URL: `https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002F`\n\n### Step 1: Create a Session\n\n```bash\nSESSION=$(curl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"name\": \"my-session\"}')\nSESSION_ID=$(echo $SESSION | jq -r '.sessionId')\n```\n\n### Step 2: Generate an Image\n\n```bash\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions\u002F${SESSION_ID}\u002Fgenerate?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"prompt\": \"A beautiful QR code linking to https:\u002F\u002Fexample.com with modern gradient design\",\n    \"kind\": \"qr-code\",\n    \"aspectRatio\": \"square\",\n    \"quality\": \"high\"\n  }'\n```\n\n**Image kinds:** `illustration`, `diagram`, `icon`, `social-card`, `qr-code`\n\n**Style presets:** `github-dark`, `vercel`, `stripe`, `neon-cyber`, `pastel`, `minimal-mono`\n\n**Aspect ratios:** `square`, `og-image` (1200×630), `twitter-card`, `instagram-story`, etc.\n\n### Step 3: Download the Asset\n\n```bash\nASSET_ID=\"\u003Cfrom-generate-response>\"\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fassets\u002F${ASSET_ID}\u002Ffile?app_id=${OPENGRAPH_APP_ID}\" -o output.png\n```\n\n### Step 4: Iterate (Refine an Image)\n\n```bash\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions\u002F${SESSION_ID}\u002Fiterate?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"assetId\": \"\u003Cprevious-asset-id>\",\n    \"prompt\": \"Change the background to blue\"\n  }'\n```\n\n---\n\n## Natural Language Examples\n\nWhen users ask in natural language, translate to the appropriate API call:\n\n| User says | API to use |\n|-----------|------------|\n| \"Get the OG tags from URL\" | `GET \u002Fsite\u002F{url}` |\n| \"Screenshot this page\" | `GET \u002Fscreenshot\u002F{url}` |\n| \"Scrape the HTML from URL\" | `GET \u002Fscrape\u002F{url}` |\n| \"What does this page say about X?\" | `POST \u002Fquery\u002F{url}` |\n| \"Generate a QR code for URL\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"qr-code\"` |\n| \"Create a premium QR marketing card\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"illustration\"` + design in prompt |\n| \"Create a social card for my blog\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"social-card\"` |\n| \"Make an architecture diagram\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"diagram\"` |\n\n### QR Code Options\n\n**Basic QR Code** (`kind: \"qr-code\"`): Generates just the functional QR code with minimal styling.\n\n**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.\n\n```bash\n# Premium QR marketing card example\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions\u002F${SESSION_ID}\u002Fgenerate?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"prompt\": \"Premium marketing card with QR code for https:\u002F\u002Fmyapp.com, cosmic purple gradient background with floating 3D spheres, glowing accents, SCAN TO DOWNLOAD call-to-action\",\n    \"kind\": \"illustration\",\n    \"aspectRatio\": \"square\",\n    \"outputStyle\": \"premium\",\n    \"brandColors\": [\"#6B4CE6\", \"#9B6DFF\"],\n    \"stylePreferences\": \"modern, cosmic, premium marketing, 3D elements\"\n  }'\n```\n\n---\n\n## MCP Integration (for Claude Desktop, Cursor, etc.)\n\nFor AI clients that support MCP, use the MCP server:\n\n```bash\n# Interactive installer\nnpx opengraph-io-mcp --client cursor --app-id YOUR_APP_ID\n\n# Or configure manually:\n{\n  \"mcpServers\": {\n    \"opengraph\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"opengraph-io-mcp\"],\n      \"env\": {\n        \"OPENGRAPH_APP_ID\": \"YOUR_APP_ID\"\n      }\n    }\n  }\n}\n```\n\nSee [references\u002Fmcp-clients.md](references\u002Fmcp-clients.md) for client-specific setup.\n\n## More Details\n\n- [references\u002Ffor-ai-agents.md](references\u002Ffor-ai-agents.md) — **AI agent reference** (tool schemas, decision trees, patterns)\n- [references\u002Fapi-reference.md](references\u002Fapi-reference.md) — **Complete API documentation** (all endpoints, parameters, response schemas)\n- [references\u002Fplatform-support.md](references\u002Fplatform-support.md) — **Platform support guide** (YouTube, Vimeo, TikTok, social media, e-commerce)\n- [references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md) — **Troubleshooting guide** (common errors, debugging tips)\n- [references\u002Fimage-generation.md](references\u002Fimage-generation.md) — Image presets, styles, templates\n- [references\u002Fmcp-clients.md](references\u002Fmcp-clients.md) — MCP client configurations\n","# OpenGraph.io\n\n![OpenGraph.io - Extract, Screenshot, Scrape, Query, Generate](https:\u002F\u002Fraw.githubusercontent.com\u002Fsecurecoders\u002Fopengraph-io-skill\u002Fmain\u002Fexamples\u002Fopengraph-hero.jpg)\n\nExtract web data, capture screenshots, and generate AI-powered images via OpenGraph.io APIs.\n\n> ? **AI Agents:** For complete parameter docs and patterns, also read [references\u002Ffor-ai-agents.md](references\u002Ffor-ai-agents.md).\n\n---\n\n## Quick Decision Guide\n\n### \"I need data from a URL\"\n| Need | Endpoint |\n|------|----------|\n| Meta tags \u002F link preview data | `GET \u002Fsite\u002F{url}` |\n| Raw HTML content | `GET \u002Fscrape\u002F{url}` (add `use_proxy=true` if geo-blocked) |\n| Specific elements (h1, h2, p) | `GET \u002Fextract\u002F{url}?html_elements=h1,h2,p` |\n| AI answer about the page | `POST \u002Fquery\u002F{url}` ⚠️ paid |\n| Visual screenshot | `GET \u002Fscreenshot\u002F{url}` |\n\n### \"I need to generate an image\"\n| Need | Settings |\n|------|----------|\n| Technical diagram | `kind: \"diagram\"` — use `diagramCode` + `diagramFormat` for control |\n| App icon\u002Flogo | `kind: \"icon\"` — set `transparent: true` |\n| Social card (OG\u002FTwitter) | `kind: \"social-card\"` — use `aspectRatio: \"og-image\"` |\n| Basic QR code | `kind: \"qr-code\"` |\n| **Premium QR marketing card** | `kind: \"illustration\"` — describe full design in prompt |\n| General illustration | `kind: \"illustration\"` |\n\n### QR Code: Basic vs Premium\n\n**Basic** (`kind: \"qr-code\"`): Just the functional QR code.\n\n**Premium** (`kind: \"illustration\"`): Full marketing asset with QR embedded in designed composition (gradients, 3D elements, CTAs, device mockups). Example prompt:\n```\n\"Premium marketing card with QR code for https:\u002F\u002Fmyapp.com, cosmic purple gradient \nwith floating 3D spheres, glowing accents, 'SCAN TO DOWNLOAD' call-to-action\"\n```\n\n### Diagram Tips\n- Use `diagramCode` + `diagramFormat` for reliable syntax (bypasses AI generation)\n- Use `outputStyle: \"standard\"` for structure-critical diagrams (premium may alter layout)\n- ❌ Don't mix syntax with description: `\"graph LR A-->B make it pretty\"` will fail\n\n---\n\n## Pricing & Requirements\n\n| Feature | Free Tier | Paid Plans |\n|---------|-----------|------------|\n| Site\u002FUnfurl | ✅ 100\u002Fmonth | Unlimited |\n| Screenshot | ✅ 100\u002Fmonth | Unlimited |\n| Scrape | ✅ 100\u002Fmonth | Unlimited |\n| Extract | ✅ 100\u002Fmonth | Unlimited |\n| Query (AI) | ❌ | ✅ |\n| **Image Generation** | ✅ **4\u002Fmonth** | Unlimited |\n\n> ? **Try image generation free!** Get 4 premium image generations per month on the free plan — no credit card required.\n\nSign up at [dashboard.opengraph.io](https:\u002F\u002Fdashboard.opengraph.io\u002Fregister)\n\n## Quick Setup\n\n1. **Sign up** at [dashboard.opengraph.io](https:\u002F\u002Fdashboard.opengraph.io\u002Fregister) — free trial available\n2. Configure (choose one):\n\n**Option A: Clawdbot config** (recommended)\n```json5\n\u002F\u002F ~\u002F.clawdbot\u002Fclawdbot.json\n{\n  skills: {\n    entries: {\n      \"opengraph-io\": {\n        apiKey: \"YOUR_APP_ID\"\n      }\n    }\n  }\n}\n```\n\n**Option B: Environment variable**\n```bash\nexport OPENGRAPH_APP_ID=\"YOUR_APP_ID\"\n```\n\n---\n\n## Clawdbot Usage (REST API)\n\nUse `curl` with the `OPENGRAPH_APP_ID` environment variable. Base URL: `https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002F`\n\n### Extract OpenGraph Data (Site\u002FUnfurl)\n\n```bash\n# Get OG tags from a URL\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fsite\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}\"\n```\n\nResponse includes `hybridGraph.title`, `hybridGraph.description`, `hybridGraph.image`, etc.\n\n### Screenshot a Webpage\n\n```bash\n# Capture screenshot (dimensions: sm, md, lg, xl)\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fscreenshot\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&dimensions=lg\"\n```\n\nResponse: `{ \"screenshotUrl\": \"https:\u002F\u002F...\" }`\n\n### Scrape HTML Content\n\n```bash\n# Fetch rendered HTML (with optional proxy)\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fscrape\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&use_proxy=true\"\n```\n\n### Extract Specific Elements\n\n```bash\n# Pull h1, h2, p tags\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fextract\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}&html_elements=h1,h2,p\"\n```\n\n### Query (Ask AI About a Page)\n\n```bash\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fapi\u002F1.1\u002Fquery\u002F$(echo -n 'https:\u002F\u002Fexample.com' | jq -sRr @uri)?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"query\": \"What services does this company offer?\"}'\n```\n\n---\n\n## Image Generation (REST API)\n\nBase URL: `https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002F`\n\n### Step 1: Create a Session\n\n```bash\nSESSION=$(curl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"name\": \"my-session\"}')\nSESSION_ID=$(echo $SESSION | jq -r '.sessionId')\n```\n\n### Step 2: Generate an Image\n\n```bash\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions\u002F${SESSION_ID}\u002Fgenerate?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"prompt\": \"A beautiful QR code linking to https:\u002F\u002Fexample.com with modern gradient design\",\n    \"kind\": \"qr-code\",\n    \"aspectRatio\": \"square\",\n    \"quality\": \"high\"\n  }'\n```\n\n**Image kinds:** `illustration`, `diagram`, `icon`, `social-card`, `qr-code`\n\n**Style presets:** `github-dark`, `vercel`, `stripe`, `neon-cyber`, `pastel`, `minimal-mono`\n\n**Aspect ratios:** `square`, `og-image` (1200×630), `twitter-card`, `instagram-story`, etc.\n\n### Step 3: Download the Asset\n\n```bash\nASSET_ID=\"\u003Cfrom-generate-response>\"\ncurl -s \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fassets\u002F${ASSET_ID}\u002Ffile?app_id=${OPENGRAPH_APP_ID}\" -o output.png\n```\n\n### Step 4: Iterate (Refine an Image)\n\n```bash\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions\u002F${SESSION_ID}\u002Fiterate?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"assetId\": \"\u003Cprevious-asset-id>\",\n    \"prompt\": \"Change the background to blue\"\n  }'\n```\n\n---\n\n## Natural Language Examples\n\nWhen users ask in natural language, translate to the appropriate API call:\n\n| User says | API to use |\n|-----------|------------|\n| \"Get the OG tags from URL\" | `GET \u002Fsite\u002F{url}` |\n| \"Screenshot this page\" | `GET \u002Fscreenshot\u002F{url}` |\n| \"Scrape the HTML from URL\" | `GET \u002Fscrape\u002F{url}` |\n| \"What does this page say about X?\" | `POST \u002Fquery\u002F{url}` |\n| \"Generate a QR code for URL\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"qr-code\"` |\n| \"Create a premium QR marketing card\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"illustration\"` + design in prompt |\n| \"Create a social card for my blog\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"social-card\"` |\n| \"Make an architecture diagram\" | `POST \u002Fimage-agent\u002Fsessions\u002F{id}\u002Fgenerate` with `kind: \"diagram\"` |\n\n### QR Code Options\n\n**Basic QR Code** (`kind: \"qr-code\"`): Generates just the functional QR code with minimal styling.\n\n**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.\n\n```bash\n# Premium QR marketing card example\ncurl -s -X POST \"https:\u002F\u002Fopengraph.io\u002Fimage-agent\u002Fsessions\u002F${SESSION_ID}\u002Fgenerate?app_id=${OPENGRAPH_APP_ID}\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\n    \"prompt\": \"Premium marketing card with QR code for https:\u002F\u002Fmyapp.com, cosmic purple gradient background with floating 3D spheres, glowing accents, SCAN TO DOWNLOAD call-to-action\",\n    \"kind\": \"illustration\",\n    \"aspectRatio\": \"square\",\n    \"outputStyle\": \"premium\",\n    \"brandColors\": [\"#6B4CE6\", \"#9B6DFF\"],\n    \"stylePreferences\": \"modern, cosmic, premium marketing, 3D elements\"\n  }'\n```\n\n---\n\n## MCP Integration (for Claude Desktop, Cursor, etc.)\n\nFor AI clients that support MCP, use the MCP server:\n\n```bash\n# Interactive installer\nnpx opengraph-io-mcp --client cursor --app-id YOUR_APP_ID\n\n# Or configure manually:\n{\n  \"mcpServers\": {\n    \"opengraph\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"opengraph-io-mcp\"],\n      \"env\": {\n        \"OPENGRAPH_APP_ID\": \"YOUR_APP_ID\"\n      }\n    }\n  }\n}\n```\n\nSee [references\u002Fmcp-clients.md](references\u002Fmcp-clients.md) for client-specific setup.\n\n## More Details\n\n- [references\u002Ffor-ai-agents.md](references\u002Ffor-ai-agents.md) — **AI agent reference** (tool schemas, decision trees, patterns)\n- [references\u002Fapi-reference.md](references\u002Fapi-reference.md) — **Complete API documentation** (all endpoints, parameters, response schemas)\n- [references\u002Fplatform-support.md](references\u002Fplatform-support.md) — **Platform support guide** (YouTube, Vimeo, TikTok, social media, e-commerce)\n- [references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md) — **Troubleshooting guide** (common errors, debugging tips)\n- [references\u002Fimage-generation.md](references\u002Fimage-generation.md) — Image presets, styles, templates\n- [references\u002Fmcp-clients.md](references\u002Fmcp-clients.md) — MCP client configurations\n",{"name":5,"version":48,"homepage":49,"metadata":50,"description":7},"1.4.0","https:\u002F\u002Fwww.opengraph.io",{"clawdbot":51},{"emoji":52,"install":53,"requires":61,"primaryEnv":63},"?",[54],{"id":55,"bins":56,"kind":58,"label":59,"global":60,"package":57},"mcp",[57],"opengraph-io-mcp","npm","Install MCP server (optional, for other AI clients)",true,{"env":62,"bins":64},[63],"OPENGRAPH_APP_ID",[65],"curl","main","f4cb2d49f7667e79ef7804f50396d5aaffdf1f56","网页与前端开发\u002Fopengraph-io-skill",1,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification","https:\u002F\u002Fgithub.com\u002FKernel8901","a little little little dobe in life but science geek","2026-04-05 16:43:56",{"source":8,"skillName":5,"commands":75,"prompt":85,"zipAvailable":60},[76,79,82],{"tool":77,"command":78},"npx","npx skills add Kernel8901\u002Fai-agent-skills-classification --skill opengraph-io",{"tool":80,"command":81},"bunx","bunx skills add Kernel8901\u002Fai-agent-skills-classification --skill opengraph-io",{"tool":83,"command":84},"pnpm","pnpm dlx skills add Kernel8901\u002Fai-agent-skills-classification --skill opengraph-io","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002FSKILL.md",[87,93,97,101,105,109,113,117,121],{"path":88,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":91,"sourceHtmlUrl":92},"_meta.json","REFERENCE","参考文档",468,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002F_meta.json",{"path":94,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":95,"sourceHtmlUrl":96},"examples\u002FEXAMPLES.md",6431,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Fexamples\u002FEXAMPLES.md",{"path":98,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":99,"sourceHtmlUrl":100},"README.md",8254,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002FREADME.md",{"path":102,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":103,"sourceHtmlUrl":104},"references\u002Fapi-reference.md",13903,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Freferences\u002Fapi-reference.md",{"path":106,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":107,"sourceHtmlUrl":108},"references\u002Ffor-ai-agents.md",7269,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Freferences\u002Ffor-ai-agents.md",{"path":110,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":111,"sourceHtmlUrl":112},"references\u002Fimage-generation.md",4917,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Freferences\u002Fimage-generation.md",{"path":114,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":115,"sourceHtmlUrl":116},"references\u002Fmcp-clients.md",3261,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Freferences\u002Fmcp-clients.md",{"path":118,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":119,"sourceHtmlUrl":120},"references\u002Fplatform-support.md",6337,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Freferences\u002Fplatform-support.md",{"path":122,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":123,"sourceHtmlUrl":124},"references\u002Ftroubleshooting.md",6385,"https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F网页与前端开发\u002Fopengraph-io-skill\u002Freferences\u002Ftroubleshooting.md",[126,150,179,190,200,229],{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":43},"01M6Q5R6WZ06RRB9RQTW54B34B","zyfai","Earn yield on any Ethereum wallet on Base, Arbitrum, and Plasma. Use when a user wants passive DeFi yield on their funds. Deploys a non-custodial subaccount (Safe) linked to their EOA, enables automated yield optimization, and lets them deposit\u002Fwithdraw anytime.","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzyfai-sdk\u002FSKILL.md",[],[128,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149],"safe","ethereum","defi","Optimization","user","use","Wallet","base","deposit","withdraw","yield","arbitrum","non-custodial","passive","defi yield","earn","yield optimization",{"skillNo":151,"name":152,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":164,"publishedAt":43},"01M6Q5R337B5JSNER4P4YS03TN","zerion-api","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzerion-api\u002FSKILL.md",[155,158,159],{"categoryNo":156,"categoryName":157,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":160,"categoryName":161,"taxonomyType":162,"taxonomyTypeDesc":163},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[165,166,167,33,42,38,168,135,169,139,170,171,172,173,174,175,176,177,178],"api","zerion api","zerion","blockchain","transactions","crypto wallet","crypto","evm","solana","query","across","positions","token","prices",{"skillNo":180,"name":181,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":187,"publishedAt":43},"01M6Q5QZFYTDAZMZ27BN5VZXAR","zerion-api-skill","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzerion-api-skill\u002FSKILL.md",[184,185,186],{"categoryNo":156,"categoryName":157,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":160,"categoryName":161,"taxonomyType":162,"taxonomyTypeDesc":163},[165,188,189,166,167,33,42,38,168,135,169,139,171,172,173,174,175,176,177,178],"api skill","zerion api skill",{"skillNo":191,"name":192,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":198,"publishedAt":43},"01M6Q5QW17QW98RA3FE45E4RD8","zerion-api-mcp","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fzerion-api-mcp\u002FSKILL.md",[195,196,197],{"categoryNo":156,"categoryName":157,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":160,"categoryName":161,"taxonomyType":162,"taxonomyTypeDesc":163},[33,165,199,166,167,42,38,135,169,139,170,171,172,173,174,175,176,177,178],"zerion api mcp",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":209,"publishedAt":43},"01M6Q5QQYZB7A501BDEQWKGSJT","yahoo-finance-forex","Fetches real-time FOREX news and market data from Yahoo Finance for major currency pairs (EUR\u002FUSD, GBP\u002FUSD, USD\u002FJPY, etc.). Analyzes sentiment and provides trading context.","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fyahoo-finance-forex\u002FSKILL.md",[206],{"categoryNo":207,"categoryName":208,"taxonomyType":162,"taxonomyTypeDesc":163},"01JBSEEDCAT000000000000040","财务",[210,211,212,213,214,215,216,217,218,219,34,220,221,222,223,224,225,226,227,228],"finance","yahoo finance","forex","yahoo","yahoo finance forex","github","https","sentiment","real-time","python3","Market","usd","news","time","currency","gbp","pip","market data","for",{"skillNo":230,"name":231,"nameZh":6,"description":232,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":233,"categories":234,"keywords":236,"publishedAt":43},"01M6Q5QM6VS84WZVM7BKXXPF32","yahoo-finance","This skill should be used when the user asks to \"get stock prices\", \"check stock quotes\", \"look up earnings\", \"get financial data\", \"find trending stocks\", or needs stock market data from Yahoo Finance.","https:\u002F\u002Fgithub.com\u002FKernel8901\u002Fai-agent-skills-classification\u002Fblob\u002Fmain\u002F金融\u002Fyahoo-finance-cli\u002FSKILL.md",[235],{"categoryNo":207,"categoryName":208,"taxonomyType":162,"taxonomyTypeDesc":163},[210,211,213,237,238,239,240,241,242,220,243,30,244,245,246,247,248,249,178,227],"cli","homebrew","find","check","brew","up","local","stock","link","trending","sf","quotes","ln"]