Servidor MCP de OpenGraph (og-mcp)

og‑mcp es un servidor de Protocolo de Contexto de Modelo (MCP) que pone a disposición de los agentes de IA (por ejemplo, Anthropic Claude, Cursor, LangGraph) todos los puntos finales de la API de OpenGraph.io ( https://opengraph.io ) a través de la interfaz estándar de MCP.

¿Por qué? Si ya utilizas OpenGraph.io para desplegar enlaces, rastrear HTML, extraer texto de artículos o capturar capturas de pantalla, ahora puedes ofrecer las mismas capacidades a tus agentes autónomos sin exponer claves de API sin procesar.

Instalación global

Puedes instalar este paquete globalmente a través de npm:

npm install -g opengraph-io-mcp

Instalación rápida

Instalador CLI (Recomendado)

La forma más sencilla de configurar OpenGraph MCP para cualquier cliente compatible:

# 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

Clientes compatibles: cursor, claude-desktop, windsurf, vscode, zed, jetbrains

Extensión de Claude Desktop

Para los usuarios de Claude Desktop, también puedes descargar la extensión .mcpb para una instalación con un solo clic desde la página de Releases.

Configuración del cliente

Todas las configuraciones a continuación utilizan el transporte HTTPS alojado (recomendado). Reemplaza YOUR_OPENGRAPH_APP_ID con tu ID de aplicación de OpenGraph.io. No se requiere instalación local ni npx: simplemente apunta tu cliente a la URL alojada.

Claude Desktop

Ubicación de la configuración:

• 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

Instalación con un solo comando:

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

Cursor

Ubicación de la configuración: ~/.cursor/mcp.json

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

VS Code

Ubicación de la configuración: .vscode/mcp.json (en el directorio de tu proyecto)

VS Code admite avisos de entrada para el manejo seguro de credenciales:

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

Ubicación de la configuración: ~/.codeium/windsurf/mcp_config.json

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

JetBrains AI Assistant

Añádelo a tu configuración de MCP de JetBrains AI Assistant:

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

Zed

Ubicación de la configuración: ~/.config/zed/settings.json

Nota: Zed utiliza context_servers en lugar de mcpServers:

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

Herramientas disponibles

Herramientas de datos de OpenGraph.io

Herramientas de generación de imágenes

Generación de imágenes

El servidor og-mcp incluye potentes capacidades de generación de imágenes impulsadas por IA, perfectas para crear tarjetas de redes sociales, diagramas de arquitectura, iconos y más.

Generate Image

Crea imágenes a partir de prompts de lenguaje natural o código de diagrama.

Tipos de imagen admitidos (kind):

• illustration - Imágenes generadas por IA de propósito general

• diagram - Diagramas técnicos a partir de sintaxis Mermaid, D2 o Vega

• icon - Iconos y logotipos de aplicaciones

• social-card - Imágenes OG optimizadas para compartir en redes sociales

• qr-code - Códigos QR con estilo opcional

Relaciones de aspecto preestablecidas:

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

• Estándar: wide, square, portrait

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

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

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

Ejemplo de uso:

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

Refina o modifica una imagen generada existente.

Casos de uso:

• Editar partes específicas: "cambia el fondo a azul"

• Aplicar cambios de estilo: "hazlo más minimalista"

• Corregir problemas: "elimina el texto", "haz el icono más grande"

• Recortar a coordenadas específicas

Ejemplo:

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

Revisa los detalles de la sesión y encuentra IDs de activos para la iteración.

Devuelve:

• Metadatos de la sesión (hora de creación, nombre, estado)

• Lista de todos los activos con prompts, cadenas de herramientas y estado

• Relaciones padre-hijo que muestran el historial de iteración

Ejemplo:

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

Export Image Asset

Exporta un activo de imagen generado por sesión y ID de activo. Devuelve la imagen en línea como base64 junto con metadatos (formato, dimensiones, tamaño).

Al ejecutar localmente (transporte stdio), puedes proporcionar opcionalmente un destinationPath para guardar la imagen en el disco. En el transporte alojado/HTTP, la ruta se ignora y la imagen se devuelve solo en línea.

Ejemplos:

// 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"
})

Cómo funciona

Diagrama generado con las herramientas de generación de imágenes de og-mcp

El servidor og-mcp actúa como un puente entre los clientes de IA (como Claude u otros LLM) y la API de OpenGraph.io:

1. El cliente de IA realiza una llamada de herramienta a una de las funciones de MCP disponibles

2. El servidor og-mcp recibe la solicitud y la formatea para la API de OpenGraph.io

3. OpenGraph.io procesa la solicitud y devuelve los datos

4. og-mcp transforma la respuesta en un formato adecuado para el cliente de IA

5. El cliente de IA recibe los datos estructurados listos para su uso

Esta abstracción evita exponer las claves de API directamente a la IA mientras proporciona acceso completo a las capacidades de OpenGraph.io.

Configuración y ejecución

1. Clona este repositorio

2. Instala las dependencias:

   npm install

3. Compila el código TypeScript:

   npm run build

4. Inicia el servidor:

   npm start

El servidor se ejecutará en el puerto 3010 de forma predeterminada (configurable a través de la variable de entorno PORT).

Configuración

El servidor requiere un ID de aplicación de OpenGraph.io para funcionar correctamente. Puedes proporcionarlo de varias maneras:

1. Usando variables de entorno: Establece OPENGRAPH_APP_ID o APP_ID en un archivo .env o como variable de entorno

2. Usando argumentos de línea de comandos con transporte stdio: --app-id YOUR_APP_ID

3. Al usar transporte SSE: Inclúyelo en la URL como un parámetro de consulta (?app_id=YOUR_APP_ID)

Ejemplo de archivo .env:

OPENGRAPH_APP_ID=your_app_id_here
# or
APP_ID=your_app_id_here

Opciones de transporte

Transporte Stdio (Recomendado)

Para el uso de línea de comandos y la instalación global de npm, el servidor se puede ejecutar con transporte stdio:

npm run start:stdio

Puedes pasar la clave de API de OpenGraph directamente a través del argumento de línea de comandos:

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

Cuando se instala globalmente:

opengraph-io-mcp --app-id YOUR_APP_ID

Este modo permite que el servidor sea invocado directamente por otras aplicaciones que utilizan MCP.

Transporte HTTP/SSE

Este método ejecuta un servidor web al que se puede acceder a través de HTTP y utiliza SSE para la transmisión:

npm start

Solución de problemas

• Si las herramientas no aparecen, verifica que el servidor esté ejecutándose y que la URL esté configurada correctamente en Cursor

• Revisa los registros del servidor para detectar problemas de conexión o autorización

• Verifica que se haya dado instrucciones a Claude para usar las herramientas específicas por su nombre