> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# خادم Flowstep MCP

> استخدم Flowstep كخادم MCP لإنشاء وفحص وإدارة تصاميم واجهات المستخدم مباشرة من Cursor أو Claude Code أو أي عميل متوافق مع MCP.

يعرّض Flowstep أدوات التصميم الخاصة به عبر [بروتوكول السياق النموذجي](https://modelcontextprotocol.io/)، مما يسمح لمساعدك في الذكاء الاصطناعي بإنشاء وتكرار شاشات واجهة المستخدم دون مغادرة محررك.

يتم استضافة الخادم على `https://api.flowstep.ai/mcp` (نقل HTTP قابل للتدفق). لا توجد عملية محلية للتشغيل.

## ما الذي يمكنك فعله

يعرّض الخادم 20 أداة عبر سبع فئات:

| الفئة                      | الأدوات                                                                                       |
| -------------------------- | --------------------------------------------------------------------------------------------- |
| **الملفات**                | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **الشاشات**                | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **إنشاء الذكاء الاصطناعي** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **الدردشة**                | `get-chat-history`                                                                            |
| **التصميم**                | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**                  | `import-figma`                                                                                |
| **الفوترة**                | `get-plan-details`                                                                            |

## حالات الاستخدام الشائعة

**إنشاء شاشات من موجه** — استدع `create-new-design` برسالة وصف. ينشئ Flowstep الملف والشاشات في خطوة واحدة. استدع `get-screen-image` مع المرجع `screenIds` لرؤية النتيجة مدمجة.

**تصور مكون React** — احمل ملف `.jsx` أو `.tsx` عبر `upload-attachment` (استخدم `mimeType: text/javascript`)، ثم مرر المرفق المرجع إلى `create-new-design` برسالة تصف المكون. يقرأ Flowstep المصدر وينشئ شاشة تصميم مطابقة.

**التكرار على التصميم** — استدع `edit-design` مع هدف `screenId` وتعليمات تعديله، أو `regenerate-design` لإعادة إنشاء شاشة من الصفر.

**الحفاظ على إرشادات التصميم** — استدع `get-design-guidelines` لاسترجاع قواعس النمط الحالية (الألوان والطباعة والمسافة والنبرة)، ثم استخدم `update-design-guidelines` لإبقاءها متزامنة مع تطور التصميم. يضمن تمرير الإرشادات المتسقة إلى `create-new-design` أو `edit-design` أن تبقى كل شاشة تم إنشاؤها على علامتك التجارية. استخدم `delete-design-guidelines` لإعادة تعيينها بالكامل.

**الاستيراد من Figma** — استدع `import-figma` برابط إطار Figma و `fileId` لإحضار الإطار إلى ملف Flowstep كعناصر قابلة للتحرير. يجب أن تكون مؤسسة الملف متصلة بـ Figma أولاً.

**تدقيق الحصة** — استدع `get-plan-details` لرؤية الحد الأقصى المتبقي يومياً وشهرياً قبل بدء دفعة من الأجيال.

## نقطة النهاية

```
https://api.flowstep.ai/mcp
```

النقل: HTTP قابل للتدفق. نموذج الجلسة: بدون حالة (كل طلب مستقل، لا معرف جلسة).

## الخطوات التالية

<CardGroup cols={2}>
  <Card title="البدء السريع" icon="bolt" href="/ar/mcp/quickstart">
    أول استدعاء أداة في أقل من 5 دقائق مع Cursor.
  </Card>

  <Card title="المصادقة" icon="lock" href="/ar/mcp/authentication">
    كيفية عمل OAuth 2.1 PKCE وكيفية إصدار الرموز.
  </Card>

  <Card title="الأدوات" icon="wrench" href="/ar/mcp/tools">
    مرجع المدخلات/المخرجات الكامل لجميع 20 أداة.
  </Card>

  <Card title="الأمثلة" icon="code" href="/ar/mcp/examples">
    سير العمل من البداية إلى النهاية للمهام الشائعة.
  </Card>
</CardGroup>