خادم MCP

يعمل الخادم على https://www.design-extractor.com/api/mcp ويستخدم streamable HTTP، ويقبل نوعين من بيانات الاعتماد: تسجيل الدخول بحسابك عبر مسار التفويض القياسي في MCP (OAuth 2.1)، أو مفتاح API شخصي يُرسل على شكل Authorization: Bearer dx_.... ومن خلاله يستطيع الوكيل بدء عملية استخراج لموقع عام، وانتظارها، وقراءة ملف DESIGN.md النهائي، والاطلاع على السعر ورصيدك، وعرض ما استخرجته سابقًا. وتظهر النتيجة أيضًا في عمليات الاستخراج مثل أي عملية استخراج أخرى.

ولـ Claude Code و Codex توجد أيضًا إضافة برمجية (plugin) تجمع الخادم مع مهارة apply-designmd: ترشد الوكيل خلال استخراج تصميم موقع مرجعي وربط رموزه بـ Tailwind أو متغيرات CSS أو ملف رموز. المصدر وملاحظات التثبيت في Magentix-Studio/design-extractor-plugin.

يتصل claude.ai و Claude Desktop و ChatGPT و Claude Code و Codex دون مفتاح: يكتشف العميل تسجيل الدخول من رابط الخادم، وتوافق مرة واحدة في المتصفح، ويحتفظ العميل برمز وصول يجدّده بنفسه. لا شيء لتلصقه، ولا شيء لتبدّله.

1. 1

   أضف رابط الخادم في إعدادات الموصلات

   في claude.ai و Claude Desktop: Settings، ثم Connectors، ثم Add custom connector، ثم الصق https://www.design-extractor.com/api/mcp. وفي ChatGPT: Settings، ثم Connectors، ثم Create، بالرابط نفسه.

2. 2

   وافق في صفحة الموافقة

   يفتح العميل Design Extractor في المتصفح. سجّل الدخول إن لم تكن قد فعلت، وراجع ما يطلبه الوكيل، ثم وافق. عمليات الاستخراج التي يبدؤها تستهلك رصيدك مثل أي عملية أخرى.

3. 3

   اطلب موقعًا

   تكفي عبارة «استخرج تصميم stripe.com». يظهر الوكيل ضمن «الوكلاء المرتبطون» في صفحة حسابك، حيث يمكنك فك ربطه بنقرة واحدة. والموصل الذي تضيفه في 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 برمز الوصول ويجدّده بنفسه.

أو ثبّت الإضافة البرمجية (plugin)، التي تضيف الخادم ومهارة apply-designmd. ويسجّل خادمها الدخول بالطريقة نفسها: بعد التثبيت، شغّل /mcp واختر خادم الإضافة البرمجية ثم صادِق.

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

لاستخدام مفتاح API بدلًا من ذلك، على جهاز لا يستطيع فتح متصفح، مرّره في ترويسة وتخطَّ خطوة المصادقة.

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

أو ثبّت الإضافة البرمجية نفسها من سوقها. في Codex CLI، يفتح /plugins المتصفح الذي تُثبَّت فيه عناصر السوق وتُفعَّل أو تُعطَّل؛ وإذا طلب خادمها المصادقة، يفتح codex mcp login design-extractor صفحة تسجيل الدخول.

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

لاستخدام مفتاح API بدلًا من ذلك، حدّد اسم متغير البيئة الذي يحمله وصدّره في الطرفية التي تشغّل منها 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} في قيمة الترويسة إذا كنت تفضّل إبقاء المفتاح خارج الملف.

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

مرّر الخادم في options.mcpServers مع type: "http" والترويسة، واسمح بأدواته باستخدام حرف بدل (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 كليهما.