Connect an AI agent

The server lives at https://www.design-extractor.com/api/mcp, speaks streamable HTTP, and accepts two credentials: a sign-in with your account through the standard MCP authorization flow (OAuth 2.1), or a personal API key sent as Authorization: Bearer dx_.... Through it an agent can start an extraction of a public site, wait for it, read the finished DESIGN.md, check the price and your balance, and list what you extracted before. The result also appears in My extractions like every other extraction.

For Claude Code and Codex there is also a plugin that bundles the server with an apply-designmd skill: it walks the agent through extracting a reference site and mapping the tokens onto Tailwind, CSS variables or a tokens file. Source and install notes at Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code and Codex connect without a key: the client discovers the sign-in from the server URL, you approve once in the browser, and the client holds a token it refreshes on its own. Nothing to paste, nothing to rotate.

1. 1

   Add the server URL in the connector settings

   claude.ai and Claude Desktop: Settings, Connectors, Add custom connector, then paste https://www.design-extractor.com/api/mcp. ChatGPT: Settings, Connectors, Create, same URL.

2. 2

   Approve on the consent page

   The client opens Design Extractor in the browser. Sign in if you are not already, check what the agent asks for, and approve. Extractions it starts spend your credits like any other.

3. 3

   Ask for a site

   “Extract the design of stripe.com” is enough. The agent shows up under Connected agents on your account page, where one click disconnects it. A connector added in claude.ai also appears in Claude Code on its own, so one approval covers both.

Claude Code signs in the same way when the server is added without a header: run /mcp, pick design-extractor and authenticate in the browser.

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

Codex too: add the server without a key variable and it opens the same sign-in straight away. codex mcp login design-extractor repeats it later if needed.

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

One command registers the server for the current project. Add --scope user to have it in every project. Leave the header out to sign in instead of using a key.

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

Or install the plugin, which adds the server and the apply-designmd skill. Its server signs in the same way: after the install, run /mcp, pick the plugin's server and authenticate.

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

Check /mcp shows design-extractor as connected. Tools are named mcp__design-extractor__extract_design and so on after claude mcp add, and mcp__plugin_design-extractor_design-extractor__extract_design when the server comes from the plugin.

Install the same plugin from its marketplace. In the Codex CLI, /plugins opens the browser where marketplace entries are installed and toggled; if its server asks for authentication, codex mcp login design-extractor opens the sign-in.

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

Without the plugin, add the server and sign in. To use a key instead, name the environment variable that holds it and export it in the shell you start Codex from; otherwise the server shows as failed with zero tools.

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

The same declaration by hand in ~/.codex/config.toml; to inline the key instead 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"

Add the server to .cursor/mcp.json in the project, or to ~/.cursor/mcp.json for every project. Cursor also accepts ${env:DESIGN_EXTRACTOR_API_KEY} in the header value if you prefer to keep the key out of the file.

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

Pass the server in options.mcpServers with type: "http" and the header, and allow its tools with a wildcard so the agent can call them without a permission prompt.

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);
  }
}

An extraction through the server costs exactly what it costs on the site. Lite extracts one page, Pro samples the site's key pages. The current prices come from get_pricing (6 credits for Lite and 10 for Pro at the time of writing) and your balance from get_credits. When the balance does not cover the tier, extract_design refuses and says so; top up on Pricing.