Gradiently Claude connector: design with MCP inside Claude

To set up the Gradiently Claude connector, point Claude at Gradiently's hosted MCP server at https://gradiently.design/api/mcp. In the Claude app, add it as a custom connector and sign in to Gradiently. In Claude Code, add it from the terminal with a scoped API key. Either way, Claude can then search Marks, read your brand kit and make designs that are saved in your workspace and open in the Studio, with every word still editable.

MCP, the Model Context Protocol, is the open standard that lets Claude use real tools. What is MCP explains it simply, and the protocol itself is documented at modelcontextprotocol.io.

Which way to connect Claude

Whichever route you take, you must be an owner or admin of the Gradiently workspace. Editors and viewers can't connect assistants or create keys.

Connect the Claude app with a custom connector

1. 1

   Open Claude's connector settings

   Add a custom connector. Which Claude plans allow custom connectors is Anthropic's decision, so check Claude's help pages if you can't see the option. Claude connectors explains the feature.

2. 2

   Paste the server address

   Name it Gradiently and use https://gradiently.design/api/mcp. Choose OAuth sign in.

3. 3

   Sign in and choose a workspace

   In the Gradiently window, pick the workspace Claude should work in and read the permissions under Allow this assistant to.

4. 4

   Allow, then check

   Choose Allow connection. Back in Claude, ask it to list its Gradiently tools to confirm.

Access renews automatically for up to 30 days, then you reconnect. A custom connector is yours to use straight away; a listing in Claude's public directory is separate and needs Anthropic's review.

Connect Claude Code with a scoped API key

Claude Code uses a key rather than sign in. Create one in Gradiently under Settings › API and agents: choose the workspace, name it after where it lives (Claude Code, laptop), tick what it may do and select Create key. The key is shown once, so copy it into your password manager straight away.

export GRADIENTLY_API_KEY="gr_live_…"

claude mcp add --transport http gradiently https://gradiently.design/api/mcp \
  --header "Authorization: Bearer $GRADIENTLY_API_KEY"

Other clients that read a JSON file usually accept the same server and header. Settings shows a ready snippet under Connect an MCP client.

{
  "mcpServers": {
    "gradiently": {
      "url": "https://gradiently.design/api/mcp",
      "headers": { "Authorization": "Bearer gr_live_…" }
    }
  }
}

Choosing the key's permissions

Each permission is a scope. A new key starts with five that cover every design tool, so most people change nothing. Add the others only when Claude genuinely needs them.

What Claude can do once connected

Claude works through the same actions you have in the product. It can search the Market by name, colour words or code; read your brand profile, voice and fonts; draw an original design, look at the rendered image and refine it; fill one of Gradiently's templates; change the words on a saved design; make resized copies; and render a design to PNG or PDF. When Claude composes the design itself, Gradiently charges no AI credits. If you ask it to hand the job to Gradiently's own Designer, that uses credits as it would in the Studio.

Claude Code makes a particular kind of job easy. Say you keep a blog and want a link image for every post. Ask: "For each post in /content, make a 1200×630 link preview in our brand with the post title, then render each one as a PNG into /public/og." Claude designs each image in Gradiently, checks it and writes the files where your site expects them. Open Graph image size explains why 1200×630.

Prompts that work well with Claude

• "Read our brand profile, then make a LinkedIn post and an X post announcing our new office in Bristol."
• "Find three dark Marks with a silk material close to deep teal and give me their codes."
• "Take yesterday's announcement and make a story and a YouTube thumbnail from it."
• "Change the date on the event poster to 14 November and render it as a PDF."

The better your brand kit, the less you need to say in each request; brand voice for AI shows what to fill in. For more ideas aimed at social posts, see Claude for social media, and for the bigger picture, Claude design.

Keeping the connection safe

If a key leaks or you stop using it, select Revoke beside it in Settings › API and agents and it stops working at once. Keys also stop when their creator leaves the workspace or loses the admin role. Using ChatGPT too? Gradiently in ChatGPT has its own setup, and the full tool reference is in the developer docs.