> ## 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.

# البدء السريع مع MCP

> وصل Flowstep إلى محرر الذكاء الاصطناعي وشغل أول استدعاء أداة.

## المتطلبات الأساسية

* حساب Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **يتطلب Cursor v0.43+**

    ## الخطوة 1 — أضف الخادم

    أنشئ أو حرّر `~/.cursor/mcp.json` (عام) أو `.cursor/mcp.json` في جذر المشروع:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    أعد تشغيل Cursor بعد الحفظ.

    ## الخطوة 2 — المصادقة

    افتح لوحة Cursor MCP (Settings → MCP) واضغط **Connect** بجانب Flowstep. يفتح Cursor المتصفح إلى تسجيل دخول Flowstep OAuth. سجل دخولك ببيانات اعتماد Flowstep (بريد إلكتروني/كلمة مرور أو Google). يعيد المتصفح التوجيه ويخزن Cursor الرمز تلقائياً.

    <Note>
      تحتاج إلى حساب Flowstep قبل المصادقة. إذا لم يكن لديك واحد، قم بالتسجيل على [app.flowstep.ai](https://app.flowstep.ai) أولاً.
    </Note>

    ## الخطوة 3 — شغل استدعاء أداة

    في دردشة Cursor، اسأل:

    > "قائمة ملفات Flowstep الخاصة بي"

    يستدعي Cursor `list-files` ويعيد قائمة الملفات. إذا كانت الاستجابة فارغة، أنشئ ملفاً أولاً:

    > "أنشئ ملف Flowstep جديد يسمى 'لوحة المعلومات'"

    ## الخطوة 4 — إنشاء شاشة

    ```
    أنشئ ملف Flowstep جديد يسمى "تدفق تسجيل الدخول"، ثم أنشئ شاشة تسجيل دخول محمولة
    لتطبيق SaaS مع حقول البريد الإلكتروني وكلمة المرور وزر تسجيل دخول Google.
    بعد انتهاؤه، أخبرني بالصورة.
    ```

    يستدعي Cursor `create-new-design` (الذي ينشئ الملف وينشئ الشاشات في خطوة واحدة)، ثم `get-screen-image`. ستشاهد التصميم المعروض مدمجاً في الدردشة.
  </Tab>

  <Tab title="Claude Code">
    **يتطلب CLI Claude Code**

    ## الخطوة 1 — أضف الخادم

    أنشئ `.mcp.json` في جذر المشروع (محدد النطاق المشروع) أو `~/.claude/mcp.json` (عام):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      حقل `"type": "http"` مطلوب لخوادم Claude Code HTTP. Cursor لا يحتاجها.
    </Note>

    ## الخطوة 2 — المصادقة

    شغّل أي أداة Flowstep من دردشة Claude Code. عند الاستخدام الأول، يفتح Claude Code المتصفح إلى تسجيل دخول Flowstep OAuth. سجل دخولك ببيانات اعتماد Flowstep (بريد إلكتروني/كلمة مرور أو Google). يعيد المتصفح التوجيه ويتم تخزين الرمز تلقائياً.

    <Note>
      تحتاج إلى حساب Flowstep قبل المصادقة. إذا لم يكن لديك واحد، قم بالتسجيل على [app.flowstep.ai](https://app.flowstep.ai) أولاً.
    </Note>

    ## الخطوة 3 — شغّل استدعاء أداة

    في دردشة Claude Code، اسأل:

    > "قائمة ملفات Flowstep الخاصة بي"

    يستدعي Claude Code `list-files` ويعيد قائمة الملفات. إذا كانت الاستجابة فارغة، أنشئ ملفاً أولاً:

    > "أنشئ ملف Flowstep جديد يسمى 'لوحة المعلومات'"

    ## الخطوة 4 — إنشاء شاشة

    ```
    أنشئ ملف Flowstep جديد يسمى "تدفق تسجيل الدخول"، ثم أنشئ شاشة تسجيل دخول محمولة
    لتطبيق SaaS مع حقول البريد الإلكتروني وكلمة المرور وزر تسجيل دخول Google.
    بعد انتهاؤه، أخبرني بالصورة.
    ```

    يستدعي Claude Code `create-new-design` (الذي ينشئ الملف وينشئ الشاشات في خطوة واحدة)، ثم `get-screen-image`. ستشاهد التصميم المعروض مدمجاً في الدردشة.
  </Tab>
</Tabs>

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

* [مرجع الأدوات](/ar/mcp/tools) — وثائق المدخلات/المخرجات الكاملة لجميع 20 أداة
* [الأمثلة](/ar/mcp/examples) — سير عمل متعدد الخطوات
* [عملاء آخرون](/ar/mcp/clients/claude-code) — Windsurf و Claude Desktop و claude.ai