MCP उदाहरण

1. स्क्रीन जनरेट करें और पूर्वावलोकन करें

सबसे आम वर्कफ़्लो: एक स्क्रीन जनरेट करें (उसी चरण में फ़ाइल भी बनाते हुए), फिर परिणाम देखें।

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

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

fileId छोड़ने पर अपने-आप नई फ़ाइल बनती है। मौजूदा फ़ाइल में स्क्रीन जोड़ने के लिए उसका fileId पास करें। AI असिस्टेंट को प्रॉम्प्ट:

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

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

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

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

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

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

64,000 अक्षरों से लंबी सोर्स फ़ाइलों के लिए, इसके बजाय mimeType और fileName के साथ upload-attachment इस्तेमाल करें और लौटाई गई uploadCommand चलाएँ। देखें upload-attachment. AI असिस्टेंट को प्रॉम्प्ट:

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

3. स्क्रीन पर बार-बार सुधार करें

मुक्त-रूप निर्देशों के साथ मौजूदा स्क्रीन को उसी जगह बदलें, और उसी कॉल में उससे मेल खाती नई स्क्रीन जोड़ें।

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

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

screenIds में वे सभी स्क्रीन शामिल होती हैं जो कॉल ने बनाईं या बदलीं, इसलिए हर एक के लिए get-screen-image एक बार कॉल करें। सिर्फ़ मौजूदा स्क्रीन एडिट करने के लिए, मैसेज का आखिरी वाक्य छोड़ दें। पूरी स्क्रीन के बजाय उसका केवल एक हिस्सा बदलने के लिए, पहले "includeIds": true के साथ get-screen-jsx कॉल करें और जिस एलिमेंट को बदलना है उसका data-id elementIds में पास करें। पूरी स्क्रीन पर एक-क्लिक प्रीसेट के लिए, ai-edit-screen-variant कॉल करें, जैसे "operationVariant": "light_theme" या "different_layout"। AI असिस्टेंट को प्रॉम्प्ट:

मेरी “Login flow” Flowstep फ़ाइल में, साइन-इन स्क्रीन को डार्क मोड में बदलें, पासवर्ड फ़ील्ड के नीचे “Remember me” चेकबॉक्स जोड़ें, और उससे मेल खाती forgot-password स्क्रीन बनाएँ। मुझे परिणाम दिखाएँ।

4. स्क्रीन को पूरे फ़्लो में बढ़ाएँ

मौजूदा डिज़ाइन में अगली स्क्रीनें जोड़ें।

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

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "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" के साथ दोहराएँ, या अन्य प्लेटफ़ॉर्म के लिए "web_version" या "tablet_version" के साथ।

ai-generate-screen-variant के लिए operationVariant आवश्यक है, और टूल ठीक एक screenId लेता है। ऐसी स्क्रीन जोड़ने के लिए जो मौजूदा स्क्रीन का वेरिएंट न हो, fileId के साथ ai-design-screens इस्तेमाल करें।

5. स्क्रीन को अपने कोडबेस को सौंपें, फिर बदलाव वापस लिखें

स्क्रीन को JSX के रूप में पढ़ें, उससे बनाएँ, और अपना संपादित JSX वापस कैनवस पर भेजें, यह सब बिना मैसेज इस्तेमाल किए।

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

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

छोड़े गए फ़ील्ड (name, fidelity, screenType, colorTheme, fragments) अपनी मौजूदा वैल्यू रखते हैं। मूल को रखकर अपना संस्करण उसके साथ जोड़ने के लिए, replace-screen-jsx की जगह screenType और jsx के साथ add-screen-jsx कॉल करें। अपनी इमेज स्क्रीन में दिखाने के लिए, उसे upload-attachment से अपलोड करें और लौटे assetUrl को अपने JSX में img src में रखें। देखें JSX में इमेज.

6. बैच जॉब से पहले अपनी उपयोग सीमा जाँचें

कई जनरेशन शुरू करने से पहले बची हुई क्षमता जाँचें। get-plan-details कॉल करना मुफ़्त है।

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

अगर remaining.messages.daily कम है, तो बैच को 00:00 UTC के बाद के लिए शेड्यूल करें, जब वह रीसेट होता है।

शुरुआत करें

Flowstep का उपयोग

टीमें और संगठन

निर्यात और इंटीग्रेशन

MCP सर्वर

बिलिंग और प्लान

सुरक्षा और गोपनीयता

MCP उदाहरण

1. स्क्रीन जनरेट करें और पूर्वावलोकन करें

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

3. स्क्रीन पर बार-बार सुधार करें

4. स्क्रीन को पूरे फ़्लो में बढ़ाएँ

5. स्क्रीन को अपने कोडबेस को सौंपें, फिर बदलाव वापस लिखें

6. बैच जॉब से पहले अपनी उपयोग सीमा जाँचें

​1. स्क्रीन जनरेट करें और पूर्वावलोकन करें

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

​3. स्क्रीन पर बार-बार सुधार करें

​4. स्क्रीन को पूरे फ़्लो में बढ़ाएँ

​5. स्क्रीन को अपने कोडबेस को सौंपें, फिर बदलाव वापस लिखें

​6. बैच जॉब से पहले अपनी उपयोग सीमा जाँचें

1. स्क्रीन जनरेट करें और पूर्वावलोकन करें

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

3. स्क्रीन पर बार-बार सुधार करें

4. स्क्रीन को पूरे फ़्लो में बढ़ाएँ

5. स्क्रीन को अपने कोडबेस को सौंपें, फिर बदलाव वापस लिखें

6. बैच जॉब से पहले अपनी उपयोग सीमा जाँचें