MCP Quickstart

What is MCP?

The Model Context Protocol (MCP) is a standard that allows AI assistants to securely connect to external tools and services. Instead of manually copying data into your conversations, your AI can directly:

• Fetch link previews and OpenGraph metadata from any URL
• Capture screenshots of webpages
• Scrape HTML content with JavaScript rendering
• Extract specific elements (headings, paragraphs, etc.) or convert pages to Markdown
• Ask questions about webpage content
• Audit a site's SEO/social tags or check how a link previews before you post

The OpenGraph MCP Server acts as a secure bridge — sign in with your account (no key needed), or use a static API key if you prefer. Either way, your credentials never reach the AI model itself.

Quick Setup

1. Choose Your Client

   Select your AI assistant below and add the configuration — no App ID needed yet. For detailed instructions, visit the Install Hub.

2. Sign In

   Restart your AI assistant and connect. A browser tab opens automatically so you can sign in with your OpenGraph.io account — no key to copy.

3. Try It Out

   Once connected, try asking:

   Example prompt

   Copy

   Unfurl https://github.com and summarize the OpenGraph metadata.

Configuration by Client

Every config below points at the hosted server with no credentials — you'll sign in through your browser the first time you connect. Prefer a static API key instead? Swap in the x-app-id snippet shown under each client.

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "opengraph": {
      "url": "https://mcp.opengraph.io/mcp"
    }
  }
}

{
  "mcpServers": {
    "opengraph": {
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Claude Desktop

Claude Desktop doesn't support adding remote MCP servers by editing a config file — add it through Settings → Connectors → Add custom connector instead, using https://mcp.opengraph.io/mcp as the URL. See the Claude Desktop guide for the full walkthrough, including the local npx alternative if you'd rather use a static App ID.

Claude Code (CLI)

Run this command to add the MCP server:

claude mcp add --transport http opengraph https://mcp.opengraph.io/mcp

claude mcp add --transport http --header "x-app-id: YOUR_OPENGRAPH_APP_ID" opengraph https://mcp.opengraph.io/mcp

VS Code

Add to .vscode/mcp.json in your project:

{
  "servers": {
    "opengraph": {
      "type": "http",
      "url": "https://mcp.opengraph.io/mcp"
    }
  }
}

{
  "inputs": [
    {
      "type": "promptString",
      "id": "opengraph-app-id",
      "description": "OpenGraph App ID",
      "password": true
    }
  ],
  "servers": {
    "opengraph": {
      "type": "http",
      "url": "https://mcp.opengraph.io/mcp",
      "headers": {
        "x-app-id": "${input:opengraph-app-id}"
      }
    }
  }
}

Available Tools

Once connected, your AI assistant will have access to these tools:

Example Prompts

Try these prompts with your AI assistant after connecting:

Unfurl https://stripe.com and show me the title, description, and image.

Take a screenshot of https://tailwindcss.com and describe the hero section.

Scrape the HTML from https://news.ycombinator.com and extract the top 5 story titles.

Query https://docs.python.org and ask: What are the main sections of the documentation?

Audit my site https://example.com and tell me the biggest issues to fix.

Check the link preview for https://example.com — how will it look on Facebook and X?

Troubleshooting

If tools aren't appearing in your AI assistant:

• Restart the application after adding the configuration
• If you signed in, make sure you approved the connection in the browser tab that opened
• If you're using an API key instead, verify your App ID is correct in the dashboard
• Check the troubleshooting guide for client-specific log locations

Next Steps