OpenGraph.io

OpenGraph MCP Server for Windsurf

Enhance Cascade AI in Windsurf with real-time web data access. Fetch metadata, screenshots, and scraped content without leaving your IDE.

Why Use OpenGraph MCP in Windsurf?

Windsurf's Cascade AI becomes significantly more powerful when it can access live web data. With OpenGraph MCP, Cascade can:

  • Analyze documentation – Fetch and understand API docs on the fly
  • Inspect websites – Capture screenshots for UI/UX analysis
  • Extract content – Pull structured data from any webpage
  • Debug link previews – Test OpenGraph metadata for your sites

Installation

  1. Get Your App ID

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

  2. Create or Edit Your MCP Config

    Open or create ~/.codeium/windsurf/mcp_config.json:

    ~/.codeium/windsurf/mcp_config.json
    {
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "OPENGRAPH_APP_ID": "YOUR_OPENGRAPH_APP_ID"
      }
    }
  }
}

  3. Restart Windsurf

    Completely restart Windsurf to load the new MCP server configuration.

  4. Verify the Connection

    Open Cascade and try:

    Test prompt
    Unfurl https://github.com and summarize the page metadata.

Using environment variables: Windsurf supports environment variable interpolation. You can use $OPENGRAPH_APP_ID in the config if you have it set in your shell environment.

Available Tools

Once connected, Cascade has access to:

  • Get OG Data – Extract OpenGraph metadata and Twitter Cards
  • Screenshot – Capture full-page or viewport screenshots
  • Scrape – Fetch raw HTML with JavaScript rendering
  • Query – Ask questions about webpage content

Example Prompts

Documentation Research

Research docs
Scrape the React documentation at https://react.dev/learn and summarize the main concepts.

Design Inspiration

Screenshot analysis
Take a screenshot of https://vercel.com and describe their navigation design pattern.

Competitive Analysis

Compare sites
Unfurl https://stripe.com and https://square.com and compare their OpenGraph metadata strategies.

Troubleshooting

Tools not appearing?

  • Ensure Windsurf is fully restarted (not just reloaded)
  • Verify the config file path is exactly ~/.codeium/windsurf/mcp_config.json
  • Check that Node.js is installed and accessible from your terminal
  • Validate your JSON syntax (no trailing commas)

Common Errors

  • "Server failed to start" – Check Node.js installation
  • "Invalid App ID" – Verify your App ID in the dashboard

Related Guides

Install Hub

Interactive configuration generator for all clients.

Cursor Setup

Setup guide for the Cursor editor.

Troubleshooting

Common issues and solutions.