# Generating OG images with AI assistants via MCP

> Connect an AI assistant to an image API over the Model Context Protocol: render OG images from chat, or let a coding agent wire og:image into your site.

Published 2026-10-24 · https://shareglint.com/en/guides/og-images-with-ai-assistants-mcp

An AI assistant can make Open Graph images for you if it can call an image API — and the **Model Context Protocol** (MCP) is the standard way to give it that ability. Once an MCP server is connected, you can ask "make an OG image for this post" in chat and get back a finished 1200×630 PNG, or ask a coding agent to "add per-page og:image tags to this site" and it will write the code using the same API.

This guide explains what MCP adds over asking an image model to draw, shows the setup for the common clients, and the prompts that work.

## Why not just ask the model to draw it?

Image-generation models are good at illustrations and bad at the things a social card needs: the exact title spelled correctly, your brand colours, the same layout on every post, text that stays inside 1200×630. An OG image is closer to a document than to a picture.

With MCP the assistant does not draw. It calls a tool that fills a **template** — HTML and CSS rendered in a real browser — with fields it extracted from your content. The model's job is the part it is good at: reading a blog post and picking the title, the author, a short eyebrow label. The layout is fixed and the text is exact.

## What MCP is, in one paragraph

[MCP](https://modelcontextprotocol.io/specification/latest) is an open protocol for connecting AI applications to external tools and data. A server publishes a list of tools with JSON schemas; the client (Claude Code, Cursor, an API call) shows them to the model, which decides when to call them. Remote servers use the **Streamable HTTP** transport, so a hosted API can be an MCP server at a single URL. Authentication is whatever the server asks for — commonly an `Authorization` header or OAuth.

## What the Shareglint server exposes

Shareglint's MCP endpoint is `https://shareglint.com/mcp`, authenticated with the same `Authorization: Bearer sk_live_…` key as the HTTP API — the same account, quota and limits. Its tools: `render_image`, `get_image`, `list_templates`, `get_template`, `create_signed_url`, `get_usage`, `generate_template`, `take_screenshot`, `auto_og_url`.

The ones you will use most:

- **`list_templates`** — the built-in templates (21 of them) and your own, with their fields.
- **`render_image`** — renders a template with field values and returns a public image URL. Counts as one render; the same fields again cost nothing.
- **`create_signed_url`** — builds a URL for `<meta property="og:image">` that renders on first request. No quota is used until someone fetches it.
- **`generate_template`** (paid plans) — designs a new template from a text description or a screenshot, with a free preview.

## Connect your client

**Claude Code** — one command (see [Claude Code's MCP docs](https://code.claude.com/docs/en/mcp)):

```bash
claude mcp add --transport http shareglint https://shareglint.com/mcp \
  --header "Authorization: Bearer $OG_API_KEY"
```

**Cursor** (`~/.cursor/mcp.json`, or `.cursor/mcp.json` in a project; [Cursor docs](https://cursor.com/docs/context/mcp)) — the key comes from an environment variable, not the file:

```json
{
  "mcpServers": {
    "shareglint": {
      "url": "https://shareglint.com/mcp",
      "headers": { "Authorization": "Bearer ${env:OG_API_KEY}" }
    }
  }
}
```

**VS Code** (`.vscode/mcp.json`; [VS Code docs](https://code.visualstudio.com/docs/copilot/customization/mcp-servers)), with the key asked for once and stored by VS Code rather than written in the file:

```json
{
  "inputs": [
    { "type": "promptString", "id": "og-key", "description": "Shareglint API key", "password": true }
  ],
  "servers": {
    "shareglint": {
      "type": "http",
      "url": "https://shareglint.com/mcp",
      "headers": { "Authorization": "Bearer ${input:og-key}" }
    }
  }
}
```

**From code** — both major model APIs can call a remote MCP server on your behalf:

```text
// Claude API (MCP connector)
"mcp_servers": [{ "type": "url", "url": "https://shareglint.com/mcp", "name": "images", "authorization_token": "sk_live_…" }]

// OpenAI Responses API
"tools": [{ "type": "mcp", "server_label": "images", "server_url": "https://shareglint.com/mcp",
            "headers": { "Authorization": "Bearer sk_live_…" } }]
```

Chat apps are the weak spot. ChatGPT's custom MCP servers (Business and Enterprise/Edu workspaces) authenticate with OAuth or no auth, with no API-key option documented ([OpenAI](https://help.openai.com/en/articles/12584461-connecting-custom-mcp-servers-in-chatgpt)); Claude.ai's custom connectors offer request headers only as a beta for a limited set of organizations ([Anthropic](https://claude.com/docs/connectors/custom/remote-mcp)). Until a server supports OAuth, use one of the clients above.

## Prompts that work

**One image from content you paste:**

> Make an Open Graph image for this blog post with the blog-og template. Use the post title as the title, "Engineering" as the eyebrow, and yourblog.com as the site. Give me the URL.

The assistant calls `list_templates` (or skips it if it already knows `blog-og`), then `render_image`, and replies with the PNG URL. Ask for `format: "jpeg"` if the image is going somewhere that prefers smaller files.

**Wire it into a codebase** — this is where a coding agent earns its keep:

> This is a Next.js app router project. Add per-page og:image tags to the blog using signed image URLs with the blog-og template. Put the signing code in lib/og.ts, read OG_ACCOUNT_ID and OG_SIGNING_SECRET from the environment, and do not call the API at request time.

The agent can call `create_signed_url` once to see a correct example, write a signing helper, and add it to `generateMetadata`. Because it uses signed URLs, the API key stays in the agent's configuration — your deployed site only needs the signing secret. Ask it to compare its helper's output with a URL from `create_signed_url` for the same fields; if the two match, the signing is right.

**A new template from a design:**

> Here is a screenshot of our current share card. Create a template that looks like it, with fields title, category and date, and show me the preview.

`generate_template` returns HTML, CSS, the field list and a preview image without saving anything; ask it to save once you are happy, then render with the new slug.

**Check your budget before a batch:**

> How many renders do I have left this month? Then render cards for these 40 titles.

`get_usage` answers the first part. Renders beyond the quota fail with a clear `quota_exceeded` error rather than an unexpected bill.

## Limits worth knowing

- The assistant is only as careful as your prompt. Name the template and the fields; "make a nice image" invites guessing.
- Tools act on your account. A key connected to an agent can use your monthly quota — give agents a separate key you can revoke on its own.
- Images rendered on the Free plan carry a small badge, the same as through the API.
- MCP clients change quickly; if a client's config format differs from the examples above, its own documentation wins. The server side — URL, header, tool names — does not change between clients.

No MCP support in your tool at all? Point the assistant at [`/llms-full.txt`](https://shareglint.com/llms-full.txt) or the [OpenAPI document](https://shareglint.com/openapi.json): any model that can write an HTTP request can use the API from those.

## FAQ

### What is an MCP server?

A Model Context Protocol server exposes tools that an AI assistant can call, such as render_image or list_templates. The assistant decides when to call them; the server does the work with your account and returns the result. Remote servers are reached over HTTP.

### Can ChatGPT or Claude generate an og:image directly?

Image models can draw a picture, but they do not produce a consistent 1200×630 card with your exact title and brand every time. Connected to an image API over MCP, the assistant fills a fixed template instead, so every card has the same layout.

### Is it safe to give an AI assistant my API key?

Treat it like giving the key to any script: keep it in the client's configuration or an environment variable, not in a repository. The key can render images and read templates on your account within your plan's quota; a coding agent that writes code should use a signed URL helper, so the key never ends up in your pages.

### Which AI tools can connect to a remote MCP server with an API key?

Claude Code, Cursor and VS Code take a server URL with an Authorization header, and the Claude API and OpenAI Responses API pass one per request. ChatGPT's custom connectors document only OAuth or no auth, and Claude.ai's header support is a limited beta, so chat apps generally cannot send an API key yet.