> ## 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 MCP الشائعة.

## 1. توليد شاشة ومعاينتها

سير العمل الأكثر شيوعًا: أنشئ شاشة (مع إنشاء الملف في الخطوة نفسها)، ثم اعرض النتيجة.

```
1. list-files           {}
                        → { "files": [ ... ] }          // check for an existing file first

2. ai-generate-screens  { "message": "Mobile sign-in screen for a developer tool.
                                      Email/password fields, Google SSO button, dark theme." }
                        → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                            "designGuidelinesUpdated": null }

3. get-screen-image     { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                        → [inline PNG]
```

يُنشئ `fileId` ملفًا جديدًا تلقائيًا عند حذفه. مرّر `fileId` لملف موجود لإضافة الشاشات إليه بدلًا من ذلك.

**موجّه إلى مساعدك الذكي:**

> أنشئ تصميمًا في Flowstep: شاشة تسجيل دخول للجوال لأداة مطورين، فيها حقلا البريد الإلكتروني وكلمة المرور وزر Google SSO، بالسمة الداكنة، ثم اعرض لي الصورة.

***

## 2. تصوير مكوّن React

ارفع ملف `.jsx` أو `.tsx` كمرفق، واطلب من Flowstep توليد تصميم مطابق له. تقرأ Flowstep المصدر وتنتج شاشة، دون الحاجة إلى تشغيل التطبيق.

```
1. upload-attachment    { "text": "<UTF-8 contents of ApiKeys.tsx>",
                          "mimeType": "text/javascript" }
                        → { "id": "ATT_ID", "path": "...", "type": "document",
                            "mimeType": "text/javascript" }

2. ai-generate-screens  { "message": "Generate a desktop screen that matches this React component.",
                          "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                        → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image     { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                        → [inline PNG]
```

بالنسبة إلى ملفات المصدر التي تتجاوز 64,000 حرف، استخدم `upload-attachment` مع `mimeType` و`fileName` بدلًا من ذلك، ونفّذ الأمر `uploadCommand` المُعاد. راجع [`upload-attachment`](/ar/mcp/tools#upload-attachment).

**موجّه إلى مساعدك الذكي:**

> اقرأ `src/components/settings/ApiKeys.tsx`، وارفعه كمرفق، وأنشئ شاشة Flowstep تطابق تخطيط المكوّن. اعرض لي الصورة المُقدَّمة.

***

## 3. تعديل شاشة

غيّر شاشة موجودة في مكانها باستخدام تعليمات حرة.

```
1. list-screens      { "fileId": "FILE_ID" }
                     → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-edit-screens   { "fileId": "FILE_ID",
                       "message": "Change the color scheme to dark mode and
                                   add a 'Remember me' checkbox below the password field.",
                       "elementIds": ["SCREEN_ID"] }
                     → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
```

لتغيير جزء فقط من شاشة، استدعِ `get-screen-jsx` مع `"includeIds": true` أولًا، ومرّر `data-id` للعنصر الذي تريد تغييره في `elementIds`.

للحصول على إعداد جاهز بنقرة واحدة على شاشة كاملة، استدعِ `ai-edit-screen-variant` بدلًا من ذلك، مثل `"operationVariant": "light_theme"` أو `"different_layout"`.

**موجّه إلى مساعدك الذكي:**

> في ملف Flowstep باسم "Login flow"، حوّل شاشة تسجيل الدخول إلى الوضع الداكن، وأضف خانة "Remember me" أسفل حقل كلمة المرور. اعرض لي النتيجة.

***

## 4. توسيع شاشة إلى تدفق كامل

أضف شاشات تالية إلى تصميم موجود.

```
1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]
```

كرّر الخطوة 2 باستخدام `operationVariant: "error_state"` أو `"empty_state"` لإضافة شاشات الحالات الحدّية، أو `"web_version"` أو `"tablet_version"` لمنصات أخرى.

<Note>
  `operationVariant` مطلوب في `ai-generate-screen-variant`، والأداة تقبل `screenId` واحدًا بالضبط. لإضافة شاشة ليست متغيرًا لشاشة موجودة، استخدم `ai-generate-screens` مع `fileId`.
</Note>

***

## 5. سلّم شاشة إلى قاعدة الكود، ثم أعد كتابة التغييرات إليها

اقرأ شاشة كـ JSX، وابنِ منها، ثم ادفع JSX المُعدَّل إلى اللوحة، كل ذلك دون استخدام رسائل.

```
1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]
```

الحقول المحذوفة (`name` و`fidelity` و`screenType` و`colorTheme` و`fragments`) تحتفظ بقيمها الحالية. للاحتفاظ بالأصل وإضافة نسختك بجانبه، استدعِ `add-screen-jsx` مع `screenType` و`jsx` بدلًا من `replace-screen-jsx`.

***

## 6. تحقق من حصتك قبل مهمة دفعية

تحقق من السعة المتبقية قبل بدء عدة عمليات توليد. استدعاء `get-plan-details` مجاني.

```
get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }
```

إذا كان `remaining.messages.daily` منخفضًا، فجدوِل المهمة الدفعية بعد الساعة 00:00 UTC، حين تُعاد تعيينه.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.