Connect Claude Code to Variant over MCP

#Quick setup

One command adds the MCP server. The first request opens a browser to sign in with OAuth.

claude mcp add --transport http variant
https://mcp.variant.art/mcp

#What Claude Code can do after setup

The MCP server exposes 20 tools across decks, slides, previews, assets, brand, and exports. The most common things to ask for:

• Create a new deck or duplicate an existing one
• Add slides, replace slides, or apply targeted element edits
• Render a slide preview as PNG so the agent can check layout
• Upload images and reference them with asset:// URLs
• Read the brand kit so generated drafts land on-brand
• Export the deck as HTML, PDF, PPTX, or JSON
• Restore a saved deck version when an edit goes the wrong way

#Make it available everywhere

Claude Code defaults to local project scope, which is fine when you only want the server in one repo. For everyday use, install at user scope so every project sees the same MCP server.

claude mcp add --scope user --transport http variant
https://mcp.variant.art/mcp

#OAuth vs bearer tokens

OAuth is the default and the simpler path. Tokens are scoped to your account, refresh automatically, and don't sit in a config file.

Bearer tokens make sense for headless setups — CI runners, scripts, or any environment that can't open a browser. Generate one in Settings → MCP, paste it into the Authorization header, and rotate it before it expires.

{
  "mcpServers": {
    "variant": {
      "transport": "http",
      "url": "https://mcp.variant.art/mcp",
      "headers": {
        "Authorization": "Bearer ss_..."
      }
    }
  }
}

#Verify the connection

Confirm the server is registered before a longer task. If it's there, ask Claude Code to list decks or create a blank one to exercise read and write.

claude mcp get variant

#How MCP changes the workflow

Without MCP, an agent can write slide HTML, but every change has to come back through chat. The agent can't open a deck, see what's there, render a preview, or save anything.

With MCP, the agent has direct tool access. It can read the current deck, write specific edits, render the result, and recover when a write fails because the deck moved underneath it. The slide source stays as HTML and CSS, so what the agent produces is the same thing you can edit by hand afterward.

#A good first prompt

Start with something small enough to inspect end-to-end. The first run should exercise create, edit, and preview.

Create a three-slide product update deck.
Use a clean dark theme, render a preview after each slide,
and show me the final HTML export when you're done.

#Common questions