Opengraph Io MCP

🚀 OpenGraph MCP Server (og-mcp)

og‑mcpは、標準的なMCPインターフェースを通じて、すべてのOpenGraph.io ( https://opengraph.io ) APIエンドポイントをAIエージェント（例：Anthropic Claude、Cursor、LangGraph）に利用可能にするModel‑Context‑Protocol (MCP)サーバーです。

なぜこのサーバーが必要なのか？既にOpenGraph.ioを使ってリンクの展開、HTMLのスクレイピング、記事テキストの抽出、またはスクリーンショットの取得を行っている場合、生のAPIキーを公開することなく、自律エージェントに同じ機能を付与することができます。

🚀 クイックスタート

📦 インストール

グローバルインストール

このパッケージはnpmを通じてグローバルにインストールできます。

npm install -g opengraph-io-mcp

クイックインストール

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

サポートされている任意のクライアントでOpenGraph MCPを構成する最も簡単な方法は次の通りです。

# 対話モード - セットアップをガイドします
npx opengraph-io-mcp-install

# 直接モード - クライアントとアプリ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拡張機能をダウンロードして、ワンクリックでインストールすることもできます。

💻 クライアントの構成

以下のすべての構成では、stdioトランスポート（推奨）を使用します。YOUR_OPENGRAPH_APP_IDをOpenGraph.ioのアプリIDに置き換えてください。

Claude Desktop

設定場所:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Code

1コマンドでのインストール:

# macOS/Linux
claude mcp add --transport stdio --env APP_ID=YOUR_OPENGRAPH_APP_ID opengraph -- npx -y opengraph-io-mcp

# Windows (cmd /cラッパーが必要)
claude mcp add --transport stdio --env APP_ID=YOUR_OPENGRAPH_APP_ID opengraph -- cmd /c npx -y opengraph-io-mcp

Cursor

設定場所: ~/.cursor/mcp.json

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "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": "stdio",
      "command": "npx",
      "args": ["-y", "opengraph-io-mcp"],
      "env": {
        "APP_ID": "${input:opengraph-app-id}"
      }
    }
  }
}

Windsurf

設定場所: ~/.codeium/windsurf/mcp_config.json

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

JetBrains AI Assistant

JetBrains AI AssistantのMCP構成に追加します。

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

Zed

設定場所: ~/.config/zed/settings.json 注意: ZedはmcpServersではなくcontext_serversを使用します。

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

✨ 主な機能

OpenGraph.ioデータツール

画像生成ツール

💻 使用例

画像生成

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

画像生成

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

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

• illustration - 汎用的なAI生成画像
• diagram - Mermaid、D2、またはVega構文による技術図
• icon - アプリアイコンとロゴ
• social-card - ソーシャル共有に最適化されたOG画像
• qr-code - オプションのスタイリング付きのQRコード

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

• ソーシャル: og-image, twitter-card, twitter-post, linkedin-post, facebook-post, instagram-square, instagram-portrait, instagram-story, youtube-thumbnail
• 標準: wide, square, portrait
• アイコン: 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

使用例:

// ソーシャルカードを生成する
generateImage({
  prompt: "A modern tech startup hero image with abstract geometric shapes",
  kind: "social-card",
  aspectRatio: "og-image",
  stylePreset: "vercel",
  brandColors: ["#0070F3", "#000000"]
})

// Mermaid構文から図を生成する
generateImage({
  prompt: "graph TD; A[User] --> B[API]; B --> C[Database]",
  kind: "diagram",
  diagramSyntax: "mermaid",
  stylePreset: "github-dark"
})

画像の反復処理

既存の生成画像を改良または修正します。

ユースケース:

• 特定の部分を編集する: "背景を青に変更する"
• スタイルを変更する: "もっとミニマルにする"
• 問題を修正する: "テキストを削除する", "アイコンを大きくする"
• 特定の座標に切り抜く

例:

iterateImage({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate",
  prompt: "Change the primary color to #0033A0 and add a subtle drop shadow"
})

画像セッションの検査

セッションの詳細を確認し、反復処理用のアセットIDを見つけます。

返される情報:

• セッションメタデータ（作成時間、名前、ステータス）
• プロンプト、ツールチェーン、およびステータスを含むすべてのアセットのリスト
• 反復履歴を示す親子関係

例:

inspectImageSession({
  sessionId: "uuid-from-generate"
})

画像アセットのエクスポート

セッションとアセットIDによって生成された画像アセットをエクスポートします。画像をインラインのbase64形式で返し、メタデータ（形式、寸法、サイズ）も含みます。

ローカルで実行する場合（stdioトランスポート）、オプションでdestinationPathを指定して画像をディスクに保存することができます。ホストされた/HTTPトランスポートでは、パスは無視され、画像はインラインでのみ返されます。

例:

// インラインのみ（どこでも動作）
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate"
})

// ディスクに保存（stdio/ローカルのみ）
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate",
  destinationPath: "/Users/me/project/images/hero.png"
})

🔧 技術詳細

動作原理

^{Diagram generated with og-mcp's image generation tools}

og-mcpサーバーは、AIクライアント（Claudeや他のLLMなど）とOpenGraph.io APIの間のブリッジとして機能します。

1. AIクライアントが利用可能なMCP関数の1つにツール呼び出しを行います。
2. og-mcpサーバーがリクエストを受け取り、OpenGraph.io API用にフォーマットします。
3. OpenGraph.ioがリクエストを処理し、データを返します。
4. og-mcpがレスポンスをAIクライアントに適した形式に変換します。
5. AIクライアントが使用可能な構造化データを受け取ります。

この抽象化により、APIキーをAIに直接公開することなく、OpenGraph.ioの機能を完全に利用することができます。

セットアップと実行

1. このリポジトリをクローンします。
2. 依存関係をインストールします。

   npm install
   

3. TypeScriptコードをビルドします。

   npm run build
   

4. サーバーを起動します。

   npm start
   

サーバーはデフォルトでポート3010で実行されます（PORT環境変数で設定可能）。

構成

サーバーを正常に機能させるには、OpenGraph.ioのアプリIDが必要です。これはいくつかの方法で提供できます。

1. 環境変数を使用する: .envファイルまたは環境変数としてOPENGRAPH_APP_IDまたはAPP_IDを設定します。
2. stdioトランスポートでコマンドライン引数を使用する: --app-id YOUR_APP_ID
3. SSEトランスポートを使用する場合: URLのクエリパラメータとして含めます (?app_id=YOUR_APP_ID)

例の.envファイル:

OPENGRAPH_APP_ID=your_app_id_here
# または
APP_ID=your_app_id_here

トランスポートオプション

Stdioトランスポート（推奨）

コマンドラインでの使用およびnpmのグローバルインストールでは、stdioトランスポートでサーバーを実行できます。

npm run start:stdio

コマンドライン引数を介してOpenGraph APIキーを直接渡すことができます。

npm run start:stdio -- --app-id YOUR_APP_ID

グローバルにインストールされている場合:

opengraph-io-mcp --app-id YOUR_APP_ID

このモードでは、MCPを使用する他のアプリケーションから直接サーバーを呼び出すことができます。

HTTP/SSEトランスポート

この方法では、HTTPを介してアクセスできるウェブサーバーを実行し、SSEを使用してストリーミングします。

npm start

HTTP/SSEトランスポート（代替）

stdioではなく永続的なサーバーを実行することを好む場合:

npm start

次に、クライアントを次のURLに接続するように構成します。

http://localhost:3010/sse?app_id=YOUR_OPENGRAPH_APP_ID

トラブルシューティング

• ツールが表示されない場合は、サーバーが実行されていることと、CursorでURLが正しく構成されていることを確認してください。
• 接続または認証の問題については、サーバーのログを確認してください。
• Claudeが特定のツールを名前で使用するように指示されていることを確認してください。