VS Code MCP: OG images and screenshots in GitHub Copilot agent mode

VS Code's Copilot agent can render Open Graph images, take screenshots of public pages and add og:image tags to a project once Shareglint is in .vscode/mcp.json: a server of "type": "http" with "url": "https://shareglint.com/mcp" and an Authorization: Bearer ${input:og-key} header, where the key is a password input VS Code asks for once and stores securely. 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) use your account's quota — 100 renders a month on the Free plan.

The overview guide explains MCP and the other clients; this page is the VS Code setup and two worked examples.

What Copilot can do with the tools

• Social preview for a repository. Fill the github-repo template from package.json and the README with render_image, download the file and tell you where to upload it.
• Per-page images for a docs site. Add a signed og:image URL built from the docs-page template to each page's head, using create_signed_url as the reference.
• Screenshots for documentation. take_screenshot of a deployed page, or of one element with selector, then save it into the repo with a terminal command.
• Check fields before you code. list_templates and get_template show every template's fields and a preview, free.
• Bulk. create_batch with rows from a CSV in your repo, then get_batch for the ZIP.

Set it up

VS Code's MCP servers guide and the configuration reference describe the format: a top-level servers object, an optional inputs array, and ${input:id} placeholders. Create .vscode/mcp.json:

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

Note the differences from Cursor and Claude Code: the key is servers, not mcpServers, and type: "http" is spelled out. When the server starts for the first time, VS Code prompts for og-key and keeps the value in its secret storage, so the file contains no key and can be committed for the whole team. Each developer enters their own key once.

Prefer it for every workspace? Run MCP: Open User Configuration from the Command Palette and put the same JSON in your user configuration. MCP: Add Server walks through the same fields in a form.

Create the key in the Shareglint dashboard — preferably a separate key for the editor, so you can revoke it without touching production.

When the server starts, VS Code may ask whether you trust it; accept for Shareglint. MCP: List Servers shows its state and lets you start, stop, restart it or show its output. MCP: Reset Trust clears the decision if you declined by mistake.

Using the tools in Copilot Chat

Open Copilot Chat and switch to agent mode. The Shareglint tools appear in the tools picker, where you can turn individual ones off. To point Copilot at one tool, reference it with #, for example #render_image. Tools that spend quota — render_image, take_screenshot, create_batch, generate_template — are worth leaving on manual confirmation; the lookups (list_templates, get_usage) are harmless to allow.

Worked example: a GitHub social preview for this repository

GitHub shows a repository's social preview when its link is shared. Its documentation asks for a PNG, JPG or GIF under 1 MB, at least 640×320 and ideally 1280×640, uploaded under Settings → Social preview → Edit → Upload an image.

In agent mode:

Read package.json and README.md. Use #get_template to see the fields of github-repo, then #render_image with template github-repo: repo and owner from the repository URL, description from package.json, language "TypeScript", accent "#22c55e". Use format jpeg, quality 90 and scale 1. Then download the image URL with curl to .github/social-preview.jpg.

What happens:

1. get_template returns the fields: repo, owner, description, stars, forks, language, site, avatar, accent, theme.
2. Copilot asks to run render_image; confirm. The result is a 1200×630 JPEG, above GitHub's 640×320 minimum. scale: 1 keeps it at 1200×630 pixels instead of the default 2400×1260, which keeps the file comfortably under 1 MB.
3. Copilot runs curl -o .github/social-preview.jpg <url> in the terminal (another confirmation).
4. You upload the file in the repository settings; GitHub does not take it from the repo automatically.

Cost: one render. Running the prompt again with unchanged fields returns the same image and costs nothing.

Worked example: og:image for a docs site

For a docs site generated from Markdown:

Use #create_signed_url once with template docs-page and fields title "Getting started", section "Guides", product "Northwind Docs", site "docs.northwind.dev". Then write a helper that builds the same signed URL from DOCS_OG_ACCOUNT_ID and DOCS_OG_SIGNING_SECRET at build time, and add og:image and twitter:card to the page template using each page's title, description and section. Add a test comparing the helper with the URL from the tool. Never put the API key in the site.

create_signed_url is read-only and costs nothing; each page's image is rendered the first time a crawler fetches it and cached after that. The signing algorithm is in the docs. If previews still do not appear after deploying, the og:image troubleshooting guide covers caches and crawler rules.

Troubleshooting

No Shareglint tools in the tools picker. Make sure Chat is in agent mode, then run MCP: List Servers and check that the server is running. Show Output there prints the error.

401 … "Missing API key." The input was never filled — for instance the prompt was dismissed. Restart the server from MCP: List Servers to be asked again.

401 … "Invalid API key." and VS Code never asks again. It stored the first value you typed, a typo or a key revoked since. The simplest reset is to rename the input — change og-key to og-key-2 in both places — so VS Code treats it as a new input and prompts for it.

Test the key outside VS Code:

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

You used mcpServers. That is Cursor's and Claude Code's key; VS Code reads servers. Copying a config between editors is the usual cause of a server that never appears.

take_screenshot fails on a local URL. The screenshot browser only reaches public http(s) addresses — use a deployed preview.

quota_exceeded. get_usage shows used and remaining renders. Calls past the quota fail instead of being billed; see pricing.