Servidor MCP

O servidor fica em https://www.design-extractor.com/api/mcp, usa streamable HTTP e aceita duas credenciais: um login com a sua conta pelo fluxo padrão de autorização do MCP (OAuth 2.1), ou uma chave de API pessoal enviada como Authorization: Bearer dx_.... Por ele, um agente pode iniciar a extração de um site público, esperar que ela termine, ler o DESIGN.md pronto, consultar o preço e o seu saldo e listar o que você já extraiu. O resultado também aparece em Minhas extrações, como qualquer outra extração.

Para o Claude Code e o Codex também existe um plugin que junta o servidor com uma skill apply-designmd: ela guia o agente na extração de um site de referência e no mapeamento dos tokens para Tailwind, variáveis CSS ou um arquivo de tokens. Código-fonte e instruções de instalação em Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code e Codex se conectam sem chave: o cliente descobre o login a partir da URL do servidor, você aprova uma vez no navegador e o cliente guarda um token que ele mesmo renova. Nada para colar, nada para trocar.

1. 1

   Adicione a URL do servidor nas configurações de conectores

   claude.ai e Claude Desktop: Settings, Connectors, Add custom connector, depois cole https://www.design-extractor.com/api/mcp. ChatGPT: Settings, Connectors, Create, mesma URL.

2. 2

   Aprove na página de consentimento

   O cliente abre o Design Extractor no navegador. Entre na sua conta, se ainda não estiver conectado, confira o que o agente pede e aprove. As extrações que ele iniciar gastam os seus créditos como qualquer outra.

3. 3

   Peça um site

   “Extraia o design de stripe.com” é suficiente. O agente aparece em Agentes conectados na página da sua conta, onde um clique o desconecta. Um conector adicionado no claude.ai também aparece sozinho no Claude Code, então uma aprovação vale para os dois.

O Claude Code e o Codex entram do mesmo jeito pelo terminal: adicione o servidor sem chave e faça a autenticação quando o cliente pedir. Os comandos exatos estão em Claude Code e Codex.

Um comando registra o servidor para o projeto atual, sem chave. Adicione --scope user para tê-lo em todos os projetos.

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

Depois execute /mcp, escolha design-extractor e selecione Authenticate. Entre na sua conta e aprove na página que abrir; o Claude Code guarda o token e o renova sozinho.

Ou instale o plugin, que adiciona o servidor e a skill apply-designmd. O servidor dele faz login do mesmo jeito: depois da instalação, execute /mcp, escolha o servidor do plugin e faça a autenticação.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor

Para usar uma chave de API, em uma máquina que não consegue abrir um navegador, passe a chave como header e pule a etapa de autenticação.

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp \
  --header "Authorization: Bearer dx_..."

Confira se /mcp mostra design-extractor como conectado. As ferramentas se chamam mcp__design-extractor__extract_design e assim por diante depois de claude mcp add, e mcp__plugin_design-extractor_design-extractor__extract_design quando o servidor vem do plugin.

Adicione o servidor sem chave e o Codex abre o login na hora. Entre na sua conta e aprove na página que abrir; codex mcp login design-extractor repete o processo depois, se precisar.

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp

Ou instale o mesmo plugin pelo marketplace dele. No Codex CLI, /plugins abre o navegador de plugins, onde os itens do marketplace são instalados e ativados; se o servidor pedir autenticação, codex mcp login design-extractor abre o login.

codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

Para usar uma chave de API, informe o nome da variável de ambiente que a guarda e exporte essa variável no shell em que você inicia o Codex; caso contrário, o servidor aparece com falha e zero ferramentas.

export DESIGN_EXTRACTOR_API_KEY=dx_...

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp \
  --bearer-token-env-var DESIGN_EXTRACTOR_API_KEY

A mesma declaração, feita à mão em ~/.codex/config.toml; para colocar a chave direto no arquivo, use http_headers = { "Authorization" = "Bearer dx_..." }.

[mcp_servers.design-extractor]
url = "https://www.design-extractor.com/api/mcp"
bearer_token_env_var = "DESIGN_EXTRACTOR_API_KEY"

Adicione o servidor em .cursor/mcp.json no projeto, ou em ~/.cursor/mcp.json para todos os projetos. O Cursor também aceita ${env:DESIGN_EXTRACTOR_API_KEY} no valor do header, se você preferir manter a chave fora do arquivo.

{
  "mcpServers": {
    "design-extractor": {
      "url": "https://www.design-extractor.com/api/mcp",
      "headers": {
        "Authorization": "Bearer dx_..."
      }
    }
  }
}

Passe o servidor em options.mcpServers com type: "http" e o header, e libere as ferramentas dele com um curinga para que o agente possa chamá-las sem pedir permissão.

import { query } from "@anthropic-ai/claude-agent-sdk";

for await (const message of query({
  prompt: "Extract the design system of https://example.com and summarize its colors",
  options: {
    mcpServers: {
      "design-extractor": {
        type: "http",
        url: "https://www.design-extractor.com/api/mcp",
        headers: {
          Authorization: `Bearer ${process.env.DESIGN_EXTRACTOR_API_KEY}`,
        },
      },
    },
    allowedTools: ["mcp__design-extractor__*"],
  },
})) {
  if (message.type === "result" && message.subtype === "success") {
    console.log(message.result);
  }
}

Uma extração pelo servidor custa exatamente o mesmo que no site. O Lite extrai uma página, o Pro faz uma amostragem das páginas principais do site. Os preços atuais vêm de get_pricing (6 créditos para o Lite e 10 para o Pro no momento em que este texto foi escrito) e o seu saldo vem de get_credits. Quando o saldo não cobre o modo, extract_design recusa e avisa; recarregue em Preços.

Pedir um site que você extraiu recentemente reaproveita a sua extração em vez de iniciar uma nova, e a resposta informa que nenhum crédito foi cobrado; um site que só outras pessoas extraíram ainda custa o preço do modo. Execute list_my_extractions antes para ver o que já existe.

Alguns sites só respondem a visitantes de certos países. Quando uma extração falha por isso, get_extraction lista os países em que a página carrega, e o agente pode tentar de novo com extract_design e country. Uma extração a partir de outro país custa o preço do modo mais uma taxa adicional, ambos informados por get_pricing.