Serwer MCP

Serwer działa pod adresem https://www.design-extractor.com/api/mcp, komunikuje się przez streamable HTTP i przyjmuje dwa rodzaje poświadczeń: logowanie na twoje konto przez standardowy proces autoryzacji MCP (OAuth 2.1) albo osobisty klucz API wysyłany jako Authorization: Bearer dx_.... Dzięki niemu agent może uruchomić ekstrakcję publicznej strony, poczekać na nią, odczytać gotowy DESIGN.md, sprawdzić cenę i twoje saldo oraz wyświetlić listę wcześniejszych ekstrakcji. Wynik pojawia się też w Moich ekstrakcjach jak każda inna ekstrakcja.

Dla Claude Code i Codex jest też plugin, który łączy serwer ze skillem apply-designmd: prowadzi agenta przez wyodrębnienie strony wzorcowej i przeniesienie tokenów na Tailwind, zmienne CSS lub plik tokenów. Kod źródłowy i instrukcje instalacji: Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code i Codex łączą się bez klucza: klient wykrywa logowanie na podstawie URL serwera, zatwierdzasz raz w przeglądarce, a klient przechowuje token, który sam odświeża. Nic do wklejania, nic do rotowania.

1. 1

   Dodaj URL serwera w ustawieniach konektorów

   claude.ai i Claude Desktop: Settings, Connectors, Add custom connector, a potem wklej https://www.design-extractor.com/api/mcp. ChatGPT: Settings, Connectors, Create, ten sam URL.

2. 2

   Zatwierdź na stronie zgody

   Klient otwiera Design Extractor w przeglądarce. Zaloguj się, jeśli jeszcze nie masz sesji, sprawdź, o co prosi agent, i zatwierdź. Ekstrakcje, które uruchomi, zużywają twoje kredyty jak każde inne.

3. 3

   Poproś o stronę

   Wystarczy „wyodrębnij design stripe.com”. Agent pojawia się w sekcji Połączeni agenci na stronie konta, gdzie jednym kliknięciem go odłączysz. Konektor dodany w claude.ai pojawia się też sam w Claude Code, więc jedno zatwierdzenie wystarcza dla obu.

Claude Code i Codex logują się tak samo z terminala: dodaj serwer bez klucza i uwierzytelnij się, gdy klient o to poprosi. Dokładne polecenia znajdziesz w sekcjach Claude Code i Codex.

Jedno polecenie rejestruje serwer dla bieżącego projektu, bez klucza. Dodaj --scope user, aby mieć go w każdym projekcie.

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

Potem uruchom /mcp, wybierz design-extractor i wybierz Authenticate. Zaloguj się i zatwierdź na stronie, która się otworzy; Claude Code przechowuje token i sam go odnawia.

Albo zainstaluj plugin, który dodaje serwer i skill apply-designmd. Jego serwer loguje się tak samo: po instalacji uruchom /mcp, wybierz serwer pluginu i uwierzytelnij się.

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

Aby zamiast tego użyć klucza API, na maszynie, która nie może otworzyć przeglądarki, przekaż go jako nagłówek i pomiń krok uwierzytelniania.

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

Sprawdź, czy /mcp pokazuje design-extractor jako połączony. Po claude mcp add narzędzia nazywają się mcp__design-extractor__extract_design itd., a gdy serwer pochodzi z pluginu: mcp__plugin_design-extractor_design-extractor__extract_design.

Dodaj serwer bez klucza, a Codex od razu otworzy logowanie. Zaloguj się i zatwierdź na stronie, która się otworzy; codex mcp login design-extractor powtórzy to później w razie potrzeby.

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

Albo zainstaluj ten sam plugin z jego marketplace. W Codex CLI /plugins otwiera przeglądarkę, w której instaluje się i włącza wpisy z marketplace; jeśli jego serwer poprosi o uwierzytelnienie, codex mcp login design-extractor otworzy logowanie.

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

Aby zamiast tego użyć klucza API, podaj nazwę zmiennej środowiskowej, która go przechowuje, i wyeksportuj ją w powłoce, z której uruchamiasz Codex; w przeciwnym razie serwer będzie widoczny jako nieudany, bez żadnych narzędzi.

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

Ta sama deklaracja wpisana ręcznie w ~/.codex/config.toml; aby zamiast tego wpisać klucz bezpośrednio, użyj 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"

Dodaj serwer do .cursor/mcp.json w projekcie albo do ~/.cursor/mcp.json dla wszystkich projektów. Cursor akceptuje też ${env:DESIGN_EXTRACTOR_API_KEY} w wartości nagłówka, jeśli wolisz trzymać klucz poza plikiem.

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

Przekaż serwer w options.mcpServers z type: "http" i nagłówkiem oraz zezwól na jego narzędzia za pomocą wieloznacznika, aby agent mógł je wywoływać bez pytania o uprawnienia.

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

Ekstrakcja przez serwer kosztuje dokładnie tyle samo co na stronie. Lite wyodrębnia jedną stronę, Pro bada kluczowe podstrony witryny. Aktualne ceny podaje get_pricing (w chwili pisania 6 kredytów za Lite i 10 za Pro), a twoje saldo get_credits. Gdy saldo nie pokrywa trybu, extract_design odmawia i o tym informuje; doładuj w Cenniku.

Prośba o stronę wyodrębnioną przez ciebie niedawno używa ponownie twojej ekstrakcji zamiast uruchamiać nową, a odpowiedź informuje, że nie pobrano kredytów; strona wyodrębniona tylko przez inne osoby nadal kosztuje cenę swojego trybu. Najpierw uruchom list_my_extractions, aby zobaczyć, co już masz.

Niektóre strony odpowiadają tylko odwiedzającym z określonych krajów. Gdy ekstrakcja nie powiedzie się z tego powodu, get_extraction wymienia kraje, z których strona się wczytuje, a agent może ponowić próbę przez extract_design z country. Ekstrakcja z innego kraju kosztuje cenę trybu plus dopłatę; obie wartości podaje get_pricing.