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

# Flowstep MCP — Codex

> ربط Flowstep بـ OpenAI Codex باستخدام بروتوكول نقل Streamable HTTP MCP.

## الإعدادات

أضف الخادم باستخدام واجهة سطر الأوامر Codex:

```bash theme={"system"}
codex mcp add flowstep --url https://api.flowstep.ai/mcp
```

أو قم بتحرير ملف الإعدادات مباشرة. استخدم الملف العام لتفعيله في كل مكان، أو ملف المشروع (المشاريع الموثوقة فقط) لإبقاءه محصوراً.

<Tabs>
  <Tab title="عام (~/.codex/config.toml)">
    ```toml theme={"system"}
    [mcp_servers.flowstep]
    url = "https://api.flowstep.ai/mcp"
    ```
  </Tab>

  <Tab title="المشروع (.codex/config.toml)">
    ```toml theme={"system"}
    [mcp_servers.flowstep]
    url = "https://api.flowstep.ai/mcp"
    ```
  </Tab>
</Tabs>

يختار Codex بروتوكول نقل Streamable HTTP تلقائياً عند تعيين `url` — لا توجد حاجة لحقل transport.

## المصادقة

قم بتشغيل:

```bash theme={"system"}
codex mcp login flowstep
```

يفتح Codex متصفحك إلى `https://api.flowstep.ai/oauth/authorize`. قم بتسجيل الدخول ببيانات اعتماد Flowstep الخاصة بك (البريد الإلكتروني/كلمة المرور أو Google SSO). يلتقط Codex رد الاتصال ويخزن التوكن.

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

## التحقق من الاتصال

```bash theme={"system"}
codex mcp list
```

يجب أن يظهر الخادم مع حالة OAuth الخاصة به. داخل جلسة Codex، اكتب `/mcp` لرؤية الخوادم المتصلة، ثم اسأل:

```
List my Flowstep files
```

إذا نجح استدعاء الأداة، فإن الاتصال يعمل.

## مثال الاستخدام

```
Create a Flowstep file called "Checkout flow", generate a mobile payment screen
with a card form and an order summary, then show me the rendered image.
```

سيستدعي Codex `create-new-design` → `get-screen-image` ويعرض النتيجة.