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

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

حساب Flowstep (app.flowstep.ai)

تستخدم Claude على claude.ai أو Claude Desktop؟ Flowstep موصّل مدرج في دليل Claude، فأضفه بنقرة واحدة من claude.ai/directory/flowstep. راجع claude.ai.

Cursor
Claude Code

يتطلب Cursor الإصدار v0.43+

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

انقر على Add Flowstep to Cursor لتثبيته بنقرة واحدة، أو أنشئ ~/.cursor/mcp.json (عام) أو .cursor/mcp.json في جذر مشروعك، أو عدّلهما:

{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

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

الخطوة 2: المصادقة

افتح لوحة MCP في Cursor (Settings → MCP) وانقر Connect بجوار Flowstep. يفتح Cursor متصفحك على صفحة تسجيل الدخول إلى Flowstep. سجّل الدخول ببيانات اعتمادك في Flowstep (بالبريد الإلكتروني وكلمة المرور أو عبر Google)، ثم انقر Allow في شاشة الموافقة. يعيد المتصفح التوجيه إلى Cursor، ويخزّن Cursor الرمز تلقائيًا.

تحتاج إلى حساب Flowstep قبل المصادقة. إذا لم يكن لديك حساب، فسجّل على app.flowstep.ai أولًا.

الخطوة 3: نفّذ استدعاء أداة

في محادثة Cursor، اسأل:

“اعرض لي ملفات Flowstep الخاصة بي”

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

“أنشئ ملف Flowstep جديدًا باسم ‘Dashboard‘“

الخطوة 4: وَلِّد شاشة

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

سيستدعي Cursor الأداة ai-design-screens (التي تنشئ ملفًا جديدًا وتولّد الشاشات في خطوة واحدة)، ثم get-screen-image. سترى التصميم المُقدَّم مضمّنًا في المحادثة.

يتطلب Claude Code CLI

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

نفّذ هذا الأمر في مشروعك:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

لمشاركة الخادم مع فريقك، أضفه إلى .mcp.json في جذر مشروعك بدلًا من ذلك:

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

حقل "type": "http" مطلوب لخوادم HTTP في Claude Code. أما Cursor فلا يحتاجه.

الخطوة 2: المصادقة

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

تحتاج إلى حساب Flowstep قبل المصادقة. إذا لم يكن لديك حساب، فسجّل على app.flowstep.ai أولًا.

الخطوة 3: نفّذ استدعاء أداة

في محادثة Claude Code، اسأل:

“اعرض لي ملفات Flowstep الخاصة بي”

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

“أنشئ ملف Flowstep جديدًا باسم ‘Dashboard‘“

الخطوة 4: وَلِّد شاشة

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

سيستدعي Claude Code الأداة ai-design-screens (التي تنشئ ملفًا جديدًا وتولّد الشاشات في خطوة واحدة)، ثم get-screen-image. سترى التصميم المُقدَّم مضمّنًا في المحادثة.

تستخدم ai-design-screens وأدوات التصميم بالذكاء الاصطناعي الأخرى حصة الرسائل في Flowstep. عرض القوائم وقراءة الشاشات وعرضها مجاني. راجع حدود الاستخدام.

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

مرجع الأدوات: المرجع الكامل للمدخلات والمخرجات لجميع الأدوات الـ 22
الأمثلة: سير عمل متعددة الخطوات
عملاء آخرون: Windsurf وCodex وClaude Desktop وclaude.ai

البدء

استخدام Flowstep

الفرق والمؤسسات

التصدير والتكاملات

خادم MCP

الفوترة والخطط

الأمان والخصوصية

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

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

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

الخطوة 2: المصادقة

الخطوة 3: نفّذ استدعاء أداة

الخطوة 4: وَلِّد شاشة

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

الخطوة 2: المصادقة

الخطوة 3: نفّذ استدعاء أداة

الخطوة 4: وَلِّد شاشة

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

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

​الخطوة 1: أضف الخادم

​الخطوة 2: المصادقة

​الخطوة 3: نفّذ استدعاء أداة

​الخطوة 4: وَلِّد شاشة

​الخطوة 1: أضف الخادم

​الخطوة 2: المصادقة

​الخطوة 3: نفّذ استدعاء أداة

​الخطوة 4: وَلِّد شاشة

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

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

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

الخطوة 2: المصادقة

الخطوة 3: نفّذ استدعاء أداة

الخطوة 4: وَلِّد شاشة

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

الخطوة 2: المصادقة

الخطوة 3: نفّذ استدعاء أداة

الخطوة 4: وَلِّد شاشة

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