MCP sunucusu

Sunucu https://www.design-extractor.com/api/mcp adresinde çalışır, streamable HTTP konuşur ve iki kimlik bilgisini kabul eder: standart MCP yetkilendirme akışıyla (OAuth 2.1) hesabınla giriş ya da Authorization: Bearer dx_... olarak gönderilen kişisel bir API anahtarı. Bir ajan bu sunucu üzerinden herkese açık bir sitenin çıkarmasını başlatabilir, bitmesini bekleyebilir, tamamlanan DESIGN.md dosyasını okuyabilir, fiyatı ve bakiyeni kontrol edebilir ve daha önce çıkardıklarını listeleyebilir. Sonuç da diğer tüm çıkarmalar gibi Çıkarmalarım listesinde görünür.

Claude Code ve Codex için ayrıca sunucuyu bir apply-designmd skill'iyle birlikte paketleyen bir eklenti var: ajana bir referans siteyi çıkarmayı ve token'ları Tailwind'e, CSS değişkenlerine veya bir token dosyasına eşlemeyi adım adım gösterir. Kaynak kodu ve kurulum notları: Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code ve Codex anahtarsız bağlanır: istemci girişi sunucu URL'sinden bulur, sen tarayıcıda bir kez onaylarsın ve istemci kendi kendine yenilediği bir token tutar. Yapıştırılacak bir şey yok, değiştirilecek bir şey yok.

1. 1

   Sunucu URL'sini bağlayıcı ayarlarına ekle

   claude.ai ve Claude Desktop: Settings, Connectors, Add custom connector, ardından https://www.design-extractor.com/api/mcp adresini yapıştır. ChatGPT: Settings, Connectors, Create, aynı URL.

2. 2

   İzin sayfasında onayla

   İstemci Design Extractor'ı tarayıcıda açar. Giriş yapmadıysan giriş yap, ajanın ne istediğini kontrol et ve onayla. Ajanın başlattığı çıkarmalar, diğerleri gibi senin kredilerini harcar.

3. 3

   Bir site iste

   “stripe.com'un tasarımını çıkar” demen yeterli. Ajan, hesap sayfandaki Bağlı ajanlar bölümünde görünür ve oradan tek tıkla bağlantısını kesebilirsin. claude.ai'da eklenen bir bağlayıcı Claude Code'da da kendiliğinden görünür, yani tek bir onay ikisini de kapsar.

Claude Code ve Codex terminalden aynı şekilde giriş yapar: sunucuyu anahtarsız ekle ve istemci sorduğunda kimliğini doğrula. Komutların tam hali Claude Code ve Codex başlıkları altında.

Tek bir komut sunucuyu mevcut proje için kaydeder, anahtar gerekmez. Her projede olması için --scope user ekle.

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

Ardından /mcp komutunu çalıştır, design-extractor seç ve Authenticate'i seç. Açılan sayfada giriş yap ve onayla; Claude Code token'ı saklar ve kendi kendine yeniler.

Ya da sunucuyu ve apply-designmd skill'ini ekleyen eklentiyi kur. Eklentinin sunucusu da aynı şekilde giriş yapar: kurulumdan sonra /mcp komutunu çalıştır, eklentinin sunucusunu seç ve kimliğini doğrula.

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

Bunun yerine bir API anahtarı kullanmak için, örneğin tarayıcı açamayan bir makinede, anahtarı başlık olarak geçir ve kimlik doğrulama adımını atla.

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

/mcp çıktısında design-extractor öğesinin bağlı göründüğünü kontrol et. Araçlar claude mcp add sonrasında mcp__design-extractor__extract_design gibi adlar alır, sunucu eklentiden geliyorsa mcp__plugin_design-extractor_design-extractor__extract_design gibi.

Sunucuyu anahtarsız ekle, Codex girişi hemen açar. Açılan sayfada giriş yap ve onayla; gerekirse codex mcp login design-extractor bunu daha sonra tekrarlar.

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

Ya da aynı eklentiyi kendi marketplace'inden kur. Codex CLI'da /plugins, marketplace girdilerinin kurulup açılıp kapatıldığı tarayıcıyı açar; eklentinin sunucusu kimlik doğrulama isterse codex mcp login design-extractor girişi açar.

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

Bunun yerine bir API anahtarı kullanmak için anahtarı tutan ortam değişkeninin adını ver ve onu Codex'i başlattığın kabukta export et; aksi halde sunucu sıfır araçla başarısız görünür.

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

Aynı tanımın ~/.codex/config.toml içinde elle yazılmış hali; anahtarı doğrudan yazmak için http_headers = { "Authorization" = "Bearer dx_..." } kullan.

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

Sunucuyu projedeki .cursor/mcp.json dosyasına ya da tüm projeler için ~/.cursor/mcp.json dosyasına ekle. Anahtarı dosyanın dışında tutmak istersen Cursor başlık değerinde ${env:DESIGN_EXTRACTOR_API_KEY} da kabul eder.

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

Sunucuyu type: "http" ve başlıkla birlikte options.mcpServers içinde geçir, araçlarına da bir joker karakterle izin ver ki ajan onları izin istemi olmadan çağırabilsin.

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

Sunucu üzerinden yapılan bir çıkarma, sitede neye mal oluyorsa tam olarak ona mal olur. Lite tek bir sayfayı çıkarır, Pro sitenin önemli sayfalarından örnekler alır. Güncel fiyatlar get_pricing aracından gelir (bu yazı yazılırken Lite için 6 kredi, Pro için 10), bakiyen ise get_credits aracından. Bakiye seviyeyi karşılamadığında extract_design reddeder ve bunu söyler; Fiyatlandırma sayfasından kredi yükle.

Yakın zamanda çıkardığın bir siteyi istemek yeni bir çıkarma başlatmak yerine mevcut çıkarmanı yeniden kullanır ve yanıtta kredi düşülmediği belirtilir; yalnızca başka kişilerin çıkardığı bir site yine kendi seviye fiyatına mal olur. Neyin zaten olduğunu görmek için önce list_my_extractions çalıştır.

Bazı siteler yalnızca belirli ülkelerden gelen ziyaretçilere yanıt verir. Bir çıkarma bu yüzden başarısız olduğunda get_extraction sayfayı yükleyebilen ülkeleri listeler ve ajan extract_design ile country parametresini kullanarak yeniden deneyebilir. Ülke seçimli çıkarma, seviye fiyatı artı bir ek ücrete mal olur; ikisini de get_pricing listeler.