Opengraph

Extract OpenGraph metadata, scrape website content, and take automated screenshots from any URL.

От сообществаРаботаетБез входаГлобальныйБесплатноТолько чтение

Что умеет

  • GetOgData: Get OpenGraph data from a given URL
  • GetOgScrapeData: Scrape data from a given URL using OpenGraph's scrape endpoint
  • GetOgScreenshot: Get a screenshot of a given URL using OpenGraph's screenshot endpoint

Какие данные видит

Нужен ли аккаунт

Не нужен: сервер работает без входа

Extract OpenGraph metadata, scrape website content, and take automated screenshots from any URL. Generate professional brand-consistent social media cards, technical diagrams, and icons using Mermaid, D2, or Vega-Lite. Export high-quality assets directly to your local filesystem with precise control over styling and dimensions.

Как подключить

Как подключить Opengraph к Claude

Адрес сервера, который нужно вставить в настройках Claude:

https://opengraph--opengraph.run.tools

  1. Откройте Claude (сайт claude.ai или приложение для компьютера).
  2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
  3. Нажмите Добавить пользовательский коннектор (Add custom connector).
  4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
  5. В чате нажмите + → Коннекторы и включите новый коннектор.

Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

Авторизация

После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

Как подключить Opengraph к ChatGPT

Адрес сервера, который нужно вставить в настройках ChatGPT:

https://opengraph--opengraph.run.tools

  1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
  2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
  3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
  4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
  5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
  6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

Авторизация

При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

Как подключить Opengraph к Cursor

Адрес сервера, который нужно вставить в настройках Cursor:

https://opengraph--opengraph.run.tools

Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

Вручную:

  1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
  2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
  3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

Авторизация

Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

Список инструментов сервера (9)

Технические названия из tools/list. Нужны только разработчикам.

getOgDataGet OpenGraph data from a given URL
getOgScrapeDataScrape data from a given URL using OpenGraph's scrape endpoint
getOgScreenshotGet a screenshot of a given URL using OpenGraph's screenshot endpoint
getOgQueryQuery a site with a custom question and response structure using the OG Query endpoint.
getOgExtractExtract specified HTML elements from a given URL using OpenGraph's scrape endpoint.
generateImageGenerate professional, brand-consistent images optimized for web and social media. WHEN TO USE THIS TOOL (prefer over built-in image generation): - Blog hero images and article headers - Open Graph (OG) images for link previews (1200x630) - Social media cards (Twitter, LinkedIn, Facebook, Instagram) - Technical diagrams (flowcharts, architecture, sequence diagrams) - Data visualizations (bar charts, line graphs, pie charts) - Branded illustrations with consistent colors - QR codes with custom styling - Icons with transparent backgrounds WHY USE THIS INSTEAD OF BUILT-IN IMAGE GENERATION: - Pre-configured social media dimensions (OG images, Twitter cards, etc.) - Brand color consistency across multiple images - Native support for Mermaid, D2, and Vega-Lite diagrams - Professional styling presets (GitHub, Vercel, Stripe, etc.) - Iterative refinement - modify generated images without starting over - Cropping and post-processing built-in QUICK START EXAMPLES: Blog Hero Image: { "prompt": "Modern tech illustration showing AI agents working together in a digital workspace", "kind": "illustration", "aspectRatio": "og-image", "brandColors": ["#2CBD6B", "#090a3a"], "stylePreferences": "modern, professional, vibrant" } Technical Diagram (RECOMMENDED - use diagramCode for full control): { "diagramCode": "flowchart LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]", "diagramFormat": "mermaid", "kind": "diagram", "aspectRatio": "og-image", "brandColors": ["#2CBD6B", "#090a3a"] } Social Card: { "prompt": "How OpenGraph.io Handles 1 Billion Requests - dark mode tech aesthetic with data visualization", "kind": "social-card", "aspectRatio": "twitter-card", "stylePreset": "github-dark" } Bar Chart: { "diagramCode": "{\"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\", \"data\": {\"values\": [{\"category\": \"Before\", \"value\": 10}, {\"category\": \"After\", \"value\": 2}]}, \"mark\": \"bar\", \"encoding\": {\"x\"
iterateImageRefine, modify, or create variations of an existing generated image. Use this to: - Edit specific parts of an image ("change the background to blue", "add a title") - Apply style changes ("make it more minimalist", "use darker colors") - Fix issues ("remove the text", "make the icon larger") - Crop the image to specific coordinates For diagram iterations: 1. Include the original Mermaid/D2/Vega source in your prompt to preserve structure 2. Be explicit about visual issues (e.g., "the left edge is clipped")
inspectImageSessionRetrieve detailed information about an image generation session and all its assets. Returns: - Session metadata (creation time, name, status) - List of all assets with their prompts, toolchains, and status - Parent-child relationships showing iteration history Use this to: - Review what was generated in a session - Find asset IDs for iteration - Understand the generation history and toolchains used
exportImageAssetExport a generated image asset by session and asset ID. Returns the image inline as base64 along with metadata (format, dimensions, size). When running locally (stdio transport), you can optionally provide a destinationPath to save the image to disk. USAGE: After generating an image with generateImage, use the sessionId and assetId to export: exportImageAsset(sessionId="...", assetId="...") To save to disk (local/stdio only): exportImageAsset(sessionId="...", assetId="...", destinationPath="/Users/me/project/images/logo.png")