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.)
• Ask questions about webpage content

The OpenGraph MCP Server acts as a secure bridge—your API key stays on your machine, never exposed to the AI model itself.

Quick Setup

1. Get Your App ID

   Sign up at dashboard.opengraph.io and copy your App ID from the dashboard.

2. Choose Your Client

   Select your AI assistant below and copy the configuration. For detailed instructions, visit the Install Hub.

3. Try It Out

   After configuring, restart your AI assistant and try asking:

   Example prompt

   Copy

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

Configuration by Client

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Claude Desktop

Add to your Claude Desktop config file (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

Claude Code (CLI)

Run this command to add the MCP server:

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

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

VS Code

Add to .vscode/mcp.json in your project (VS Code will prompt for your App ID):

{
  "inputs": [
    {
      "type": "promptString",
      "id": "opengraph-app-id",
      "description": "OpenGraph App ID",
      "password": true
    }
  ],
  "servers": {
    "opengraph": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "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?

Troubleshooting

If tools aren't appearing in your AI assistant:

• Restart the application after adding the configuration
• Verify your App ID is correct in the dashboard
• Ensure Node.js is installed (required for npx)
• Check the troubleshooting guide for client-specific log locations

Next Steps