Claude Code MCP: add og:image to a blog and take screenshots from the terminal

Claude Code can render Open Graph images, take screenshots of web pages and edit your site so every page gets an og:image once you add Shareglint as a remote MCP server with one command: claude mcp add --transport http shareglint https://shareglint.com/mcp --header "Authorization: Bearer $OG_API_KEY". The tools (render_image, get_image, list_templates, get_template, create_signed_url, get_usage, generate_template, take_screenshot, auto_og_url, create_batch, get_batch) act on your account and its quota — 100 renders a month on the Free plan.

The overview guide covers MCP in general and the other clients. This page is Claude Code only: scopes, keys, a worked example and the problems you are likely to hit.

What Claude Code can do with the tools

Claude Code reads and edits your repository and runs commands, so it can use a tool's result straight away:

• Add og:image to a site. It calls create_signed_url once to learn the URL format, writes a helper in your language and adds the tag to your layout.
• Backfill images for an archive. It reads your posts, builds rows and calls create_batch, then get_batch to collect each post's image URL and write it into front matter.
• Check a card while you work. "Render the card for this draft with blog-og" is one render_image call; open the URL it prints.
• Screenshots for docs. take_screenshot with selector for one element or device: "iphone-15" for a phone view, then curl the file into docs/img/.
• Watch the budget. get_usage before a big batch.

Add the server

Claude Code's MCP documentation describes claude mcp add for remote HTTP servers. Create a key in the Shareglint dashboard (a separate one for the agent, so you can revoke it alone), then:

export OG_API_KEY="sk_live_…"

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

Your shell expands $OG_API_KEY before Claude Code sees it, so the value is stored in Claude Code's config (~/.claude.json), outside the repository. That is fine for local and user scope. Check the result with claude mcp get shareglint, list all servers with claude mcp list, and remove it with claude mcp remove shareglint. Inside a session, /mcp shows whether it is connected.

Pick a scope

For a team, use project scope with a variable, not the value. Write .mcp.json by hand so the shell does not expand anything:

{
  "mcpServers": {
    "shareglint": {
      "type": "http",
      "url": "https://shareglint.com/mcp",
      "headers": { "Authorization": "Bearer ${OG_API_KEY}" }
    }
  }
}

Claude Code expands ${OG_API_KEY} (and ${VAR:-default}) from each person's environment when it connects. Two details from its docs: a project server asks for approval the first time someone runs claude in the repository, and a few credential variable names such as ANTHROPIC_API_KEY deliberately read as empty in .mcp.json — so give the key its own name, like OG_API_KEY.

OAuth instead of a key

Claude Code also signs in to remote servers with OAuth. Add the server without --header, start claude, run /mcp, pick shareglint and authenticate in the browser (or run claude mcp login shareglint). Shareglint supports dynamic client registration, so you do not need a client ID. You approve the connection on a Shareglint consent screen; it then appears under Connected apps in your account settings, where you can disconnect it. Use the key for CI and headless runs, where nobody is there to click through a browser.

Worked example: og:image for every post of an Astro blog

An Astro blog with 120 Markdown posts in src/content/blog/ and no social images. Two jobs: new posts get an image automatically, and old posts get one too.

Step 1 — a signed URL in the layout. In Claude Code:

Use the shareglint MCP tools. Call get_template for blog-og, then call create_signed_url once for the post "Hello world" with site "yourblog.com". Write src/lib/og.ts that builds the same signed URL with HMAC-SHA256 from OG_ACCOUNT_ID and OG_SIGNING_SECRET (import.meta.env, server only). Add og:image, og:image:width, og:image:height and twitter:card to src/layouts/BlogPost.astro using the post's title and author. Add a unit test that compares the helper's output with the URL you got from create_signed_url. Do not use the API key in the code.

Claude Code makes two tool calls — get_template and create_signed_url, both read-only and free — then writes the helper, the layout change and the test, and runs the test. The signing rules (sorted keys, RFC 3986 encoding, the first 32 hex characters of the HMAC) are in the docs; comparing against a URL from the server catches every encoding mistake. The static sites guide covers the Astro, Hugo and Jekyll versions of this helper.

A signed URL costs nothing until a crawler requests it, and each post's card is one render the first time. The site needs the account id and signing secret at build time — not the API key. Keep both without the PUBLIC_ prefix: Astro exposes only PUBLIC_ variables to client-side code, as its environment variables guide explains.

Step 2 — or files instead of URLs. If you would rather store image URLs in front matter (for an RSS feed or a CMS), ask for a batch:

Read every post in src/content/blog/ that has no image field. Call get_usage, then create_batch with template blog-og and one row per post: title, author, id = the file slug. Poll get_batch with limit 50 until it is done, and write each row's image URL into that post's front matter as image.

The batch is checked against your remaining quota before it starts (402 batch_quota_exceeded with needed and available if it does not fit), rows identical to images you already have are free, and failed rows are refunded. Batch size limits by plan: Free 50, Starter 500, Pro 1,000, Scale 2,000, Business 5,000.

Troubleshooting

/mcp shows the server as failed. Run claude mcp get shareglint and look at the stored header. A Bearer with nothing after it means $OG_API_KEY was empty when you ran claude mcp add; remove the server and add it again in a shell where the variable is set.

Test the key without Claude Code. This prints the tool list, or {"error":"unauthorized","message":"Invalid API key."}:

curl -s https://shareglint.com/mcp -H "Authorization: Bearer $OG_API_KEY" \
  -H "Content-Type: application/json" -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'

"Pending approval" on a project server. Run claude interactively in the repository once and approve it. claude mcp reset-project-choices clears earlier choices.

Large get_batch output. Claude Code warns when one tool result passes 10,000 tokens and cuts it at 25,000 by default (MAX_MCP_OUTPUT_TOKENS raises it). Ask for pages with limit and after instead of the whole batch at once.

A render comes back as queued. The server waits for each image only so long; a slow full-page screenshot or an animated file can return status: queued with an id instead of a URL. Nothing is lost — ask Claude to call get_image with that id. Claude Code's own tool timeout is not the limit here (it defaults to about 28 hours; a per-server timeout in .mcp.json lowers it).

take_screenshot refuses localhost. The screenshot browser reaches only public addresses. Screenshot a preview deployment instead.

quota_exceeded. The month's renders are used up; calls fail rather than bill overage. See pricing.