OpenGraph MCP Server for VS Code

Overview

VS Code supports MCP servers through its Copilot Chat feature. The hosted OpenGraph server can be added directly by URL — the first time you connect, a browser tab opens so you can sign in with your OpenGraph.io account.

Installation

1. Create the MCP Config File

   In your project root, create .vscode/mcp.json:

   .vscode/mcp.json

   Copy

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

2. Reload VS Code

   Reload the VS Code window (Cmd/Ctrl + Shift + P → "Developer: Reload Window").

3. Sign In

   The first time you use Copilot Chat with the OpenGraph tools, a browser tab opens for you to sign in with your OpenGraph.io account. No App ID needed.

Alternative: Using an API Key

Prefer a static key over signing in? VS Code's inputs system lets you prompt for it securely instead of hardcoding it:

{
  "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}"
      }
    }
  }
}

User-Level Config

If you want the MCP server available across all your projects, add the same servers block to your VS Code user settings instead:

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

Using the Tools

Once configured, open Copilot Chat (Cmd/Ctrl + Shift + I) and try these prompts:

Fetch Link Preview

@opengraph unfurl https://github.com and show me the OpenGraph metadata

Take Screenshot

@opengraph take a screenshot of https://tailwindcss.com

Scrape Content

@opengraph scrape the HTML from https://docs.python.org and find all the main navigation links

Troubleshooting

Tools not appearing in Copilot Chat?

• Ensure you have GitHub Copilot Chat extension installed and enabled
• Verify the .vscode/mcp.json file is in your workspace root
• Reload the VS Code window after creating the config
• If you signed in, make sure you approved the connection in the browser tab that opened

Viewing MCP Logs

Open the Output panel (View → Output) and select "MCP" from the dropdown to see server logs and errors.

Input Prompt Not Appearing? (API key mode)

If VS Code doesn't prompt for your App ID, try:

• Running "Clear MCP Credentials" from the Command Palette
• Removing and re-adding the config file
• Restarting VS Code completely

Related Guides