OpenGraph MCP-Server (og-mcp)

og‑mcp ist ein Model‑Context‑Protocol (MCP) Server, der jeden OpenGraph.io ( https://opengraph.io ) API-Endpunkt für KI-Agenten (z. B. Anthropic Claude, Cursor, LangGraph) über die standardmäßige MCP-Schnittstelle verfügbar macht.

Warum? Wenn Sie OpenGraph.io bereits verwenden, um Links aufzuklappen, HTML zu scrapen, Artikeltexte zu extrahieren oder Screenshots aufzunehmen, können Sie nun dieselben Funktionen Ihren autonomen Agenten zur Verfügung stellen, ohne rohe API-Schlüssel preiszugeben.

Globale Installation

Sie können dieses Paket global über npm installieren:

npm install -g opengraph-io-mcp

Schnellinstallation

CLI-Installer (Empfohlen)

Der einfachste Weg, OpenGraph MCP für jeden unterstützten Client zu konfigurieren:

# 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

Unterstützte Clients: cursor, claude-desktop, windsurf, vscode, zed, jetbrains

Claude Desktop-Erweiterung

Für Benutzer von Claude Desktop können Sie auch die .mcpb-Erweiterung für eine Ein-Klick-Installation von der Releases-Seite herunterladen.

Client-Konfiguration

Alle unten aufgeführten Konfigurationen verwenden den gehosteten HTTPS-Transport (empfohlen). Ersetzen Sie YOUR_OPENGRAPH_APP_ID durch Ihre OpenGraph.io App ID. Keine lokale Installation oder npx erforderlich – verweisen Sie Ihren Client einfach auf die gehostete URL.

Claude Desktop

Konfigurationspfad:

• 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

Installation mit einem Befehl:

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

Cursor

Konfigurationspfad: ~/.cursor/mcp.json

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

VS Code

Konfigurationspfad: .vscode/mcp.json (in Ihrem Projektverzeichnis)

VS Code unterstützt Eingabeaufforderungen für die sichere Handhabung von Anmeldeinformationen:

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

Konfigurationspfad: ~/.codeium/windsurf/mcp_config.json

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

JetBrains AI Assistant

Fügen Sie dies zu Ihrer JetBrains AI Assistant MCP-Konfiguration hinzu:

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

Zed

Konfigurationspfad: ~/.config/zed/settings.json

Hinweis: Zed verwendet context_servers anstelle von mcpServers:

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

Verfügbare Tools

OpenGraph.io Datentools

Bildgenerierungstools

Bildgenerierung

Der og-mcp-Server enthält leistungsstarke KI-gestützte Bildgenerierungsfunktionen, die sich perfekt für die Erstellung von Social-Media-Cards, Architekturdiagrammen, Icons und mehr eignen.

Generate Image

Erstellen Sie Bilder aus natürlichsprachlichen Prompts oder Diagrammcode.

Unterstützte Bildtypen (kind):

• illustration - KI-generierte Bilder für allgemeine Zwecke

• diagram - Technische Diagramme aus Mermaid-, D2- oder Vega-Syntax

• icon - App-Icons und Logos

• social-card - OG-Bilder, optimiert für Social Sharing

• qr-code - QR-Codes mit optionalem Styling

Voreingestellte Seitenverhältnisse:

• 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

Stil-Voreinstellungen: github-dark, github-light, notion, vercel, linear, stripe, neon-cyber, pastel, minimal-mono, corporate, startup, documentation, technical

Diagramm-Vorlagen: auth-flow, oauth2-flow, crud-api, microservices, ci-cd, gitflow, database-schema, state-machine, user-journey, cloud-architecture, system-context

Beispielanwendung:

// 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

Verfeinern oder modifizieren Sie ein bereits generiertes Bild.

Anwendungsfälle:

• Spezifische Teile bearbeiten: "Ändere den Hintergrund auf Blau"

• Stiländerungen anwenden: "Mach es minimalistischer"

• Probleme beheben: "Entferne den Text", "Mach das Icon größer"

• Auf bestimmte Koordinaten zuschneiden

Beispiel:

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

Inspect Image Session

Überprüfen Sie Sitzungsdetails und finden Sie Asset-IDs für die Iteration.

Rückgabewerte:

• Sitzungsmetadaten (Erstellungszeit, Name, Status)

• Liste aller Assets mit Prompts, Toolchains und Status

• Eltern-Kind-Beziehungen, die die Iterationshistorie zeigen

Beispiel:

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

Export Image Asset

Exportieren Sie ein generiertes Bild-Asset nach Sitzungs- und Asset-ID. Gibt das Bild inline als Base64 zusammen mit Metadaten (Format, Abmessungen, Größe) zurück.

Bei lokaler Ausführung (stdio-Transport) können Sie optional einen destinationPath angeben, um das Bild auf der Festplatte zu speichern. Beim gehosteten/HTTP-Transport wird der Pfad ignoriert und das Bild nur inline zurückgegeben.

Beispiele:

// Inline only (works everywhere)
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate"
})

// Save to disk (stdio/local only)
exportImageAsset({
  sessionId: "uuid-from-generate",
  assetId: "uuid-from-generate",
  destinationPath: "/Users/me/project/images/hero.png"
})

Funktionsweise

Diagramm generiert mit den Bildgenerierungstools von og-mcp

Der og-mcp-Server fungiert als Brücke zwischen KI-Clients (wie Claude oder anderen LLMs) und der OpenGraph.io-API:

1. Der KI-Client führt einen Tool-Aufruf an eine der verfügbaren MCP-Funktionen aus

2. Der og-mcp-Server empfängt die Anfrage und formatiert sie für die OpenGraph.io-API

3. OpenGraph.io verarbeitet die Anfrage und gibt Daten zurück

4. og-mcp transformiert die Antwort in ein für den KI-Client geeignetes Format

5. Der KI-Client erhält die strukturierten Daten zur weiteren Verwendung

Diese Abstraktion verhindert, dass API-Schlüssel direkt an die KI weitergegeben werden, während gleichzeitig der volle Zugriff auf die Funktionen von OpenGraph.io ermöglicht wird.

Einrichtung und Ausführung

1. Klonen Sie dieses Repository

2. Installieren Sie die Abhängigkeiten:

   npm install

3. Kompilieren Sie den TypeScript-Code:

   npm run build

4. Starten Sie den Server:

   npm start

Der Server läuft standardmäßig auf Port 3010 (konfigurierbar über die Umgebungsvariable PORT).

Konfiguration

Der Server benötigt eine OpenGraph.io App ID, um ordnungsgemäß zu funktionieren. Sie können diese auf verschiedene Weise bereitstellen:

1. Verwendung von Umgebungsvariablen: Setzen Sie OPENGRAPH_APP_ID oder APP_ID in einer .env-Datei oder als Umgebungsvariable

2. Verwendung von Befehlszeilenargumenten bei stdio-Transport: --app-id YOUR_APP_ID

3. Bei Verwendung des SSE-Transports: Fügen Sie sie als Abfrageparameter in die URL ein (?app_id=YOUR_APP_ID)

Beispiel für eine .env-Datei:

OPENGRAPH_APP_ID=your_app_id_here
# or
APP_ID=your_app_id_here

Transportoptionen

Stdio-Transport (Empfohlen)

Für die Verwendung über die Befehlszeile und die globale npm-Installation kann der Server mit stdio-Transport ausgeführt werden:

npm run start:stdio

Sie können den OpenGraph API-Schlüssel direkt über ein Befehlszeilenargument übergeben:

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

Bei globaler Installation:

opengraph-io-mcp --app-id YOUR_APP_ID

Dieser Modus ermöglicht es, den Server direkt von anderen Anwendungen aus aufzurufen, die MCP verwenden.

HTTP/SSE-Transport

Diese Methode startet einen Webserver, auf den über HTTP zugegriffen werden kann und der SSE für das Streaming verwendet:

npm start

Fehlerbehebung

• Wenn Tools nicht angezeigt werden, prüfen Sie, ob der Server läuft und die URL in Cursor korrekt konfiguriert ist

• Überprüfen Sie die Server-Logs auf Verbindungs- oder Autorisierungsprobleme

• Stellen Sie sicher, dass Claude angewiesen wurde, die spezifischen Tools namentlich zu verwenden