MCP टूल्स संदर्भ

सफल होने पर, get-screen-image को छोड़कर हर टूल अपना परिणाम दो बार लौटाता है: structuredContent के रूप में (जो टूल के प्रकाशित आउटपुट स्कीमा के विरुद्ध मान्य होता है), और उसी ऑब्जेक्ट को एक टेक्स्ट ब्लॉक में सीरियलाइज़ करके, { type: "text", text: "<json-string>" } के रूप में, उन क्लाइंट्स के लिए जो structured content नहीं पढ़ते। get-screen-image केवल एक MCP इमेज ब्लॉक लौटाता है: { type: "image", data: "<base64>", mimeType: "image/png" }। विफल होने पर isError: true सेट होता है और टेक्स्ट ब्लॉक में एक छोटा error मैसेज होता है। जिन errors पर आप कार्रवाई कर सकते हैं, जैसे delete में नाम का मेल न खाना, अमान्य Figma लिंक, अमान्य डिज़ाइन गाइडलाइन्स, attachment की समस्या, या जनरेशन टाइम आउट, वे बताते हैं कि क्या ठीक करना है। बाकी विफलताएँ Failed to list files जैसा सामान्य मैसेज लौटाती हैं।

मूल्य निर्धारण: तीन AI डिज़ाइन टूल्स, यानी ai-design-screens, ai-generate-screen-variant, और ai-edit-screen-variant, Flowstep ऐप की उसी मैसेज सीमा से उपयोग होते हैं। बाकी सभी टूल्स मुफ़्त हैं। देखें Usage limits.

हर टूल MCP annotations भी प्रकाशित करता है ताकि आपका क्लाइंट जान सके कि वह क्या करता है। delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens, और ai-edit-screen-variant को destructive चिह्नित किया गया है, क्योंकि वे मौजूदा सामग्री हटाते या ओवरराइट करते हैं।

फ़ाइल टूल्स

`list-files`

आपकी Flowstep फ़ाइलों की metadata सूचीबद्ध करें। यह पता लगाने के लिए पहले इसे कॉल करें कि कोई संबंधित फ़ाइल पहले से मौजूद है या नहीं। इससे कोई स्क्रीन सामग्री नहीं मिलती। उसके लिए get-screen-image या get-screen-jsx इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	डिफ़ॉल्ट	विवरण
`orderByCreation`	`boolean`	`true`	नई फ़ाइलें पहले, `created_at` के अनुसार (`true`), या `updated_at` के अनुसार (`false`)। हाल में एडिट की गई फ़ाइलें खोजने के लिए `false` इस्तेमाल करें
`limit`	`integer` (1–100)	`20`	अधिकतम फ़ाइलें जो लौटाई जाएँगी। पूरा पेज भरा होने का मतलब है कि और फ़ाइलें हो सकती हैं
`offset`	`integer` (≥0)	`0`	छोड़ी जाने वाली फ़ाइलें। अगला पेज `offset + limit` पर है

आउटपुट: { files }।

{
  "files": [
    {
      "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
      "name": "Dashboard redesign",
      "created_at": "2026-04-30T15:02:13.120152+00:00",
      "updated_at": "2026-04-30T15:02:13.120152+00:00",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner: true अगर फ़ाइल आपने बनाई है।
shared_with_me: true अगर फ़ाइल सीधे आपके साथ शेयर की गई थी, न कि केवल आपके संगठन के माध्यम से।
url: फ़ाइल को Flowstep एडिटर में खोलता है।

`get-file`

एक फ़ाइल की metadata प्राप्त करें। फ़ाइल की सामग्री जानबूझकर शामिल नहीं है। स्क्रीन जाँचने के लिए get-screen-image या get-screen-jsx इस्तेमाल करें, और जुड़ी गाइडलाइन्स पाने के लिए get-design-guidelines। अगर फ़ाइल के लिए आपका कोई लंबित invite है, तो get-file कॉल करने से वह स्वीकार हो जाता है। इनपुट

पैरामीटर	प्रकार	विवरण
`id`	`uuid`	फ़ाइल ID

आउटपुट: { file, user_access_level }।

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level: private, read, या write।
visibility: private, member, या public।
user_access_level: फ़ाइल तक आपकी पहुँच: read या write।

`create-file`

बिना किसी स्क्रीन की एक खाली Flowstep फ़ाइल बनाएँ। एक चरण में फ़ाइल और स्क्रीन दोनों बनाने के लिए, इसके बजाय fileId के बिना ai-design-screens कॉल करें। कोड-फ़र्स्ट वर्कफ़्लो के लिए create-file इस्तेमाल करें, और उसके बाद add-screen-jsx। इनपुट

पैरामीटर	प्रकार	विवरण
`name`	`string` (न्यूनतम 1)	नई फ़ाइल का प्रदर्शन नाम

आउटपुट: { file, user_access_level }, get-file के समान संरचना में। owner हमेशा true होता है और user_access_level हमेशा write। आगे के टूल कॉल में लौटाए गए file.id को fileId के रूप में इस्तेमाल करें।

`update-file`

फ़ाइल का नाम बदलें। इनपुट

पैरामीटर	प्रकार	विवरण
`id`	`uuid`	फ़ाइल ID
`name`	`string` (न्यूनतम 1)	नया प्रदर्शन नाम

आउटपुट: { file, user_access_level }, get-file के समान संरचना में।

`delete-file`

फ़ाइल को स्थायी रूप से हटाएँ। हटाने से पहले आपके दिए name की जाँच फ़ाइल के वर्तमान प्रदर्शन नाम से होती है। अगर वह मेल नहीं खाता, तो हटाना रद्द हो जाता है। इससे गलत फ़ाइल हटने से बचाव होता है। एजेंट्स को निर्देश दिया गया है कि वे पहले आपसे पुष्टि करें। इनपुट

पैरामीटर	प्रकार	विवरण
`id`	`uuid`	फ़ाइल ID
`name`	`string`	फ़ाइल का वर्तमान प्रदर्शन नाम। मेल खाना चाहिए, वरना हटाना रद्द होगा

आउटपुट: { "deleted": true }

यह अपरिवर्तनीय है। फ़ाइल की सभी स्क्रीन हट जाती हैं।

स्क्रीन टूल्स

`list-screens`

किसी फ़ाइल की स्क्रीन कैनवस क्रम में सूचीबद्ध करें। फ़ाइल में पहले से क्या है, यह देखने के लिए list-files के बाद इसे कॉल करें। लौटाए गए screenId मानों को अन्य स्क्रीन टूल्स और AI डिज़ाइन टूल्स के साथ इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID

आउटपुट: { screens }।

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt: स्क्रीन के लिए आखिरी जनरेशन प्रॉम्प्ट, या अगर वह कभी जनरेट नहीं हुई तो खाली स्ट्रिंग (जैसे add-screen-jsx से जोड़ी गई स्क्रीन)।
fidelity: lofi, hifi, या ui।

`get-screen-image`

स्क्रीन को PNG में रेंडर करें और उसे इनलाइन इमेज के रूप में लौटाएँ। इसके लिए ऐसा क्लाइंट चाहिए जो इमेज कंटेंट ब्लॉक सपोर्ट करता हो। हर screenId के लिए इसे एक बार कॉल करें, जो किसी AI डिज़ाइन टूल, add-screen-jsx, replace-screen-jsx, या import-figma से लौटाया गया हो। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID
`screenId`	`uuid`	`list-screens` से या किसी डिज़ाइन टूल द्वारा लौटाए गए `screenIds` array से एक `screenId`

आउटपुट: MCP इमेज कंटेंट ब्लॉक (image/png)। data PNG बाइट्स का standard base64 है, data URI नहीं। इस टूल के लिए structuredContent नहीं है।

`get-screen-jsx`

स्क्रीन को उसकी metadata के साथ JSX के रूप में प्राप्त करें, ताकि आप उससे अपने कोडबेस में बना सकें, या उसे एडिट करके replace-screen-jsx से वापस लिख सकें। विज़ुअल पूर्वावलोकन के लिए get-screen-image इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	डिफ़ॉल्ट	विवरण
`fileId`	`uuid`	—	फ़ाइल ID
`screenId`	`uuid`	—	`list-screens` से या किसी डिज़ाइन टूल द्वारा लौटाए गए `screenIds` array से एक `screenId`
`includeIds`	`boolean`	`false`	`jsx` में एलिमेंट्स पर `data-id` attribute शामिल करें। इसकी ज़रूरत तब है जब आपको एलिमेंट ID `ai-design-screens` को `elementIds` के रूप में पास करनी हों, चाहे एडिट के लिए या विज़ुअल संदर्भ के रूप में

आउटपुट: { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }।

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx: केवल मार्कअप। data-id attributes तभी शामिल होते हैं जब includeIds true हो।
prompt: आखिरी जनरेशन प्रॉम्प्ट, या अगर स्क्रीन कभी जनरेट नहीं हुई तो खाली स्ट्रिंग।
fragments: स्क्रीन पर संग्रहीत साझा क्रोम, जैसे nav bar, header, या logo, { purpose, markup } objects के रूप में। कोई न हो तो खाली। इन्हें replace-screen-jsx को वापस पास करें ताकि वे बने रहें या अपडेट हों।

fidelity, screenType, और colorTheme की वैल्यूज़ के लिए स्क्रीन फ़ील्ड मान देखें।

`add-screen-jsx`

आपके लिखे JSX से फ़ाइल में एक नई स्क्रीन जोड़ें। यह कोड-फ़र्स्ट तरीका है और मुफ़्त है। जब आप चाहें कि Flowstep का AI स्क्रीन डिज़ाइन करे, तब ai-design-screens इस्तेमाल करें। add-screen-jsx हमेशा एक नई स्क्रीन बनाता है। किसी मौजूदा स्क्रीन को ओवरराइट करने के लिए replace-screen-jsx इस्तेमाल करें। अपनी अपलोड की गई इमेज दिखाने के लिए, JSX में इमेज देखें। जब नई स्क्रीन किसी मौजूदा स्क्रीन पर आधारित हो, तो name, fidelity, screenType, colorTheme, और jsx के लिए get-screen-jsx (includeIds के बिना) से शुरू करें, फिर जो अलग होना चाहिए उसे बदलें। इनपुट

पैरामीटर	प्रकार	डिफ़ॉल्ट	विवरण
`fileId`	`uuid`	—	फ़ाइल ID
`name`	`string` (1–100 अक्षर)	—	वैकल्पिक प्रदर्शन नाम। छोड़ने पर स्क्रीन का नाम अपने-आप `Screen N` रखा जाता है
`fidelity`	`string`	`"ui"`	स्क्रीन की fidelity
`screenType`	`string`	—	आवश्यक: वह डिवाइस या व्यूपोर्ट जिसके लिए स्क्रीन डिज़ाइन की गई है
`colorTheme`	`string`	`"default"`	रंग थीम
`jsx`	`string`	—	केवल JSX मार्कअप। कोई भी `data-id` attributes अनदेखे किए जाते हैं, नई स्क्रीन को नई एलिमेंट ID मिलती हैं

आउटपुट: { fileId, screenId }। परिणाम देखने के लिए screenId के साथ get-screen-image कॉल करें।

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf"
}

`replace-screen-jsx`

अपने लिखे JSX से मौजूदा स्क्रीन को ओवरराइट करें। स्क्रीन अपनी screenId और कैनवस पर अपनी जगह रखती है। नेस्टेड एलिमेंट्स को नई ID मिलती हैं। यह कोड-फ़र्स्ट तरीका है और मुफ़्त है। AI बदलावों के लिए ai-design-screens या ai-edit-screen-variant इस्तेमाल करें, और नई स्क्रीन बनाने के लिए add-screen-jsx। get-screen-jsx (includeIds के बिना) से शुरू करें, फिर जो अलग होना चाहिए उसे बदलें। अपनी अपलोड की गई इमेज दिखाने के लिए, JSX में इमेज देखें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID
`screenId`	`uuid`	जिस स्क्रीन को ओवरराइट करना है
`jsx`	`string`	केवल JSX मार्कअप। कोई भी `data-id` attributes अनदेखे किए जाते हैं
`name`	`string` (1–100 अक्षर)	वैकल्पिक। छोड़ने पर वर्तमान नाम बना रहता है
`fidelity`	`string`	वैकल्पिक। छोड़ने पर वर्तमान fidelity बनी रहती है
`screenType`	`string`	वैकल्पिक। छोड़ने पर वर्तमान screen type बना रहता है
`colorTheme`	`string`	वैकल्पिक। छोड़ने पर वर्तमान रंग थीम बनी रहती है
`fragments`	`{ purpose, markup }[]`	वैकल्पिक। `get-screen-jsx` से मिला साझा क्रोम। छोड़ने पर मौजूदा fragments बने रहते हैं, या हटाने के लिए `[]` पास करें

आउटपुट: { fileId, screenId }। परिणाम देखने के लिए screenId के साथ get-screen-image कॉल करें।

यह स्क्रीन की सामग्री को उसी जगह बदल देता है।

`rename-screen`

स्क्रीन का कैनवस लेबल बदलें, यानी वह नाम जो list-screens में और एडिटर में दिखता है। यह केवल लेबल बदलता है, स्क्रीन का लेआउट, आकार या सामग्री नहीं। उनके लिए ai-design-screens इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID
`screenId`	`uuid`	`list-screens` द्वारा लौटाया गया `screenId`
`name`	`string` (1–100 अक्षर)	नया स्क्रीन नाम। शुरू और अंत के खाली स्थान हटा दिए जाते हैं

आउटपुट: { screenId, name }।

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

`delete-screen`

फ़ाइल से स्क्रीन को स्थायी रूप से हटाएँ। आपके दिए name की जाँच स्क्रीन के वर्तमान प्रदर्शन नाम से होती है। अगर वह मेल नहीं खाता, तो हटाना रद्द हो जाता है। एजेंट्स को निर्देश दिया गया है कि वे पहले आपसे पुष्टि करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID
`screenId`	`uuid`	जिस स्क्रीन को हटाना है
`name`	`string`	स्क्रीन का वर्तमान प्रदर्शन नाम। मेल खाना चाहिए, वरना हटाना रद्द होगा

आउटपुट: { "deleted": true }

JSX में इमेज

add-screen-jsx और replace-screen-jsx इमेज को img के src में, या className में bg-[url(...)] के साथ बैकग्राउंड के रूप में स्वीकार करते हैं। alt टेक्स्ट लिखें, और हर इमेज का आकार उसके उद्देश्य के अनुसार तय करें। अपनी इमेज रखने के लिए:

उसे upload-attachment से मोड A (mimeType + fileName) में अपलोड करें, और लौटे uploadCommand को चलाएँ।
अगर जवाब का type "image" है, तो उसका assetUrl जैसा लौटाया गया है वैसा ही img src या bg-[url(assetUrl)] में चिपकाएँ।

बाकी सभी इमेज URLs को वैसा ही रखें जैसा get-screen-jsx ने लौटाया था। path, signedUrl, या uploadCommand को src में न डालें।

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

स्क्रीन फ़ील्ड मान

get-screen-jsx ये मान लौटाता है, और add-screen-jsx तथा replace-screen-jsx इन्हें स्वीकार करते हैं:

फ़ील्ड	मान
`fidelity`	`lofi`, `hifi`, `ui`
`screenType`	`web`, `desktop`, `desktop-large`, `desktop-medium`, `desktop-small`, `tablet`, `ipad-tablet-horizontal`, `ipad-tablet-vertical`, `android-tablet-horizontal`, `android-tablet-vertical`, `mobile_ios`, `mobile_android`, `iphone-vertical`, `iphone-horizontal`, `iphone-x-vertical`, `iphone-x-horizontal`, `android-vertical`, `android-horizontal`, `android-small-vertical`, `android-small-horizontal`
`colorTheme`	`default`, `defaultDark`, `blue`, `blueDark`, `ice`, `iceDark`, `grayscale`, `grayscaleDark`, `green`, `greenDark`, `orange`, `orangeDark`, `red`, `redDark`, `rose`, `roseDark`, `violet`, `violetDark`, `yellow`, `yellowDark`

डिज़ाइन गाइडलाइन्स टूल्स

डिज़ाइन गाइडलाइन्स किसी फ़ाइल पर संग्रहीत DESIGN.md टेक्स्ट होती हैं। सेट होने पर, वे उस फ़ाइल की हर AI जनरेशन में डाली जाती हैं। देखें डिज़ाइन गाइडलाइन्स।

`get-design-guidelines`

किसी फ़ाइल से जुड़ी डिज़ाइन गाइडलाइन्स प्राप्त करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID

आउटपुट: { guidelines }।

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter"
}

अगर कोई गाइडलाइन्स सेट नहीं हुईं, तो guidelines null होता है।

`update-design-guidelines`

किसी फ़ाइल के लिए डिज़ाइन गाइडलाइन्स सेट करें या बदलें। गाइडलाइन्स को Google के DESIGN.md फ़ॉर्मेट में सादे स्ट्रिंग के रूप में पास करें, ऑब्जेक्ट या JSON के रूप में नहीं। अगर आप किसी फ़ाइल से पढ़ रहे हैं, तो उस फ़ाइल का टेक्स्ट पास करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID
`designGuidelines`	`string` (न्यूनतम 1)	गाइडलाइन्स का रॉ टेक्स्ट। सादा स्ट्रिंग होना चाहिए, JSON-encoded नहीं

सत्यापन नियम

Frontmatter सही तरह से खुलना और बंद होना चाहिए
Frontmatter की लाइनें वैध block-style YAML होनी चाहिए
Markdown बॉडी में डुप्लिकेट ## सेक्शन हेडिंग नहीं होने चाहिए

सत्यापन विफल होने पर, कॉल एक error लौटाती है जो Invalid design guidelines: से शुरू होता है। आउटपुट: { updated, warnings? }।

{ "updated": true, "warnings": ["…"] }

warnings उन soft-validation समस्याओं की सूची है (जैसे अज्ञात keys, गैर-hex रंग) जो स्वीकार कर ली गईं पर AI द्वारा अनदेखी हो सकती हैं। ये आपको दिखाई जानी चाहिए। कोई न हो तो यह फ़ील्ड छोड़ दिया जाता है।

`delete-design-guidelines`

किसी फ़ाइल की डिज़ाइन गाइडलाइन्स साफ़ करें। जो गाइडलाइन्स मौजूद नहीं हैं उन्हें हटाने का कोई असर नहीं होता। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID

आउटपुट: { "deleted": true }

चैट टूल्स

`get-chat-history`

किसी फ़ाइल से जुड़ी डिज़ाइन बातचीत प्राप्त करें। यह फ़ाइल की Flowstep चैट है, आपके MCP क्लाइंट की बातचीत नहीं। फ़ाइल पर पिछला काम फिर से शुरू करने के लिए इसे इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	फ़ाइल ID

आउटपुट: { messages }। फ़ाइल पर आपकी कोई डिज़ाइन बातचीत न हो तो messages खाली होता है। हर मैसेज में type ("request" या "response"), author ("human" या "ai"), और content_type होता है। Response मैसेज "text", "summary", या "followup" उपयोग करते हैं।

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }]
    }
  ]
}

अटैचमेंट टूल्स

`upload-attachment`

ai-design-screens में attachment के रूप में उपयोग करने के लिए एक संदर्भ फ़ाइल, या add-screen-jsx या replace-screen-jsx के साथ आपके अपने JSX में रखने के लिए एक इमेज अपलोड करें। ai-generate-screen-variant और ai-edit-screen-variant attachments नहीं लेते। फ़ाइल के bytes कभी मॉडल से होकर नहीं गुज़रते, और सर्वर आपकी ओर से URLs कभी नहीं लाता। किसी वेबपेज का संदर्भ देने के लिए, उसका URL ai-design-screens के message में शामिल करें। दो मोड हैं। एक ही इस्तेमाल करें, दोनों को मिलाएँ नहीं। मोड A: फ़ाइलें और इमेज (mimeType + fileName) किसी भी इमेज, PDF, या बड़ी टेक्स्ट फ़ाइल के लिए तीन चरणों वाला अनिवार्य फ़्लो:

केवल mimeType और fileName के साथ upload-attachment कॉल करें (जैसे image/png और dog.png)। जवाब एक तैयार अपलोड है, संग्रहीत फ़ाइल नहीं:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

uploadCommand में LOCAL_FILE_PATH को अपनी फ़ाइल के absolute path से बदलें, और वह सटीक command अपने शेल में चलाएँ। उसका exit code 0 होना चाहिए। signedUrl का टोकन केवल इस एक अपलोड को अधिकृत करता है। यह चरण छोड़ने पर storage खाली रहता है और डिज़ाइन टूल का preflight check विफल हो जाता है।
केवल { id, path, type } को ai-design-screens के attachments array में पास करें, signedUrl, uploadCommand, या nextStep नहीं। अपनी JSX में इमेज रखने के लिए, assetUrl को add-screen-jsx या replace-screen-jsx को पास किए JSX के img src या bg-[url(...)] में डालें। देखें JSX में इमेज।

किसी रिमोट फ़ाइल को attach करने के लिए, पहले उसे अपने लोकल path पर डाउनलोड करें (उदाहरण के लिए curl से), फिर वही तीन चरण अपनाएँ। upload-attachment को कभी URL न दें।

पैरामीटर	प्रकार	विवरण
`mimeType`	enum	फ़ाइल का MIME type। इनमें से एक: `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`। `.jsx`, `.tsx`, `.js`, `.ts` फ़ाइलों के लिए `text/javascript` इस्तेमाल करें
`fileName`	`string` (न्यूनतम 1)	एक्सटेंशन सहित मूल फ़ाइल नाम, जैसे `cat.png` या `design.md`

मोड B: छोटा टेक्स्ट (text + mimeType) ऐसा टेक्स्ट अपलोड करें जो पहले से संदर्भ में है। इसके लिए शेल command की ज़रूरत नहीं। जवाब सीधे उपयोग के लिए तैयार है:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "document",
  "mimeType": "text/plain"
}

पैरामीटर	प्रकार	विवरण
`text`	`string` (अधिकतम 64,000 अक्षर)	रॉ टेक्स्ट सामग्री। केवल टेक्स्ट फ़ाइलों के लिए, इमेज या PDF के लिए नहीं। 64,000 अक्षरों से लंबी है? तो मोड A इस्तेमाल करें
`mimeType`	enum	इनमें से एक: `text/markdown`, `text/plain`, `text/javascript`

ai-design-screens के attachments array में लौटाए गए { id, path, type } पास करें। दोनों मोड मिलाकर अधिकतम फ़ाइल आकार 3 MB है, और PDF 100 पेज तक सीमित हैं। आउटपुट: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }।

type: इमेज फ़ाइलों के लिए "image", और PDF व टेक्स्ट फ़ाइलों के लिए "document"।
assetUrl: अपलोड की गई फ़ाइल का URL, जो दोनों मोड में लौटता है। इसे add-screen-jsx या replace-screen-jsx के JSX में केवल तब इस्तेमाल करें जब type "image" हो, और केवल मोड A का uploadCommand चलने के बाद।
signedUrl, uploadCommand, nextStep: केवल मोड A में सेट होते हैं। इन्हें डिज़ाइन टूल्स में पास न करें।

Figma टूल्स

`import-figma`

Figma फ़्रेम को Flowstep फ़ाइल में उसके कैनवस पर एडिट करने योग्य एलिमेंट्स के रूप में इंपोर्ट करें। हर इंपोर्ट एक नई स्क्रीन जोड़ता है। एक ही फ़्रेम दो बार इंपोर्ट करने से आपको दो स्क्रीन मिलती हैं, इसलिए अगर आप किसी को बदलना चाहते थे तो पुरानी को delete-screen से हटाएँ। फ़ाइल के संगठन में Flowstep सेटिंग्स में Figma कनेक्टेड होना चाहिए। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	वह Flowstep फ़ाइल जिसमें फ़्रेम इंपोर्ट होगा। यह `figmaUrl` में Figma फ़ाइल की key नहीं है
`figmaUrl`	`string`	किसी विशिष्ट Figma फ़्रेम का लिंक, जिसमें `node-id` हो। Figma में फ़्रेम पर राइट-क्लिक करें और Copy/Paste as → Copy link to selection चुनें। पेज का लिंक उस पेज के सभी टॉप-लेवल फ़्रेम इंपोर्ट करता है (MCP पर 20 फ़्रेम तक सीमित)

आउटपुट: { fileId, screenId, frameCount? }। screenId वह इंपोर्ट की गई स्क्रीन है। परिणाम देखने के लिए इसे get-screen-image को पास करें। जब पेज URL कई फ़्रेम इंपोर्ट करता है, तो screenId null होता है और उसके बजाय frameCount लौटता है। फिर list-screens कॉल करें, और हर नई स्क्रीन के लिए get-screen-image।

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

प्लान और बिलिंग टूल्स

`get-plan-details`

आपके संगठन का Flowstep प्लान, सब्सक्रिप्शन स्थिति, उपयोग और बची हुई कोटा प्राप्त करें। इसे कोई इनपुट नहीं चाहिए। संगठन साइन-इन उपयोगकर्ता से तय होता है। AI डिज़ाइन टूल्स कॉल करने से पहले अपनी सीमा जाँचने के लिए इसे इस्तेमाल करें। आउटपुट: { plan, subscription, limits, usage, remaining }।

फ़ील्ड	विवरण
`plan`	`{ name, code, type }`। `type` `"free"` या `"paid"` होता है
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	फ़ीचर के अनुसार सीमाएँ, फ़ीचर नाम से keyed (जैसे `messages`)। हर एक में वैकल्पिक `daily` और `monthly` objects होते हैं, जिनमें `max` और `warn` मान हैं, साथ में एक `unlimited` flag
`usage`	हर फ़ीचर का अब तक का उपयोग, `{ daily, monthly }` के रूप में
`remaining`	हर फ़ीचर का बचा हुआ कोटा, `{ daily, monthly }` के रूप में। असीमित फ़ीचर के लिए छोड़ दिया जाता है

सीमाएँ प्लान के अनुसार बदलती हैं। देखें मूल्य निर्धारण और Usage limits।

AI डिज़ाइन टूल्स

ये तीन टूल्स विवरण या प्रीसेट से डिज़ाइन करते हैं। वे कभी JSX नहीं लेते या दोबारा इस्तेमाल नहीं करते। हर कॉल Flowstep ऐप की उसी मैसेज सीमा से उपयोग होती है, और जनरेशन पूरी होने या टाइम आउट (180 सेकंड) होने तक रुकी रहती है।

टूल	इसके लिए इस्तेमाल करें
`ai-design-screens`	विवरण से नई स्क्रीन जनरेट करें, मौजूदा स्क्रीन को जगह पर बदलें, या दोनों करें
`ai-generate-screen-variant`	एक मौजूदा स्क्रीन का अगला चरण, एरर या एम्प्टी स्टेट, या प्लेटफ़ॉर्म वेरिएंट जोड़ें
`ai-edit-screen-variant`	एक पूरी मौजूदा स्क्रीन पर एडिट या री-डिज़ाइन प्रीसेट लागू करें

तीनों { status, fileId, screenIds, designGuidelinesUpdated } लौटाते हैं। परिणाम देखने के लिए हर screenId के लिए एक बार get-screen-image कॉल करें।

designGuidelinesUpdated: इस टर्न के दौरान फ़ाइल की DESIGN.md गाइडलाइन्स अपने-आप अपडेट होने पर बदलाव का संक्षिप्त सारांश; अन्यथा null।

`ai-design-screens`

टेक्स्ट विवरण से एक या अधिक नई स्क्रीन जनरेट करें, मौजूदा स्क्रीन को जगह पर बदलें, या एक ही कॉल में दोनों करें। इसमें नए फ़्लो, थीमिंग, कॉपी, लेआउट, या कई स्क्रीन में समन्वित बदलाव शामिल हैं। यह Flowstep एडिटर की चैट वाला वही डिज़ाइन एजेंट है: यह आपके message और elementIds से तय करता है कि क्या बनाना है और क्या बदलना है। नई फ़ाइल शुरू करने के लिए fileId छोड़ें; किसी मौजूदा फ़ाइल में काम करने के लिए fileId पास करें। अगर अनुरोध किसी ऐसी फ़ाइल पर लागू हो सकता है जो आपके पास पहले से है, तो आपके एजेंट को पहले list-files और list-screens जाँचने चाहिए। किसी एक स्क्रीन के अगले चरण, एरर या एम्प्टी स्टेट, या प्लेटफ़ॉर्म वेरिएंट के लिए ai-generate-screen-variant इस्तेमाल करें। किसी एक स्क्रीन के प्रीसेट एडिट या री-डिज़ाइन के लिए ai-edit-screen-variant इस्तेमाल करें। अगर आपके पास पहले से JSX है, तो इसके बजाय add-screen-jsx या replace-screen-jsx इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	डिफ़ॉल्ट	विवरण
`fileId`	`uuid`	—	लक्ष्य फ़ाइल। नई फ़ाइल बनाने के लिए छोड़ें। `elementIds` सेट होने पर आवश्यक
`message`	`string`	—	जनरेट की जाने वाली स्क्रीन और/या किए जाने वाले बदलावों का विवरण। `elementIds` पास करते समय बताएँ कि उन्हें एडिट करना है या संदर्भ के रूप में इस्तेमाल करना है। जिस वेबपेज का संदर्भ आप Flowstep से चाहते हैं, उसका URL यहीं शामिल करें
`elementIds`	`uuid[]`	`[]`	वैकल्पिक: `list-screens` से `screenId`s और/या `get-screen-jsx` (`includeIds` के साथ) से element `data-id`s, एडिटर में चुनाव की तरह। इन्हें जगह पर एडिट किया जा सकता है, या नई स्क्रीन के लिए विज़ुअल संदर्भ के रूप में इस्तेमाल किया जा सकता है। `screenId` पूरी स्क्रीन को लक्षित करता है
`attachments`	`{ id, path, type }[]` (अधिकतम 5)	`[]`	`upload-attachment` से फ़ाइलें: इमेज, PDF, या कोड और टेक्स्ट फ़ाइलें। फ़ाइल की सामग्री मैसेज में inline न डालें

उदाहरण: एक कॉल में एक स्क्रीन एडिट करें और दूसरी जोड़ें:

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

आउटपुट: { status, fileId, screenIds, designGuidelinesUpdated, reply? }।

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": [
    "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0"
  ],
  "designGuidelinesUpdated": null
}

status: स्क्रीन बनने या बदलने पर "generated"। "chat" तब होता है जब Flowstep बिना बनाए जवाब देता है, और उस स्थिति में जवाब reply में होता है और screenIds खाली होता है। अगर आपका निर्देश अस्पष्ट है, तो आपका एजेंट आपसे स्पष्टीकरण माँगे और टूल फिर से कॉल करे।
screenIds: कॉल के दौरान बनी या बदली गई हर स्क्रीन, जिसमें जगह पर एडिट की गई स्क्रीन भी शामिल हैं। अगर कॉल टाइम आउट होने से पहले कुछ स्क्रीन बन चुकी हों, तो एरर के बजाय वे स्क्रीन लौटाई जाती हैं।

जिन स्क्रीन को आप एडिट करने के लिए कहते हैं, वे जगह पर ओवरराइट हो जाती हैं।

`ai-generate-screen-variant`

एक मौजूदा स्क्रीन से पूरी तरह व्युत्पन्न एक नई स्क्रीन जोड़ें: फ़्लो का अगला चरण, एक एरर या एम्प्टी स्टेट, या किसी दूसरे प्लेटफ़ॉर्म का संस्करण। मूल स्क्रीन अपरिवर्तित रहती है। ऐसी स्क्रीन जोड़ने के लिए जो किसी मौजूदा स्क्रीन का वेरिएंट न हो (जैसे सेटिंग्स स्क्रीन), fileId के साथ ai-design-screens इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	लक्ष्य फ़ाइल
`screenId`	`uuid`	वह मौजूदा स्क्रीन जिससे व्युत्पन्न करना है
`operationVariant`	enum	आवश्यक: नई स्क्रीन मौजूदा स्क्रीन से कैसे संबंधित है

`operationVariant`	जोड़ता है
`next_screen`	उपयोगकर्ता फ़्लो में अगली स्क्रीन
`error_state`	स्क्रीन की एक एरर स्थिति
`empty_state`	स्क्रीन की एक एम्प्टी स्थिति
`web_version`	एक वेब संस्करण
`mobile_version`	एक मोबाइल संस्करण
`tablet_version`	एक टैबलेट संस्करण
`mobile_ios_version`	एक iOS संस्करण
`mobile_android_version`	एक Android संस्करण

आउटपुट: { status, fileId, screenIds, designGuidelinesUpdated }। status हमेशा "generated" होता है।

`ai-edit-screen-variant`

एक मौजूदा स्क्रीन को प्रीसेट का उपयोग करके जगह पर बदलें: उसकी थीम या पॉलिश बदलें, अलग लेआउट या विज़ुअल स्टाइल आज़माएँ, या उसे शुरू से री-डिज़ाइन करें। नई स्क्रीन, मुक्त-रूप निर्देशों, या किसी एलिमेंट में सटीक बदलाव के लिए ai-design-screens इस्तेमाल करें। इनपुट

पैरामीटर	प्रकार	विवरण
`fileId`	`uuid`	लक्ष्य फ़ाइल
`screenId`	`uuid`	वह मौजूदा स्क्रीन जिसे बदलना है
`operationVariant`	enum	आवश्यक: लागू करने वाला एडिट या री-डिज़ाइन प्रीसेट

`operationVariant`	प्रकार	प्रभाव
`dark_theme`	एडिट	स्क्रीन को डार्क थीम में बदलें
`light_theme`	एडिट	स्क्रीन को लाइट थीम में बदलें
`make_pretty`	एडिट	स्क्रीन के विज़ुअल डिज़ाइन को पॉलिश करें
`different_layout`	री-डिज़ाइन	अलग लेआउट आज़माएँ
`different_style`	री-डिज़ाइन	अलग विज़ुअल स्टाइल आज़माएँ
`from_scratch`	री-डिज़ाइन	स्क्रीन को शुरू से री-डिज़ाइन करें

आउटपुट: { status, fileId, screenIds, designGuidelinesUpdated }। status हमेशा "generated" होता है।

यह स्क्रीन की सामग्री को उसी जगह ओवरराइट करता है।

नाम बदले गए टूल्स

सितंबर और अक्टूबर 2026 में टूल नाम बदले गए। अगर आपके प्रॉम्प्ट, स्क्रिप्ट, या एजेंट निर्देश पुराने नाम इस्तेमाल करते हैं, तो उन्हें अपडेट करें:

पुराना नाम	नया नाम
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design` (मुक्त-रूप निर्देश)	`ai-design-screens`
`edit-design` (`operationVariant` प्रीसेट के साथ)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

इनपुट भी बदले हैं: AI डिज़ाइन टूल्स targets की जगह elementIds (या वेरिएंट टूल्स के लिए एक screenId) लेते हैं, add-screen-jsx jsxContent और metadata comment की जगह jsx और स्पष्ट metadata फ़ील्ड लेता है, create-file title की जगह name लेता है, और डिज़ाइन गाइडलाइन्स टूल्स resourceId और linkedTo की जगह fileId लेते हैं।

​फ़ाइल टूल्स

​list-files

​get-file

​create-file

​update-file

​delete-file

​स्क्रीन टूल्स

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​JSX में इमेज

​स्क्रीन फ़ील्ड मान

​डिज़ाइन गाइडलाइन्स टूल्स

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​चैट टूल्स

​get-chat-history

​अटैचमेंट टूल्स

​upload-attachment

​Figma टूल्स

​import-figma

​प्लान और बिलिंग टूल्स

​get-plan-details

​AI डिज़ाइन टूल्स

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​नाम बदले गए टूल्स

फ़ाइल टूल्स

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

स्क्रीन टूल्स

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

JSX में इमेज

स्क्रीन फ़ील्ड मान

डिज़ाइन गाइडलाइन्स टूल्स

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

चैट टूल्स

`get-chat-history`

अटैचमेंट टूल्स

`upload-attachment`

Figma टूल्स

`import-figma`

प्लान और बिलिंग टूल्स

`get-plan-details`

AI डिज़ाइन टूल्स

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

नाम बदले गए टूल्स