OpenGraph.io MCP Server

Export a generated image asset to a specific file path on the local filesystem. Use this tool to save generated images to your project directory after reviewing them. SECURITY: - Destination path must be an absolute path - Cannot write to system directories (/etc, /usr, /bin, /System, etc.) - Parent directories will be created if they don't exist USAGE: After generating an image with generateImage, use the sessionId and assetId to export: exportImageAsset(sessionId="...", assetId="...", destinationPath="/Users/me/project/images/logo.png")

Generate 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

Get OpenGraph data from a given URL

Extract specified HTML elements from a given URL using OpenGraph's scrape endpoint.

Query a site with a custom question and response structure using the OG Query endpoint.

Scrape data from a given URL using OpenGraph's scrape endpoint

Get a screenshot of a given URL using OpenGraph's screenshot endpoint

Retrieve 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

Refine, 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")