Server MCP

Server berada di https://www.design-extractor.com/api/mcp, memakai streamable HTTP, dan menerima dua jenis kredensial: masuk dengan akun Anda melalui alur otorisasi MCP standar (OAuth 2.1), atau API key pribadi yang dikirim sebagai Authorization: Bearer dx_.... Melalui server ini, agen bisa memulai ekstraksi situs publik, menunggunya, membaca DESIGN.md yang sudah jadi, mengecek harga dan saldo Anda, serta melihat daftar yang pernah Anda ekstrak. Hasilnya juga muncul di Ekstraksi saya seperti ekstraksi lainnya.

Untuk Claude Code dan Codex juga ada plugin yang menggabungkan server dengan skill apply-designmd: skill ini memandu agen mengekstrak situs referensi dan memetakan token-nya ke Tailwind, variabel CSS, atau file token. Kode sumber dan catatan pemasangan ada di Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code, dan Codex terhubung tanpa key: klien menemukan cara masuk dari URL server, Anda menyetujui sekali di browser, dan klien menyimpan token yang diperbaruinya sendiri. Tidak ada yang perlu ditempel, tidak ada yang perlu dirotasi.

1. 1

   Tambahkan URL server di pengaturan connector

   claude.ai dan Claude Desktop: Settings, Connectors, Add custom connector, lalu tempel https://www.design-extractor.com/api/mcp. ChatGPT: Settings, Connectors, Create, URL yang sama.

2. 2

   Setujui di halaman persetujuan

   Klien membuka Design Extractor di browser. Masuk jika belum, cek apa yang diminta agen, lalu setujui. Ekstraksi yang dimulainya memakai kredit Anda seperti ekstraksi lainnya.

3. 3

   Minta sebuah situs

   “Ekstrak desain stripe.com” sudah cukup. Agen muncul di bawah Agen terhubung di halaman akun Anda, tempat satu klik bisa memutuskannya. Connector yang ditambahkan di claude.ai juga otomatis muncul di Claude Code, jadi satu persetujuan berlaku untuk keduanya.

Claude Code dan Codex masuk dengan cara yang sama dari terminal: tambahkan server tanpa key dan lakukan autentikasi saat klien memintanya. Perintah lengkapnya ada di bagian Claude Code dan Codex.

Satu perintah mendaftarkan server untuk proyek saat ini, tanpa perlu key. Tambahkan --scope user agar tersedia di setiap proyek.

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

Lalu jalankan /mcp, pilih design-extractor, dan pilih Authenticate. Masuk dan setujui di halaman yang terbuka; Claude Code menyimpan token dan memperbaruinya sendiri.

Atau pasang plugin, yang menambahkan server dan skill apply-designmd. Server dari plugin masuk dengan cara yang sama: setelah pemasangan, jalankan /mcp, pilih server milik plugin, lalu lakukan autentikasi.

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

Untuk memakai API key, misalnya di mesin yang tidak bisa membuka browser, kirimkan sebagai header dan lewati langkah autentikasi.

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

Pastikan /mcp menampilkan design-extractor sebagai terhubung. Tools bernama mcp__design-extractor__extract_design dan seterusnya setelah claude mcp add, dan mcp__plugin_design-extractor_design-extractor__extract_design jika server berasal dari plugin.

Tambahkan server tanpa key dan Codex langsung membuka halaman masuk. Masuk dan setujui di halaman yang terbuka; codex mcp login design-extractor mengulanginya nanti jika perlu.

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

Atau pasang plugin yang sama dari marketplace-nya. Di Codex CLI, /plugins membuka browser tempat entri marketplace dipasang dan diaktifkan atau dinonaktifkan; jika server-nya meminta autentikasi, codex mcp login design-extractor membuka halaman masuk.

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

Untuk memakai API key, sebutkan environment variable yang menyimpannya dan export variable itu di shell tempat Anda menjalankan Codex; jika tidak, server akan tampil gagal dengan nol 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

Deklarasi yang sama secara manual di ~/.codex/config.toml; untuk menulis key langsung di dalamnya, gunakan 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"

Tambahkan server ke .cursor/mcp.json di proyek, atau ke ~/.cursor/mcp.json untuk semua proyek. Cursor juga menerima ${env:DESIGN_EXTRACTOR_API_KEY} di nilai header jika Anda lebih suka tidak menyimpan key di file.

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

Berikan server di options.mcpServers dengan type: "http" dan header-nya, lalu izinkan tools-nya dengan wildcard agar agen bisa memanggilnya tanpa prompt izin.

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

Ekstraksi lewat server memakai biaya yang persis sama seperti di situs. Lite mengekstrak satu halaman, Pro mengambil sampel halaman-halaman utama situs. Harga terkini didapat dari get_pricing (6 kredit untuk Lite dan 10 untuk Pro saat tulisan ini dibuat) dan saldo Anda dari get_credits. Jika saldo tidak cukup untuk tier tersebut, extract_design menolak dan memberi tahu; isi ulang di halaman Harga.

Meminta situs yang baru-baru ini Anda ekstrak akan memakai ulang ekstraksi Anda alih-alih memulai yang baru, dan balasannya menyebutkan bahwa tidak ada kredit yang dipotong; situs yang hanya diekstrak orang lain tetap dikenai harga tier-nya. Jalankan list_my_extractions terlebih dahulu untuk melihat apa yang sudah ada.

Beberapa situs hanya merespons pengunjung dari negara tertentu. Jika ekstraksi gagal karena hal itu, get_extraction mencantumkan negara yang bisa memuat halaman tersebut dan agen bisa mencoba lagi dengan extract_design dan country. Ekstraksi dari negara lain memakai harga tier ditambah biaya tambahan, keduanya tercantum di get_pricing.