Máy chủ MCP

Máy chủ nằm tại https://www.design-extractor.com/api/mcp, dùng streamable HTTP và chấp nhận hai loại thông tin xác thực: đăng nhập bằng tài khoản của bạn qua luồng ủy quyền MCP chuẩn (OAuth 2.1), hoặc khóa API cá nhân gửi dưới dạng Authorization: Bearer dx_.... Thông qua máy chủ, agent có thể bắt đầu trích xuất một trang công khai, chờ nó hoàn tất, đọc DESIGN.md đã xong, kiểm tra giá và số dư của bạn, và liệt kê những gì bạn đã trích xuất trước đó. Kết quả cũng xuất hiện trong Lượt trích xuất của tôi như mọi lượt trích xuất khác.

Với Claude Code và Codex còn có một plugin gộp máy chủ với skill apply-designmd: skill này hướng dẫn agent trích xuất một trang web tham chiếu và ánh xạ token sang Tailwind, biến CSS hoặc một tệp token. Mã nguồn và hướng dẫn cài đặt tại Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code và Codex kết nối mà không cần khóa: client tự tìm luồng đăng nhập từ URL máy chủ, bạn chấp thuận một lần trong trình duyệt, và client giữ một token tự làm mới. Không có gì để dán, không có gì phải xoay vòng.

1. 1

   Thêm URL máy chủ trong phần cài đặt connector

   claude.ai và Claude Desktop: Settings, Connectors, Add custom connector, rồi dán https://www.design-extractor.com/api/mcp. ChatGPT: Settings, Connectors, Create, cùng URL đó.

2. 2

   Chấp thuận trên trang cấp quyền

   Client mở Design Extractor trong trình duyệt. Đăng nhập nếu bạn chưa đăng nhập, xem agent yêu cầu những quyền gì, rồi chấp thuận. Các lượt trích xuất do agent bắt đầu sẽ trừ credit của bạn như mọi lượt khác.

3. 3

   Yêu cầu một trang web

   Chỉ cần nói “Trích xuất thiết kế của stripe.com”. Agent sẽ xuất hiện trong mục Agent đã kết nối trên trang tài khoản của bạn, nơi một cú nhấp là ngắt kết nối. Connector thêm trong claude.ai cũng tự xuất hiện trong Claude Code, nên một lần chấp thuận dùng được cho cả hai.

Claude Code và Codex đăng nhập theo cùng cách từ terminal: thêm máy chủ không kèm khóa và xác thực khi client yêu cầu. Lệnh cụ thể nằm trong mục Claude Code và Codex.

Một lệnh đăng ký máy chủ cho dự án hiện tại, không cần khóa. Thêm --scope user để dùng nó trong mọi dự án.

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

Sau đó chạy /mcp, chọn design-extractor rồi chọn Authenticate. Đăng nhập và chấp thuận trên trang vừa mở; Claude Code giữ token và tự gia hạn.

Hoặc cài plugin, plugin này thêm máy chủ cùng skill apply-designmd. Máy chủ của plugin đăng nhập theo cùng cách: sau khi cài, chạy /mcp, chọn máy chủ của plugin và xác thực.

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

Để dùng khóa API thay thế, cho một máy không mở được trình duyệt, hãy truyền khóa dưới dạng header và bỏ qua bước xác thực.

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

Kiểm tra /mcp hiển thị design-extractor ở trạng thái đã kết nối. Các công cụ có tên mcp__design-extractor__extract_design và tương tự khi thêm bằng claude mcp add, và mcp__plugin_design-extractor_design-extractor__extract_design khi máy chủ đến từ plugin.

Thêm máy chủ không kèm khóa và Codex sẽ mở trang đăng nhập ngay. Đăng nhập và chấp thuận trên trang vừa mở; codex mcp login design-extractor sẽ lặp lại bước này sau nếu cần.

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

Hoặc cài cùng plugin đó từ marketplace của nó. Trong Codex CLI, /plugins mở trình duyệt nơi các mục trong marketplace được cài đặt và bật tắt; nếu máy chủ của plugin yêu cầu xác thực, codex mcp login design-extractor sẽ mở trang đăng nhập.

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

Để dùng khóa API thay thế, hãy chỉ định biến môi trường chứa khóa và export biến đó trong shell mà bạn khởi động Codex; nếu không, máy chủ sẽ hiện trạng thái lỗi với không công cụ nào.

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

Khai báo tương tự viết tay trong ~/.codex/config.toml; để ghi trực tiếp khóa vào đó, dùng 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"

Thêm máy chủ vào .cursor/mcp.json trong dự án, hoặc vào ~/.cursor/mcp.json để dùng cho mọi dự án. Cursor cũng chấp nhận ${env:DESIGN_EXTRACTOR_API_KEY} trong giá trị header nếu bạn muốn giữ khóa bên ngoài tệp.

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

Truyền máy chủ vào options.mcpServers với type: "http" và header, rồi cho phép các công cụ của nó bằng ký tự đại diện để agent gọi chúng mà không cần hỏi quyền.

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

Một lượt trích xuất qua máy chủ tốn đúng bằng trên trang web. Lite trích xuất một trang, Pro lấy mẫu các trang chính của trang web. Giá hiện tại lấy từ get_pricing (6 credit cho Lite và 10 cho Pro vào thời điểm viết) và số dư của bạn từ get_credits. Khi số dư không đủ cho chế độ đã chọn, extract_design sẽ từ chối và báo rõ; hãy nạp credit tại Bảng giá.

Yêu cầu một trang web bạn đã trích xuất gần đây sẽ dùng lại lượt trích xuất đó thay vì bắt đầu lượt mới, và phản hồi cho biết không bị trừ credit; một trang web chỉ người khác đã trích xuất vẫn tốn giá của chế độ đó. Hãy chạy list_my_extractions trước để xem những gì đã có.

Một số trang web chỉ phản hồi khách truy cập từ một số quốc gia nhất định. Khi một lượt chạy thất bại vì lý do đó, get_extraction liệt kê các quốc gia tải được trang và agent có thể thử lại bằng extract_design kèm country. Một lượt chạy theo quốc gia tốn giá của chế độ đã chọn cộng thêm phụ phí, cả hai đều được get_pricing liệt kê.