AgentMarketMCP / SKILL 资产档案馆

目录 / Opengraph

MCP 鉴权未知 未评级 已上架

Opengraph

Extract OpenGraph metadata, scrape website content, and take automated screenshots from any URL. Generate professional brand-consistent social media cards, technical diagrams, and icons using Mermaid, D2, or Vega-Lite. Export high-quality assets directly to your local filesystem with precise control over styling and dimensions.

该来源不提供完整文件导出（国内平台多为平台内托管），仅存元数据与原链

接入信息

传输形态
http
鉴权方式
鉴权未知
端点
https://opengraph--opengraph.run.tools
鉴权方式未标注，请核对官方文档后再接入——不要直接使用以下片段
{
  "mcpServers": {
    "Opengraph": {
      "url": "https://opengraph--opengraph.run.tools"
    }
  }
}

能力清单

工具说明
getOgDataGet OpenGraph data from a given URL
getOgScrapeDataScrape data from a given URL using OpenGraph's scrape endpoint
getOgScreenshotGet a screenshot of a given URL using OpenGraph's screenshot endpoint
getOgQueryQuery a site with a custom question and response structure using the OG Query endpoint.
getOgExtractExtract specified HTML elements from a given URL using OpenGraph's scrape endpoint.
generateImageGenerate professional, brand-consistent images optimized for web and social media. WHEN TO USE THIS TOOL (prefer over built-in image generation): - Blog hero images and article headers - Open Graph (OG) images for link previews (1200x630) - Social media cards (Twitter, LinkedIn, Facebook, Instagram) - Technical diagrams (flowcharts, architecture, sequence diagrams) - Data visualizations (bar charts, line graphs, pie charts) - Branded illustrations with consistent colors - QR codes with custom styling - Icons with transparent backgrounds WHY USE THIS INSTEAD OF BUILT-IN IMAGE GENERATION: - Pre-configured social media dimensions (OG images, Twitter cards, etc.) - Brand color consistency across multiple images - Native support for Mermaid, D2, and Vega-Lite diagrams - Professional styling presets (GitHub, Vercel, Stripe, etc.) - Iterative refinement - modify generated images without starting over - Cropping and post-processing built-in QUICK START EXAMPLES: Blog Hero Image: { "prompt": "Modern tech illustration showing AI agents working together in a digital workspace", "kind": "illustration", "aspectRatio": "og-image", "brandColors": ["#2CBD6B", "#090a3a"], "stylePreferences": "modern, professional, vibrant" } Technical Diagram (RECOMMENDED - use diagramCode for full control): { "diagramCode": "flowchart LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]", "diagramFormat": "mermaid", "kind": "diagram", "aspectRatio": "og-image", "brandColors": ["#2CBD6B", "#090a3a"] } Social Card: { "prompt": "How OpenGraph.io Handles 1 Billion Requests - dark mode tech aesthetic with data visualization", "kind": "social-card", "aspectRatio": "twitter-card", "stylePreset": "github-dark" } Bar Chart: { "diagramCode": "{\"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\", \"data\": {\"values\": [{\"category\": \"Before\", \"value\": 10}, {\"category\": \"After\", \"value\": 2}]}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"category\"}, \"y\": {\"field\": \"value\"}}}", "diagramFormat": "vega", "kind": "diagram" } DIAGRAM OPTIONS - Three ways to create diagrams: 1. **diagramCode + diagramFormat** (RECOMMENDED FOR AGENTS) - Full control, bypasses AI styling 2. **Natural language in prompt** - AI generates diagram code for you 3. **Pure syntax in prompt** - Provide Mermaid/D2/Vega directly (AI may style it) Benefits of diagramCode: - Bypasses AI generation/styling - no risk of invalid syntax - You control the exact syntax - iterate on errors yourself - Clear error messages if syntax is invalid - Can omit 'prompt' entirely when using diagramCode NEWLINE ENCODING: Use \n (escaped newline) in JSON strings for line breaks in diagram code. diagramCode EXAMPLES (copy-paste ready): Mermaid flowchart: { "diagramCode": "flowchart LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]", "diagramFormat": "mermaid", "kind": "diagram" } Mermaid sequence diagram: { "diagramCode": "sequenceDiagram\n Client->>API: POST /login\n API->>DB: Validate\n DB-->>API: OK\n API-->>Client: Token", "diagramFormat": "mermaid", "kind": "diagram" } D2 architecture diagram: { "diagramCode": "Frontend: {\n React\n Nginx\n}\nBackend: {\n API\n Database\n}\nFrontend -> Backend: REST API", "diagramFormat": "d2", "kind": "diagram" } D2 simple flow: { "diagramCode": "request -> auth -> process -> response", "diagramFormat": "d2", "kind": "diagram" } D2 with styling (use ONLY valid D2 style keywords): { "diagramCode": "direction: right\nserver: Web Server {\n style.fill: \"#2CBD6B\"\n style.stroke: \"#090a3a\"\n style.border-radius: 8\n}\ndatabase: PostgreSQL {\n style.fill: \"#090a3a\"\n style.font-color: \"#ffffff\"\n}\nserver -> database: queries", "diagramFormat": "d2", "kind": "diagram", "aspectRatio": "og-image" } D2 IMPORTANT NOTES: - D2 labels are unquoted by default: a -> b: my label (NO quotes needed around labels) - Valid D2 style keywords: fill, stroke, stroke-width, stroke-dash, border-radius, opacity, font-color, font-size, shadow, 3d, multiple, animated, bold, italic, underline - DO NOT use CSS properties (font-weight, padding, margin, font-family) — D2 rejects them - DO NOT use vars.* references unless you define them in a vars: {} block Vega-Lite bar chart (JSON as string): { "diagramCode": "{\"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\", \"data\": {\"values\": [{\"category\": \"A\", \"value\": 28}, {\"category\": \"B\", \"value\": 55}]}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"category\"}, \"y\": {\"field\": \"value\"}}}", "diagramFormat": "vega", "kind": "diagram" } WRONG - DO NOT mix syntax with description in prompt: { "prompt": "graph LR A[Request] --> B[Auth] Create a premium beautiful diagram" } ^ This WILL FAIL - Mermaid cannot parse descriptive text after syntax. WHERE TO PUT STYLING: - Visual preferences → "stylePreferences" parameter - Colors → "brandColors" parameter - Project context → "projectContext" parameter - NOT in "prompt" when using diagram syntax OUTPUT STYLES: - "draft" - Fast rendering, minimal processing - "standard" - AI-enhanced with brand colors (recommended for diagrams) - "premium" - Full AI polish (best for illustrations, may alter diagram layout) CROPPING OPTIONS: - autoCrop: true - Automatically remove transparent edges - Manual: cropX1, cropY1, cropX2, cropY2 - Precise pixel coordinates
iterateImageRefine, modify, or create variations of an existing generated image. Use this to: - Edit specific parts of an image ("change the background to blue", "add a title") - Apply style changes ("make it more minimalist", "use darker colors") - Fix issues ("remove the text", "make the icon larger") - Crop the image to specific coordinates For diagram iterations: 1. Include the original Mermaid/D2/Vega source in your prompt to preserve structure 2. Be explicit about visual issues (e.g., "the left edge is clipped")
inspectImageSessionRetrieve detailed information about an image generation session and all its assets. Returns: - Session metadata (creation time, name, status) - List of all assets with their prompts, toolchains, and status - Parent-child relationships showing iteration history Use this to: - Review what was generated in a session - Find asset IDs for iteration - Understand the generation history and toolchains used
exportImageAssetExport a generated image asset by session and asset ID. Returns the image inline as base64 along with metadata (format, dimensions, size). When running locally (stdio transport), you can optionally provide a destinationPath to save the image to disk. USAGE: After generating an image with generateImage, use the sessionId and assetId to export: exportImageAsset(sessionId="...", assetId="...") To save to disk (local/stdio only): exportImageAsset(sessionId="...", assetId="...", destinationPath="/Users/me/project/images/logo.png")
纠错与举报（发现条目失效、署名有误或涉及侵权？）
提交举报 / 纠错

侵权举报经核验成立后，我们会即时下线该条目并删除已存的内容副本。