Overflow in your coding agent

https://www.overflow.design/api/mcp/

Streamable HTTP. Use it exactly as written, with the www. and the final slash: the bare domain answers with a redirect that turns the request into one the server cannot read.

Add the address and nothing else. Your agent can search everything and fetch the free drawings: 194 icons, 45 illustrations and the stills of all 71 isometric drawings. Anything else comes back with a note saying it needs Pro.

claude mcp add --transport http overflow https://www.overflow.design/api/mcp/

Send your licence key as a header, Authorization: Bearer <key>. The key is in the email that came with your receipt.

Keep it in an environment variable rather than in a config file, so a config that ends up in a repository does not carry your licence with it. The examples below read it from OVERFLOW_LICENCE. It is not called OVERFLOW_KEY on purpose: Claude Code blanks any variable with KEY, TOKEN or SECRET in its name when it goes into a header.

claude mcp add --transport http overflow https://www.overflow.design/api/mcp/ \
  --header "Authorization: Bearer $OVERFLOW_LICENCE"

{
  "mcpServers": {
    "overflow": {
      "type": "http",
      "url": "https://www.overflow.design/api/mcp/",
      "headers": {
        "Authorization": "Bearer ${OVERFLOW_LICENCE}"
      }
    }
  }
}

{
  "mcpServers": {
    "overflow": {
      "url": "https://www.overflow.design/api/mcp/",
      "headers": {
        "Authorization": "Bearer ${env:OVERFLOW_LICENCE}"
      }
    }
  }
}

{
  "inputs": [
    {
      "type": "promptString",
      "id": "overflow-licence",
      "description": "Overflow Pro licence key",
      "password": true
    }
  ],
  "servers": {
    "overflow": {
      "type": "http",
      "url": "https://www.overflow.design/api/mcp/",
      "headers": {
        "Authorization": "Bearer ${input:overflow-licence}"
      }
    }
  }
}

[mcp_servers.overflow]
url = "https://www.overflow.design/api/mcp/"
bearer_token_env_var = "OVERFLOW_LICENCE"

{
  "mcpServers": {
    "overflow": {
      "serverUrl": "https://www.overflow.design/api/mcp/",
      "headers": {
        "Authorization": "Bearer ${env:OVERFLOW_LICENCE}"
      }
    }
  }
}

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "overflow": {
      "type": "remote",
      "url": "https://www.overflow.design/api/mcp/",
      "enabled": true,
      "headers": {
        "Authorization": "Bearer {env:OVERFLOW_LICENCE}"
      }
    }
  }
}

Any other client that speaks MCP over Streamable HTTP needs the same two things: the address, and the header.

No tool names needed. Say what you want in your own words, and name Overflow so the agent knows where to look:

• Add an Overflow calendar icon next to the date field.
• Find an Overflow illustration for the newsletter signup section and save it with our other images.
• Show me three Overflow icons that could stand for a user profile, and let me pick.
• Use the Overflow isometric database drawing in the hero, dark theme.
• Make the crate in the pricing section the animated Overflow one.

The server comes with a short set of rules: search before guessing, ask when several drawings fit, fetch them in one go, use each drawing as delivered, and stop once it is in place. In Claude Code, /mcp__overflow__start loads them into the conversation, followed by the task if you like; other clients list it as “Use Overflow Design drawings”.

To have every session follow them, add them to your project's AGENTS.md or CLAUDE.md:

curl -fsSL https://www.overflow.design/mcp/agents.md >> AGENTS.md

# Overflow Design drawings

This project can use Overflow Design's icons, illustrations and isometric drawings through the Overflow MCP server at https://www.overflow.design/api/mcp/ (tools: search_drawings, get_drawings, list_sets). Setup: https://www.overflow.design/mcp/

## When

- When the work needs an icon, an illustration or an isometric drawing, search Overflow before drawing one yourself or taking one from another set.

## How

1. Search with the plain noun: calendar, shopping cart, teamwork. Take ids from the results; never guess one.
2. If the request is vague, or several drawings fit it equally well, show the user two or three, with their names and page links, and let them choose. Otherwise take the best match.
3. Fetch everything you need in one get_drawings call, up to 20 ids.
4. Put each drawing where this project keeps its icons or images, under the file name the result gives, or paste the markup where it is used. For a large file, run the curl command the result gives rather than retyping the markup.
5. Use each drawing as delivered. Do not redraw, simplify or restyle it. Size it with width and height or CSS; icons take their colour from the text around them.
6. Once the drawings are in place, stop. Do not fetch them again to check them.

## Locked drawings

Drawings marked locked need a Pro licence key, which the MCP client sends as the header "Authorization: Bearer <key>". If one is locked, say so and offer a free alternative (search_drawings with tier "free"). Do not retry.

## Licence

Licence: these drawings are for use inside this project and what it becomes, client work included. Do not publish the files on their own: not in a public repository, a shared folder or an asset pack. With Pro, icons and illustrations may also go into templates, themes and UI kits you sell, as part of the design rather than a set of their own. If this project's repository is public, free drawings may go into it as part of the project; ask before committing a Pro one. Terms: https://www.overflow.design/license/#ai-coding-agents

• search_drawings finds drawings by what they show, across all three sets, and says which ones your key opens.
• get_drawings fetches up to twenty at a time. Icons and isometric stills come back as SVG or JSX to write into a file or a component. Illustrations and the animated isometric drawings, which run to tens of kilobytes, come back as a link the agent downloads within fifteen minutes, so the file goes to your disk without passing through the model.
• list_sets lists the sets and their categories, and what your key unlocks.

A drawing your agent fetches is the same drawing, under the same licence, as one you download here. Use it in the project and whatever the project becomes, client work included. Do not publish the files on their own: not in a public repository, a shared folder or an asset pack. With Pro, icons and illustrations may also go into templates, themes and UI kits you sell, as part of the design rather than a set of their own. Free drawings may also go into an open-source project's public repository, as part of the project; a Pro drawing committed there is published, which the licence does not allow. The licence has the details.

One licence can fetch 30 Pro drawings a minute through the server, which is more than a project needs at once; the whole set is one zip, from Download everything on the pricing page once your key is in. If your key ends up somewhere public, get in touch through the chat on any page and it can be withdrawn and replaced.

Pro is $99 once, for every drawing on the site and every one added later. See what is in it.