MCP server for social cards and OG images

Add it to your client

The server speaks MCP over HTTP at https://betterimage.io/mcp. Add it with no key to use the free tools. For your own templates there are two doors: https://betterimage.io/mcp/account, which asks you to sign in to betterimage.io in the browser once (Claude.ai, Claude Desktop, Claude Code, Cursor, VS Code and Windsurf all support it), or an API key from Account settings > API sent as an Authorization: Bearer header, for scripts and CI. Each client below shows both.

Claude Code

# free tools, no account:
claude mcp add --transport http betterimage https://betterimage.io/mcp

# your own templates: sign in once (run /mcp in a session, pick betterimage, Authenticate)
claude mcp add --scope user --transport http betterimage https://betterimage.io/mcp/account

# or, for scripts and CI, an API key instead of signing in:
claude mcp add --scope user --transport http betterimage https://betterimage.io/mcp \
  --header "Authorization: Bearer bi_a1b2c3d4e5_XxYyZz..."

Cursor

Install in Cursor with one click for the free tools. For your own templates either use the /mcp/account URL and sign in when Cursor asks, or add this to ~/.cursor/mcp.json with a key (the global file; a project-level .cursor/mcp.json ends up in the repository together with the key):

{
  "mcpServers": {
    "betterimage": {
      "url": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer bi_a1b2c3d4e5_XxYyZz..." }
    }
  }
}

VS Code (GitHub Copilot)

Install in VS Code with one click for the free tools. For your own templates either use the /mcp/account URL and sign in when VS Code asks, or add this to .vscode/mcp.json with a key. VS Code asks for the key once and keeps it in its secret store, so the file itself holds no secret:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "betterimage-key",
      "description": "betterimage.io API key (leave empty for the free tools)",
      "password": true
    }
  ],
  "servers": {
    "betterimage": {
      "type": "http",
      "url": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer ${input:betterimage-key}" }
    }
  }
}

Claude.ai and Claude Desktop

On a paid Claude plan, open Settings > Connectors, choose "Add custom connector", and paste the account URL. Claude opens a betterimage.io sign-in, you click Allow, and your saved templates, clean renders and signed og:image URLs are available in the chat. No key to copy anywhere.

Settings > Connectors > Add custom connector
Name: betterimage
URL:  https://betterimage.io/mcp/account

Prefer no account at all? Add https://betterimage.io/mcp instead: the design browser, previews, the link checker and the meta tag generator work without signing in. The account URL also works in Claude Code, Cursor and VS Code, which run the same sign-in in your browser. You can disconnect an app any time under Account settings > API.

Windsurf and other clients

Any client that supports remote MCP servers over Streamable HTTP works. Windsurf's mcp_config.json takes the server as serverUrl:

{
  "mcpServers": {
    "betterimage": {
      "serverUrl": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer bi_a1b2c3d4e5_XxYyZz..." }
    }
  }
}

The tools

10 tools, listed here straight from the server. 5 work without a key; the rest need one. Your assistant reads the same descriptions and decides when to call what, so you rarely name a tool yourself.

Automating og:images with an agent

The tools are built to chain, so an agent can take a site from "no preview images" to "one branded card per page" in a single task. This is the sequence it will follow; each step is one tool call, and the whole thing works from Claude Code, Cursor, or a coding agent running in CI.

1. Pick a design once. list_presets with a category such as blog-post, then preview_card with a real headline from the site so you can approve the look. Say "darker", "the serif one", "with our domain in the corner" and it renders again.
2. Save it as your template. save_template copies the preset into your account with your text as defaults and returns a slug. From here on the design is locked; only text changes.
3. Give every page its URL. For each page the agent calls og_image_url with that page's title and drops the result into the head, or into generateMetadata, a Hugo partial, a CMS hook. No files, no storage, nothing to run: the image renders on the first crawl and is cached at the edge for a day.
4. Or host the files yourself. render_card returns the PNG; the agent writes it next to the page and points og:image at your own URL. Predictable quota (one render per page, ever) and the same design.
5. Verify the live page. check_link_preview on a published URL confirms what X, LinkedIn, Slack and Discord will actually show, and get_usage keeps the batch inside the monthly quota.

The signed URLs are the same ones the REST API documents, so what the agent wires in today keeps working with no MCP client in the loop tomorrow. Ready-made signing code for Node, Python, Ruby, Go and PHP is on that page.

Things to ask

• "Make me a social card for a post called Ten lessons from our migration." The assistant browses the designs, picks one, and shows a preview with your headline. Ask for "something darker" or "the serif one" and it renders again.
• "Why does my link look bad on LinkedIn?" It fetches the page like the crawlers do, lists what is missing or wrong, then writes the corrected meta tags and a card to go with them. The same checks as the link preview checker and the meta tag generator, without leaving the chat.
• "Add an og:image to every post on my Next.js blog." With an API key: it saves a design as your template, then builds a signed image URL per page and wires it into generateMetadata. No image files to host.
• "Render our release card for v2.4 at YouTube and square sizes." Two renders from one template, returned as images you can save.

Free, or with a key

• Without a key: browse the designs, preview any of them with your text, check link previews, and generate meta tags. Previews carry the small "Made with betterimage.io" mark, the same as the free editor. A one-off clean download of any preview is $4.99 in the editor.
• Signed in, or a free key: your saved templates, signed URLs and usage, with the same watermark and 25 images a month to build with. Signing in (through the account URL) creates a key named after the app on your account, so both routes share one allowance.
• Paid plan (from $9/month): clean images from your templates, 500 a month, shared with the REST API and clean downloads in the editor. Every render and every uncached fetch of a signed URL counts as one. Plans and limits are on the API page.

Questions