# Use VectorFast Render in Claude

> Add the VectorFast Render MCP server to Claude Code, Claude Desktop, or Claude on the web, then render on-brand launch images, changelog cards, and quotes from a prompt.

Canonical URL: https://vectorfast.ai/render/agents/claude
Markdown URL: https://vectorfast.ai/render/agents/claude.md
Last modified: 2026-10-30

**Status:** Claude Code connects today with an API key header. In Claude on the web and in Claude Desktop, a custom connector can send the key as a request header, which Anthropic currently lists as a beta available to a limited set of organizations. VectorFast Render is not listed in any connector directory yet; you add it by URL as a custom server.

VectorFast Render is in early access: billing is not connected yet, and API keys are issued to waitlist members as access opens.

## Claude Code
Any Claude Code install. Tested against a local VectorFast Render build on 2026-10-30.

1. **Add the server.** Run this in your project. Keep the key in an environment variable instead of pasting it into the command history.

   ```bash
   claude mcp add --transport http vectorfast-render https://vectorfast.ai/mcp \
  --header "Authorization: Bearer $VECTORFAST_API_KEY"
   ```

2. **Or share it with your team.** Project scope writes `.mcp.json` at the repository root. Claude Code expands `${VECTORFAST_API_KEY}` from each developer's environment and asks before using project servers.

   ```json
   {
  "mcpServers": {
    "vectorfast-render": {
      "type": "http",
      "url": "https://vectorfast.ai/mcp",
      "headers": {
        "Authorization": "Bearer ${VECTORFAST_API_KEY}"
      }
    }
  }
}
   ```

3. **Check the connection.** Run `claude mcp list` or `/mcp` inside Claude Code; vectorfast-render should show as connected with seven tools.

## Claude on the web and Claude Desktop (Free, Pro, Max)
Custom connectors work on Free, Pro, Max, Team and Enterprise plans; the Free plan allows one. The Request headers section only appears for organizations in Anthropic's beta.

1. **Open connectors.** Go to Customize > Connectors and click Add custom connector.
2. **Enter the server URL.** Name it "VectorFast Render" and enter https://vectorfast.ai/mcp.
3. **Choose No sign-in and add the key.** Under Authentication choose No sign-in. Under Request headers pick authorization and enter the value `Bearer vf_live_…`, including the word Bearer and the space. Claude sends the value exactly as entered.
4. **Turn it on in a chat.** Click Add, then in a conversation open + > Connectors and switch VectorFast Render on.

## Claude Team and Enterprise
An Owner (or, on Enterprise, a member whose role can manage libraries) adds the connector for the organization.

1. **Add it for the organization.** Go to Organization settings > Connectors, select Add, then Custom, then Web, and enter https://vectorfast.ai/mcp.
2. **Mind the shared key.** A request-header credential is shared by everyone who uses the connector. Use a dedicated key you can revoke, or wait for OAuth so each person signs in with their own account.

## Tools
Tool descriptions mention credits because billing is part of the design; in early access billing is not connected, so no render spends credits yet.

| Tool | Title | Access | Description |
| --- | --- | --- | --- |
| `list_templates` | List templates | read-only | List the official VectorFast Render templates (launch post, achievement card, invite card, stat card, changelog, quote card, social square, blog/OG cover) and, if any, your custom templates. Returns each template's id, name, summary, supported sizes and a link to its preview page. Use it to pick a template before calling get_template or render. |
| `get_template` | Get template details | read-only | Get one template's parameter schema (JSON Schema), default and supported sizes, preview image and an example params object. Use it after list_templates to learn which params a template accepts before calling preview_render or render. |
| `list_brand_kits` | List brand kits | read-only | List the brand kits in your VectorFast account with their id, name, version and whether a logo is set. Use it to find the brand_kit id to pass to render. |
| `get_brand_kit` | Get brand kit | read-only | Get a brand kit's colors, fonts, logo URLs (SVG and PNG), default radius and spacing. Omit the id to get the default brand kit. Read-only; edit brand kits at vectorfast.ai. |
| `preview_render` | Preview a render (watermarked) | read-only | Render a watermarked preview of a template with the given params and brand kit. Free and does not spend credits. Returns a preview image URL. Use it to check layout and copy before calling render. |
| `render` | Render an image | renders | Render a template with the given params and brand kit into a PNG, JPEG or WebP image and return its URL. Spends 1 credit per new render (large sizes may cost more); repeating the same template, params and brand kit returns the cached image and spends nothing. Use preview_render first if you want to check the result without spending credits. |
| `get_usage` | Get usage and remaining credits | read-only | Get your current plan, credits used and remaining in this billing period, credit-pack balance and when the period resets. Use it when a render fails for lack of credits or before a large batch. |

## Example prompts
1. We just shipped scheduled renders. Make a launch image for LinkedIn and X: headline "Scheduled renders are live", one line saying images now render from CI on every release, and a "New" badge.
   - Template: https://vectorfast.ai/render/templates/launch-post
   - Output: ![Launch post rendered from the example prompt at 1200×630 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/launch-post.png?badge=New&brand=default&h=630&subtitle=On-brand%20images%20now%20render%20from%20CI%20on%20every%20release.&title=Scheduled%20renders%20are%20live&w=1200&sig=aPq3w95rGLohUcXaerT75W4XE7TpXUm5ZrDB2AQjLoI)
2. Make a changelog card for our v2.3 release today, tagged "Release", with three highlights: brand kits with versioning, logo vectorization on upload, and 40% faster cold renders.
   - Template: https://vectorfast.ai/render/templates/changelog
   - Output: ![Changelog rendered from the example prompt at 1200×630 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/changelog.png?brand=default&date=Oct%2030%2C%202026&h=630&items=%5B%22Brand%20kits%20with%20versioning%22%2C%22Logo%20vectorization%20on%20upload%22%2C%2240%25%20faster%20cold%20renders%22%5D&tag=Release&version=v2.3&w=1200&sig=hJxkylVnDBr2e_td928-urD3fSt9FUl_UVovZywQhgw)
3. Turn this testimonial into a square quote card for LinkedIn: "We stopped opening Figma for release images. Claude makes them from our changelog." — Priya Nair, Head of Growth at Northwind.
   - Template: https://vectorfast.ai/render/templates/quote-card
   - Output: ![Quote card rendered from the example prompt at 1080×1080 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/quote-card.png?author=Priya%20Nair&brand=default&company=Northwind&h=1080&quote=We%20stopped%20opening%20Figma%20for%20release%20images.%20Claude%20makes%20them%20from%20our%20changelog.&role=Head%20of%20Growth&w=1080&sig=86lhrEjp42kxuvv9XJNWpWggnClVWI-4eX-jBEZDUxQ)

## Good to know
- VectorFast Render authenticates MCP calls with an API key sent as `Authorization: Bearer vf_live_…`. OAuth sign-in is planned; once it ships, clients that support OAuth will connect with a sign-in flow instead of a pasted key.
- You cannot change a Claude connector's authentication after adding it; to rotate a key, remove the connector and add it again.
- The render tool returns a signed image URL and, for images up to 1200×630, the image inline so Claude can show it in the chat.

## Sources
- Claude docs: Add a connector that isn't in the directory: https://claude.com/docs/connectors/custom/add-unlisted (accessed 2026-10-30)
- Claude Help Center: custom connectors using remote MCP: https://support.claude.com/en/articles/11175166-getting-started-with-custom-connectors-using-remote-mcp (accessed 2026-10-30)
- Claude Code docs: Connect Claude Code to tools via MCP: https://code.claude.com/docs/en/mcp (accessed 2026-10-30)