الانتقال إلى المحتوى الرئيسي
Flowstep هي لوحة التصميم للبرمجيات التي يبنيها الوكلاء. يعرض خادم Flowstep MCP هذه اللوحة عبر Model Context Protocol، بحيث يستطيع الوكلاء الذين يستخدمهم فريقك بالفعل تصميم الشاشات، ومعاينة النتيجة المُقدَّمة، والبناء عليها، دون مغادرة المحرر أو الطرفية. تقع الشاشات التي ينشئها الوكيل عبر MCP في ملفات Flowstep نفسها التي يعمل عليها فريقك. تبقى قابلة للتحرير على اللوحة، وقابلة للمشاركة، وجاهزة للتصدير أو النسخ إلى Figma. الخادم مستضاف على https://api.flowstep.ai/mcp (نقل Streamable HTTP). لا توجد عملية محلية لتشغيلها، ولا مفتاح API لإدارته، إذ يسجّل العملاء الدخول بحسابك في Flowstep عبر OAuth.

​
ما يمكنك فعله

يوفّر الخادم 22 أداة موزعة على ثماني فئات: تستخدم الأدوات الثلاث في التصميم بالذكاء الاصطناعي حصة الرسائل نفسها التي يستخدمها تطبيق Flowstep. جميع الأدوات الأخرى مجانية. راجع حدود الاستخدام.

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

توليد الشاشات من موجّه: استدعِ ai-design-screens مع وصف. إذا حذفت fileId، فستنشئ Flowstep الملف والشاشات في خطوة واحدة. استدعِ get-screen-image لكل screenId مُعاد لعرض النتيجة مضمّنة. تصوير مكوّن React: ارفع مصدر .jsx أو .tsx باستخدام upload-attachment (mimeType: text/javascript)، ثم مرّر المرفق المُعاد إلى ai-design-screens مع رسالة تصف الشاشة. تقرأ Flowstep المصدر وتولّد تصميمًا مطابقًا. التكرار على تصميم: استدعِ ai-design-screens مع screenId واحد أو أكثر (أو معرّفات عناصر فردية) في elementIds وتعليمات حرة لتغييرها في مكانها. يمكن للاستدعاء نفسه أيضًا إضافة شاشات جديدة، فيستطيع طلب واحد أن يعدّل شاشة ويبني التالية. استخدم ai-edit-screen-variant لتطبيق إعداد جاهز، مثل سمة داكنة أو تخطيط مختلف، على شاشة كاملة. توسيع تدفق: استدعِ ai-generate-screen-variant لإضافة الشاشة التالية، أو حالة خطأ أو حالة فارغة، أو نسخة للويب أو للتابلت أو للجوال لشاشة موجودة. العمل بالكود أولًا: اقرأ أي شاشة كـ JSX باستخدام get-screen-jsx، ثم اكتب JSX الخاص بك إليها باستخدام add-screen-jsx (شاشة جديدة) أو replace-screen-jsx (استبدال شاشة موجودة). لاستخدام صورك الخاصة، ارفعها باستخدام upload-attachment وضع assetUrl المُعاد في JSX الخاص بك. هذه الأدوات مجانية. إبقاء المخرجات متوافقة مع الهوية: استخدم update-design-guidelines لتخزين ألوانك وخطوطك وقواعد مكوناتك على ملف كنص DESIGN.md. تلتزم توليدات الذكاء الاصطناعي لهذا الملف بها. اقرأها مرة أخرى باستخدام get-design-guidelines، أو امسحها باستخدام delete-design-guidelines. الاستيراد من Figma: استدعِ import-figma مع رابط إطار Figma وfileId لإحضار الإطار إلى اللوحة كعناصر قابلة للتحرير. يجب أن تكون مؤسسة الملف متصلة بـ Figma أولًا. التحقق من حصتك: استدعِ get-plan-details لمعرفة خطتك واستخدامك والرسائل المتبقية قبل دفعة من التوليدات.

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

النقل: Streamable HTTP. نموذج الجلسة: عديم الحالة (stateless)، إذ يكون كل طلب مستقلًا ولا يوجد معرّف جلسة. يدعم الخادم إصدار بروتوكول MCP 2026-07-28، ويعلن عنه في https://api.flowstep.ai/.well-known/mcp.json. تتصل العملاء التي تستخدم بروتوكول 2025-11-25 الأقدم بنقطة النهاية نفسها.

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

البدء السريع

اربط عميلًا ونفّذ أول استدعاء أداة لك.

المصادقة

كيف يعمل تسجيل الدخول عبر OAuth 2.1 PKCE والموافقة.

الأدوات

مرجع كامل للمدخلات والمخرجات لجميع الأدوات الـ 22.

الأمثلة

سير عمل متكاملة للمهام الشائعة.