OpenGraph MCPサーバー (og-mcp)

og‑mcpは、OpenGraph.io ( https://opengraph.io ) のすべてのAPIエンドポイントを、標準のMCPインターフェースを通じてAIエージェント（Anthropic Claude、Cursor、LangGraphなど）が利用できるようにするモデルコンテキストプロトコル（MCP）サーバーです。

なぜこれが必要なのか？ すでにOpenGraph.ioを使用してリンクの展開、HTMLのスクレイピング、記事テキストの抽出、またはスクリーンショットのキャプチャを行っている場合、生のAPIキーを公開することなく、同じ機能を自律型エージェントに提供できるようになります。

グローバルインストール

npmを使用して、このパッケージをグローバルにインストールできます：

npm install -g opengraph-io-mcp

クイックインストール

CLIインストーラー（推奨）

サポートされているクライアントでOpenGraph MCPを構成する最も簡単な方法です：

# Interactive mode - guides you through setup
npx opengraph-io-mcp-install

# Direct mode - specify client and app ID
npx opengraph-io-mcp-install --client cursor --app-id YOUR_APP_ID

サポートされているクライアント： cursor, claude-desktop, windsurf, vscode, zed, jetbrains

Claude Desktop拡張機能

Claude Desktopユーザーは、リリースページからワンクリックでインストールできる .mcpb 拡張機能をダウンロードすることもできます。

クライアント構成

以下のすべての構成では、ホストされたHTTPSトランスポート（推奨）を使用します。 YOUR_OPENGRAPH_APP_ID をあなたの OpenGraph.io App ID に置き換えてください。ローカルインストールや npx は不要です。クライアントをホストされたURLに向けるだけです。

Claude Desktop

構成ファイルの場所：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

• Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Code

ワンコマンドインストール：

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

Cursor

構成ファイルの場所： ~/.cursor/mcp.json

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

VS Code

構成ファイルの場所： .vscode/mcp.json （プロジェクトディレクトリ内）

VS Codeは、安全な資格情報処理のための入力プロンプトをサポートしています：

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

Windsurf

構成ファイルの場所： ~/.codeium/windsurf/mcp_config.json

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

JetBrains AI Assistant

JetBrains AI AssistantのMCP構成に追加してください：

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

Zed

構成ファイルの場所： ~/.config/zed/settings.json

注：Zedは mcpServers の代わりに context_servers を使用します：

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

利用可能なツール

OpenGraph.ioデータツール

画像生成ツール

画像生成

og-mcpサーバーには、強力なAI駆動の画像生成機能が含まれており、ソーシャルメディアカード、アーキテクチャ図、アイコンなどの作成に最適です。

Generate Image

自然言語プロンプトや図のコードから画像を作成します。

サポートされている画像タイプ (kind):

• illustration - 汎用的なAI生成画像

• diagram - Mermaid、D2、またはVega構文による技術図

• icon - アプリのアイコンやロゴ

• social-card - ソーシャル共有用に最適化されたOG画像

• qr-code - スタイリング可能なQRコード

プリセットのアスペクト比:

• Social: og-image, twitter-card, twitter-post, linkedin-post, facebook-post, instagram-square, instagram-portrait, instagram-story, youtube-thumbnail

• Standard: wide, square, portrait

• Icons: icon-small, icon-medium, icon-large

スタイルプリセット: github-dark, github-light, notion, vercel, linear, stripe, neon-cyber, pastel, minimal-mono, corporate, startup, documentation, technical

図のテンプレート: auth-flow, oauth2-flow, crud-api, microservices, ci-cd, gitflow, database-schema, state-machine, user-journey, cloud-architecture, system-context

使用例:

// Generate a social card
generateImage({
  prompt: "A modern tech startup hero image with abstract geometric shapes",
  kind: "social-card",
  aspectRatio: "og-image",
  stylePreset: "vercel",
  brandColors: ["#0070F3", "#000000"]
})

// Generate a diagram from Mermaid syntax
generateImage({
  prompt: "graph TD; A[User] --> B[API]; B --> C[Database]",
  kind: "diagram",
  diagramSyntax: "mermaid",
  stylePreset: "github-dark"
})

Iterate Image

既存の生成済み画像を洗練または修正します。

ユースケース:

• 特定のパーツの編集: 「背景を青に変更して」

• ス