Overflow Design

npx add-mcp 'https://www.overflow.design/api/mcp/'

Overflow no seu agente de codificação

O Overflow Design tem um servidor MCP. Conecte-o ao Claude Code, Cursor, VS Code, Codex ou qualquer outro cliente MCP, e seu agente pode pesquisar todos os 1.648 desenhos pelo que eles mostram e escrevê-los diretamente no seu projeto. O conjunto gratuito funciona sem chave; o Pro abre o restante.

Desenhando no Figma? Os mesmos desenhos estão no plugin. Obtenha o plugin do Figma

O endereço

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

HTTP Streamable. Use exatamente como escrito, com o www. e a barra final: o domínio puro responde com um redirecionamento que transforma a solicitação em algo que o servidor não consegue ler.

Sem chave

Adicione o endereço e nada mais. Seu agente pode pesquisar tudo e buscar os desenhos gratuitos: 194 ícones, 45 ilustrações e os stills de todos os 71 desenhos isométricos. Qualquer outra coisa retorna com uma nota dizendo que precisa do Pro.

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

Com Pro

Envie sua chave de licença como um cabeçalho, Authorization: Bearer <key>. A chave está no e-mail que veio com seu recibo.

Mantenha-a em uma variável de ambiente em vez de em um arquivo de configuração, para que uma configuração que acabe em um repositório não carregue sua licença junto. Os exemplos abaixo a leem de OVERFLOW_LICENCE. Não é chamada de OVERFLOW_KEY de propósito: o Claude Code apaga qualquer variável com KEY, TOKEN ou SECRET no nome quando ela vai para um cabeçalho.

Claude Code

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

Isso armazena a chave nas suas próprias configurações. Para compartilhar o servidor com um projeto por meio do .mcp.json, nomeie a variável em vez disso, e cada pessoa define a sua:

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

Cursor

Em ~/.cursor/mcp.json:

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

VS Code

Em .vscode/mcp.json. O VS Code pede a chave uma vez e a mantém fora do arquivo:

{
  "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}"
      }
    }
  }
}

Codex

Em ~/.codex/config.toml:

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

Devin Desktop (antigo Windsurf)

Em ~/.config/devin/mcp_config.json:

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

OpenCode

Em opencode.json:

{
  "$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}"
      }
    }
  }
}

Qualquer outro cliente que fale MCP sobre HTTP Streamable precisa das mesmas duas coisas: o endereço e o cabeçalho.

Então peça o que você precisa

Sem necessidade de nomes de ferramentas. Diga o que você quer com suas próprias palavras e mencione Overflow para que o agente saiba onde procurar:

• Adicione um ícone de calendário do Overflow ao lado do campo de data.
• Encontre uma ilustração do Overflow para a seção de inscrição na newsletter e salve-a com nossas outras imagens.
• Mostre-me três ícones do Overflow que possam representar um perfil de usuário, e deixe-me escolher.
• Use o desenho isométrico de banco de dados do Overflow no hero, tema escuro.
• Faça a caixa na seção de preços ser a animada do Overflow.

Ensine as regras ao seu agente

O servidor vem com um pequeno conjunto de regras: pesquisar antes de adivinhar, perguntar quando vários desenhos se encaixam, buscá-los de uma vez, usar cada desenho como entregue e parar quando estiver no lugar. No Claude Code, /mcp__overflow__start as carrega na conversa, seguido pela tarefa se você quiser; outros clientes listam como "Use Overflow Design drawings".

Para que toda sessão as siga, adicione-as ao AGENTS.md ou CLAUDE.md do seu projeto:

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

Leia as regras

# 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

O que seu agente pode fazer

• search_drawings encontra desenhos pelo que mostram, nos três conjuntos, e diz quais sua chave abre.
• get_drawings busca até vinte por vez. Ícones e stills isométricos retornam como SVG ou JSX para escrever em um arquivo ou componente. Ilustrações e desenhos isométricos animados, que chegam a dezenas de kilobytes, retornam como um link que o agente baixa em até quinze minutos, para que o arquivo vá para seu disco sem passar pelo modelo.
• list_sets lista os conjuntos e suas categorias, e o que sua chave desbloqueia.

O que a licença cobre

Um desenho que seu agente busca é o mesmo desenho, sob a mesma licença, que um que você baixa aqui. Use-o no projeto e no que o projeto se tornar, incluindo trabalho de cliente. Não publique os arquivos por conta própria: nem em um repositório público, nem em uma pasta compartilhada, nem em um pacote de assets. Com o Pro, ícones e ilustrações também podem ir para templates, temas e kits de UI que você vende, como parte do design e não como um conjunto próprio. Desenhos gratuitos também podem ir para o repositório público de um projeto de código aberto, como parte do projeto; um desenho Pro commitado lá é publicado, o que a licença não permite. A licença tem os detalhes.

Limites

Uma licença pode buscar 30 desenhos Pro por minuto pelo servidor, o que é mais do que um projeto precisa de uma vez; o conjunto inteiro é um zip, em Download everything na página de preços uma vez que sua chave esteja lá. Se sua chave acabar em algum lugar público, entre em contato pelo chat em qualquer página e ela pode ser retirada e substituída.

O Pro custa US$ 99 uma vez, por cada desenho no site e cada um adicionado depois. Veja o que está incluído.