> ## 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. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

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

`fileId` को छोड़ने से नई फ़ाइल स्वचालित रूप से बनती है। इसके बजाय उस फ़ाइल में स्क्रीन जोड़ने के लिए मौजूदा `fileId` पास करें।

**अपने AI असिस्टेंट के लिए प्रॉम्प्ट:**

> Flowstep डिज़ाइन जनरेट करें: एक डेवलपर टूल के लिए एक मोबाइल साइन-इन स्क्रीन, ईमेल/पासवर्ड और गूगल SSO बटन के साथ, डार्क थीम में, फिर मुझे इमेज दिखाएं।

***

## 2. React कंपोनेंट को विज़ुअलाइज़ करें

एक `.jsx` या `.tsx` फ़ाइल को एक अटैचमेंट के रूप में अपलोड करें और Flowstep से एक मेल खाने वाला डिज़ाइन जनरेट करने के लिए कहें। Flowstep स्रोत को पढ़ता है और एक स्क्रीन उत्पन्न करता है — ऐप चलाने की कोई आवश्यकता नहीं।

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

2. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

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

**अपने AI असिस्टेंट के लिए प्रॉम्प्ट:**

> `src/components/settings/ApiKeys.tsx` को पढ़ें, इसे एक अटैचमेंट के रूप में अपलोड करें, और एक Flowstep स्क्रीन जनरेट करें जो कंपोनेंट लेआउट से मेल खाती है। मुझे रेंडर की गई इमेज दिखाएं।

***

## 3. MCP-जनरेट स्क्रीन पर पुनरावृत्ति करें

`edit-design` और `regenerate-design` के लिए डिज़ाइन संदर्भ की आवश्यकता है जो केवल `designs` एरे के साथ जनरेट की गई स्क्रीन पर मौजूद है। बिना इसके जनरेट की गई स्क्रीन के लिए, समाधान यह है कि स्क्रीन को एक अटैचमेंट के रूप में रेंडर करें और इमेज के साथ `create-new-design` को कॉल करें।

```
1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

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

जिन स्क्रीन के पास डिज़ाइन संदर्भ है, उनके लिए सीधे `edit-design` को कॉल करें `message` में परिवर्तन और `targets` में स्क्रीन के साथ।

***

## 4. एक स्क्रीन को पूर्ण फ्लो में विस्तृत करें

एक मौजूदा डिज़ाइन में अनुवर्ती स्क्रीन जोड़ें।

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

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "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"` के साथ दोहराएं।

<Note>
  `operationVariant` `expand-design` के लिए एक आवश्यक पैरामीटर है। आधार स्क्रीन को भी `designs` एरे (डिज़ाइन संदर्भ) के साथ जनरेट किया जाना चाहिए — स्क्रीन के बिना इसके, उदाहरण 3 से अटैचमेंट समाधान का उपयोग करें।
</Note>

***

## 5. बैच जॉब से पहले कोटा ऑडिट करें

कई जनरेशन शुरू करने से पहले शेष क्षमता जांचें।

```
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
```

यदि `daily` कम है, तो बैच को 00:00 UTC के बाद शेड्यूल करें जब यह रीसेट होता है।