دليل MCP السريع

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

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

Cursor
Claude Code

يتطلب Cursor v0.43 أو أحدث

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

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

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

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

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

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

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

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

في دردشة Cursor، اطلب:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

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

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

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

يتطلب Claude Code CLI

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

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

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

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

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

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

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

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

في دردشة Claude Code، اطلب:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

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

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

يستدعي Claude Code create-new-design (الذي ينشئ الملف وينشئ الشاشات في خطوة واحدة)، ثم get-screen-image. ستشاهد التصميم المعاد في الدردشة.

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

مرجع الأدوات — توثيق الإدخال/الإخراج الكامل لجميع الأدوات الـ 19
أمثلة — سير عمل متعدد الخطوات
عملاء آخرون — Windsurf، Claude Desktop، claude.ai

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

​الخطوة 1 — إضافة الخادم

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

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

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

​الخطوة 1 — إضافة الخادم

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

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

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

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

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

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

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

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

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

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

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

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

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

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