OpenGraph MCP Server (og-mcp)

og‑mcp — это сервер протокола Model‑Context‑Protocol (MCP), который делает все конечные точки API OpenGraph.io ( https://opengraph.io ) доступными для ИИ-агентов (например, 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

Добавьте в конфигурацию MCP вашего JetBrains AI Assistant:

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

Zed

Расположение конфигурации: ~/.config/zed/settings.json

Примечание: Zed использует context_servers вместо mcpServers:

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

Доступные инструменты

Инструменты данных OpenGraph.io

Инструменты генерации изображений

Генерация изображений

Сервер og-mcp включает мощные возможности генерации изображений на базе ИИ, идеально подходящие для создания карточек для социальных сетей, архитектурных диаграмм, иконок и многого другого.

Generate Image

Создавайте изображения из текстовых запросов или кода диаграмм.

Поддерживаемые типы изображений (kind):

• illustration - ИИ-изображения общего назначения

• 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

Уточнение или изменение существующего сгенерированного изображения.

Варианты использования:

• Редактирование отдельных частей: "измени фон на синий"

• Применение изменений стиля: "сделай его более минималистичным"

• Исправление проблем: "удали текст", "сделай иконку больше"

• Обрезка по заданным координатам

Пример:

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

Просмотр деталей сессии и поиск ID активов для итерации.

Возвращает:

• Метаданные сессии (время создания, имя, статус)

• Список всех активов с запросами, цепочками инструментов и статусом

• Иерархические связи, показывающие историю итераций

Пример:

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

Export Image Asset

Экспорт сгенерированного актива изображения по сессии и ID актива. Возвращает изображение в виде base64 вместе с метаданными (формат, размеры, размер файла).

При локальном запуске (транспорт stdio) можно опционально указать destinationPath для сохранения изображения на диск. При использовании размещенного/HTTP-транспорта путь игнорируется, и изображение возвращается только в виде inline-данных.

Примеры:

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

Как это работает

Диаграмма создана с помощью инструментов генерации изображений og-mcp

Сервер og-mcp выступает в качестве моста между ИИ-клиентами (такими как Claude или другие LLM) и API OpenGraph.io:

1. ИИ-клиент делает вызов инструмента к одной из доступных функций MCP

2. Сервер og-mcp получает запрос и форматирует его для API OpenGraph.io

3. OpenGraph.io обрабатывает запрос и возвращает данные

4. og-mcp преобразует ответ в формат, подходящий для ИИ-клиента

5. ИИ-клиент получает структурированные данные, готовые к использованию

Эта абстракция предотвращает прямое раскрытие ключей API для ИИ, предоставляя при этом полный доступ к возможностям OpenGraph.io.

Установка и запуск

1. Клонируйте этот репозиторий

2. Установите зависимости:

   npm install

3. Соберите TypeScript-код:

   npm run build

4. Запустите сервер:

   npm start

Сервер будет работать на порту 3010 по умолчанию (настраивается через переменную окружения PORT).

Конфигурация

Для корректной работы серверу требуется App ID OpenGraph.io. Вы можете предоставить его несколькими способами:

1. Использование переменных окружения: Установите OPENGRAPH_APP_ID или APP_ID в файле .env или в качестве переменной окружения

2. Использование аргументов командной строки при транспорте stdio: --app-id YOUR_APP_ID

3. При использовании транспорта SSE: Включите его в URL в качестве параметра запроса (?app_id=YOUR_APP_ID)

Пример файла .env:

OPENGRAPH_APP_ID=your_app_id_here
# or
APP_ID=your_app_id_here

Варианты транспорта

Транспорт Stdio (рекомендуется)

Для использования в командной строке и глобальной установки npm сервер можно запустить с транспортом stdio:

npm run start:stdio

Вы можете передать ключ API OpenGraph напрямую через аргумент командной строки:

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

При глобальной установке:

opengraph-io-mcp --app-id YOUR_APP_ID

Этот режим позволяет вызывать сервер напрямую другими приложениями, использующими MCP.

Транспорт HTTP/SSE

Этот метод запускает веб-сервер, к которому можно обращаться по HTTP, и использует SSE для потоковой передачи:

npm start

Устранение неполадок

• Если инструменты не отображаются, убедитесь, что сервер запущен и URL правильно настроен в Cursor

• Проверьте логи сервера на наличие проблем с подключением или авторизацией

• Убедитесь, что Claude получил инструкции использовать конкретные инструменты по их именам