OpenGraph MCP Server for VS Code

Overview

VS Code supports MCP servers through its Copilot Chat feature. The configuration uses a special inputs system that prompts for sensitive values like API keys, so you never have to hardcode them in config files.

Installation

1. Get Your App ID

   Sign up at dashboard.opengraph.io to get your free App ID.

2. Create the MCP Config File

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

   .vscode/mcp.json

   Copy

   {
     "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": {
           "OPENGRAPH_APP_ID": "${input:opengraph-app-id}"
         }
       }
     }
   }

3. Reload VS Code

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

4. Enter Your App ID

   When you first use Copilot Chat, VS Code will prompt you to enter your OpenGraph App ID. It's stored securely and won't appear in your config file.

Alternative: User-Level Config

If you want the MCP server available across all your projects, you can configure it globally in your VS Code settings:

{
  "mcp": {
    "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": {
          "OPENGRAPH_APP_ID": "${input:opengraph-app-id}"
        }
      }
    }
  }
}

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
• Check that Node.js is installed and in your PATH

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?

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