OpenGraph MCP Server

Provides AI agents with access to OpenGraph.io's complete API suite through the Model Context Protocol (MCP), including link unfurling, HTML scraping, text extraction, screenshot capture, and advanced AI-powered image generation.

What This Skill Does

This skill exposes every OpenGraph.io API endpoint through a standard MCP server, enabling AI agents to:

Prerequisites

1. OpenGraph.io App ID (obtain from https://www.opengraph.io/)

2. Node.js runtime (npm available)

Installation

For Claude Code

Run the following command:

**macOS/Linux:**

```bash

claude mcp add --transport stdio --env APP_ID=YOUR_OPENGRAPH_APP_ID opengraph -- npx -y opengraph-io-mcp

```

**Windows:**

```bash

claude mcp add --transport stdio --env APP_ID=YOUR_OPENGRAPH_APP_ID opengraph -- cmd /c npx -y opengraph-io-mcp

```

Replace `YOUR_OPENGRAPH_APP_ID` with your actual App ID from OpenGraph.io.

For Other Runtimes

Use the CLI installer for guided setup:

```bash

Interactive mode

npx opengraph-io-mcp-install

Direct mode

npx opengraph-io-mcp-install --client <cursor|claude-desktop|windsurf|vscode|zed|jetbrains> --app-id YOUR_APP_ID

```

Available Tools

OpenGraph.io Data Tools

1. **Get OG Data** - Extract Open Graph metadata from URLs

- Use for: Social media previews, link unfurling, metadata extraction

- Returns: title, description, images, type, URL, site_name, etc.

2. **Get OG Scrape Data** - Deep scrape of webpage content

- Use for: Full HTML access, content analysis

- Returns: Complete HTML structure and parsed data

3. **Get OG Screenshot** - Capture webpage screenshots

- Use for: Visual documentation, site monitoring, thumbnails

- Returns: Screenshot URL and metadata

4. **Get OG Query** - Query websites with custom questions

- Use for: AI-powered content extraction with specific queries

- Returns: Structured answers based on your question

5. **Get OG Extract** - Extract specific HTML elements

- Use for: Targeted content scraping (h1, p, article text, etc.)

- Returns: Filtered HTML elements matching your selectors

Image Generation Tools

1. **Generate Image** - Create professional images from prompts

- **Types:** illustration, diagram, icon, social-card, qr-code

- **Diagram syntaxes:** Mermaid, D2, Vega

- **Aspect ratios:** og-image, twitter-card, instagram-square, wide, square, portrait, icon-small/medium/large

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

- **Diagram templates:** auth-flow, microservices, ci-cd, database-schema, cloud-architecture

2. **Iterate Image** - Refine or modify existing images

- Change colors, styles, elements

- Crop to specific regions

- Fix issues or apply variations

3. **Inspect Image Session** - Review session metadata and asset history

- Retrieve all assets from a generation session

- View parent-child relationships for iterations

4. **Export Image Asset** - Save images to local filesystem

- Secure path validation (blocks system directories)

- Automatic directory creation

- Overwrite protection option

Usage Instructions

Basic Workflow

1. **For metadata extraction:**

```

Use "Get OG Data" with the target URL

```

2. **For content scraping:**

```

Use "Get OG Scrape Data" for full HTML or "Get OG Extract" for specific elements

```

3. **For screenshots:**

```

Use "Get OG Screenshot" with the target URL

```

4. **For AI-powered queries:**

```

Use "Get OG Query" with URL and custom question

```

5. **For image generation:**

```

a. Use "Generate Image" with prompt and desired parameters

b. (Optional) Use "Iterate Image" to refine the result

c. Use "Inspect Image Session" to review all assets

d. Use "Export Image Asset" to save to local filesystem

```

Example Use Cases

**Social Card Generation:**

```

generateImage({

prompt: "A modern tech startup hero image with abstract geometric shapes",

kind: "social-card",

aspectRatio: "og-image",

stylePreset: "vercel",

brandColors: ["#0070F3", "#000000"]

})

```

**Architecture Diagram:**

```

generateImage({

prompt: "graph TD; A[User] --> B[API]; B --> C[Database]",

kind: "diagram",

diagramSyntax: "mermaid",

stylePreset: "github-dark"

})

```

**Iterate on Image:**

```

iterateImage({

sessionId: "uuid-from-generate",

assetId: "uuid-from-generate",

prompt: "Change the primary color to #0033A0 and add a subtle drop shadow"

})

```

**Export Image:**

```

exportImageAsset({

sessionId: "uuid-from-generate",

assetId: "uuid-from-generate",

destinationPath: "/absolute/path/to/output.png",

overwrite: true

})

```

Security Notes

Troubleshooting

1. **Tools not appearing:** Verify the MCP server is configured correctly in your client's config file

2. **Authorization errors:** Check that APP_ID environment variable is set correctly

3. **Connection issues:** Ensure `npx` can access npm registry and install packages

4. **Export failures:** Verify destination path is absolute and parent directories exist (auto-created) or are writable

Additional Resources