เซิร์ฟเวอร์ MCP

เซิร์ฟเวอร์อยู่ที่ https://www.design-extractor.com/api/mcp ใช้ streamable HTTP และรับข้อมูลยืนยันตัวตนได้สองแบบ ได้แก่ การเข้าสู่ระบบด้วยบัญชีของคุณผ่าน MCP authorization flow มาตรฐาน (OAuth 2.1) หรือ API key ส่วนตัวที่ส่งเป็น Authorization: Bearer dx_... ผ่านเซิร์ฟเวอร์นี้ เอเจนต์สามารถเริ่มการดึงดีไซน์ของเว็บไซต์สาธารณะ รอให้เสร็จ อ่าน DESIGN.md ที่เสร็จแล้ว ตรวจสอบราคาและยอดคงเหลือ และดูรายการที่คุณเคยดึงดีไซน์ไว้ ผลลัพธ์ยังแสดงในการดึงดีไซน์ของฉันเหมือนการดึงดีไซน์อื่น ๆ

สำหรับ Claude Code และ Codex ยังมีปลั๊กอินที่รวมเซิร์ฟเวอร์กับ skill apply-designmd ซึ่งพาเอเจนต์ดึงดีไซน์ของเว็บไซต์อ้างอิงแล้วแมปโทเค็นไปยัง Tailwind, ตัวแปร CSS หรือไฟล์โทเค็น ซอร์สโค้ดและวิธีติดตั้งอยู่ที่ Magentix-Studio/design-extractor-plugin

claude.ai, Claude Desktop, ChatGPT, Claude Code และ Codex เชื่อมต่อได้โดยไม่ต้องใช้คีย์ ไคลเอนต์จะค้นพบการเข้าสู่ระบบจาก URL ของเซิร์ฟเวอร์ คุณอนุมัติครั้งเดียวในเบราว์เซอร์ แล้วไคลเอนต์จะถือโทเค็นที่ต่ออายุเองได้ ไม่ต้องวางอะไร ไม่ต้องหมุนเวียนคีย์

1. 1

   เพิ่ม URL ของเซิร์ฟเวอร์ในการตั้งค่า connector

   claude.ai และ Claude Desktop: Settings, Connectors, Add custom connector แล้ววาง https://www.design-extractor.com/api/mcp ส่วน ChatGPT: Settings, Connectors, Create ด้วย URL เดียวกัน

2. 2

   อนุมัติในหน้าขอความยินยอม

   ไคลเอนต์จะเปิด Design Extractor ในเบราว์เซอร์ เข้าสู่ระบบหากยังไม่ได้เข้า ตรวจสอบสิ่งที่เอเจนต์ขอ แล้วอนุมัติ การดึงดีไซน์ที่เอเจนต์เริ่มจะใช้เครดิตของคุณเหมือนการดึงดีไซน์อื่น ๆ

3. 3

   ขอให้ดึงดีไซน์ของเว็บไซต์

   แค่พิมพ์ “ดึงดีไซน์ของ stripe.com” ก็พอ เอเจนต์จะแสดงใต้เอเจนต์ที่เชื่อมต่อในหน้าบัญชีของคุณ ซึ่งคลิกเดียวก็ยกเลิกการเชื่อมต่อได้ connector ที่เพิ่มใน claude.ai จะแสดงใน Claude Code เองด้วย การอนุมัติครั้งเดียวจึงครอบคลุมทั้งสอง

Claude Code และ Codex เข้าสู่ระบบแบบเดียวกันจากเทอร์มินัล เพิ่มเซิร์ฟเวอร์โดยไม่ใส่คีย์ แล้วยืนยันตัวตนเมื่อไคลเอนต์ถาม คำสั่งที่ใช้อยู่ในหัวข้อ Claude Code และ Codex

คำสั่งเดียวลงทะเบียนเซิร์ฟเวอร์สำหรับโปรเจกต์ปัจจุบัน ไม่ต้องใช้คีย์ เพิ่ม --scope user เพื่อให้ใช้ได้ในทุกโปรเจกต์

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

จากนั้นรัน /mcp เลือก design-extractor แล้วเลือก Authenticate เข้าสู่ระบบและอนุมัติในหน้าที่เปิดขึ้น Claude Code จะเก็บโทเค็นและต่ออายุเอง

หรือติดตั้งปลั๊กอิน ซึ่งจะเพิ่มเซิร์ฟเวอร์และ skill apply-designmd เซิร์ฟเวอร์ของปลั๊กอินเข้าสู่ระบบแบบเดียวกัน หลังติดตั้งให้รัน /mcp เลือกเซิร์ฟเวอร์ของปลั๊กอิน แล้วยืนยันตัวตน

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

หากต้องการใช้ API key แทน สำหรับเครื่องที่เปิดเบราว์เซอร์ไม่ได้ ให้ส่งคีย์เป็น header และข้ามขั้นตอนยืนยันตัวตน

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

ตรวจสอบว่า /mcp แสดง design-extractor ว่าเชื่อมต่อแล้ว เครื่องมือจะมีชื่อเป็น mcp__design-extractor__extract_design และอื่น ๆ หลังจากใช้ claude mcp add และเป็น mcp__plugin_design-extractor_design-extractor__extract_design เมื่อเซิร์ฟเวอร์มาจากปลั๊กอิน

เพิ่มเซิร์ฟเวอร์โดยไม่ใส่คีย์ แล้ว Codex จะเปิดหน้าเข้าสู่ระบบทันที เข้าสู่ระบบและอนุมัติในหน้าที่เปิดขึ้น หากต้องทำซ้ำภายหลังใช้ codex mcp login design-extractor

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

หรือติดตั้งปลั๊กอินตัวเดียวกันจาก marketplace ใน Codex CLI คำสั่ง /plugins จะเปิดหน้าที่ใช้ติดตั้งและเปิดปิดรายการจาก marketplace หากเซิร์ฟเวอร์ขอให้ยืนยันตัวตน codex mcp login design-extractor จะเปิดหน้าเข้าสู่ระบบ

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

หากต้องการใช้ API key แทน ให้ระบุชื่อ environment variable ที่เก็บคีย์ไว้ และ export ในเชลล์ที่คุณใช้เปิด Codex มิฉะนั้นเซิร์ฟเวอร์จะแสดงว่าล้มเหลวและไม่มีเครื่องมือเลย

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

การประกาศแบบเดียวกันที่เขียนเองใน ~/.codex/config.toml หากต้องการใส่คีย์ลงไปโดยตรงให้ใช้ 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"

เพิ่มเซิร์ฟเวอร์ลงใน .cursor/mcp.json ในโปรเจกต์ หรือใน ~/.cursor/mcp.json สำหรับทุกโปรเจกต์ Cursor ยังรองรับ ${env:DESIGN_EXTRACTOR_API_KEY} ในค่าของ header หากคุณไม่ต้องการเก็บคีย์ไว้ในไฟล์

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

ส่งเซิร์ฟเวอร์ใน options.mcpServers พร้อม type: "http" และ header แล้วอนุญาตเครื่องมือของเซิร์ฟเวอร์ด้วย wildcard เพื่อให้เอเจนต์เรียกใช้ได้โดยไม่มีการถามสิทธิ์

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

การดึงดีไซน์ผ่านเซิร์ฟเวอร์มีค่าใช้จ่ายเท่ากับบนเว็บไซต์ทุกประการ Lite ดึงหนึ่งหน้า ส่วน Pro เก็บตัวอย่างจากหน้าสำคัญของเว็บไซต์ ราคาปัจจุบันได้จาก get_pricing (6 เครดิต สำหรับ Lite และ 10 สำหรับ Pro ณ เวลาที่เขียน) และยอดคงเหลือได้จาก get_credits เมื่อยอดคงเหลือไม่พอสำหรับระดับนั้น extract_design จะปฏิเสธและแจ้งเหตุผล เติมเครดิตได้ที่ราคา

การขอดึงดีไซน์ของเว็บไซต์ที่คุณเพิ่งดึงไปไม่นานจะนำการดึงดีไซน์เดิมของคุณกลับมาใช้แทนการเริ่มใหม่ และคำตอบจะแจ้งว่าไม่มีการเรียกเก็บเครดิต ส่วนเว็บไซต์ที่มีเพียงคนอื่นเคยดึงดีไซน์ยังคงมีค่าใช้จ่ายตามราคาของระดับ รัน list_my_extractions ก่อนเพื่อดูว่ามีอะไรอยู่แล้วบ้าง

บางเว็บไซต์ตอบสนองเฉพาะผู้เข้าชมจากบางประเทศ เมื่อการดึงดีไซน์ล้มเหลวด้วยเหตุนี้ get_extraction จะแสดงรายชื่อประเทศที่โหลดหน้านั้นได้ และเอเจนต์สามารถลองใหม่ด้วย extract_design และ country การดึงดีไซน์ผ่านประเทศอื่นมีค่าใช้จ่ายเท่ากับราคาของระดับบวกค่าธรรมเนียมเพิ่ม ซึ่ง get_pricing แสดงไว้ทั้งคู่