मुख्य सामग्री पर जाएं
Flowstep एजेंट-निर्मित सॉफ़्टवेयर के लिए डिज़ाइन कैनवस है। Flowstep MCP सर्वर उस कैनवस को Model Context Protocol के ज़रिए उपलब्ध कराता है, ताकि आपकी टीम के एजेंट स्क्रीन डिज़ाइन कर सकें, रेंडर किया गया परिणाम देख सकें, और उससे बना सकें, बिना एडिटर या टर्मिनल छोड़े। एजेंट द्वारा MCP पर बनाई गई स्क्रीन उन्हीं Flowstep फ़ाइलों में जाती हैं जिन पर आपकी टीम काम करती है। वे कैनवस पर एडिट करने योग्य और शेयर करने योग्य रहती हैं, और एक्सपोर्ट करने या Figma में कॉपी करने के लिए तैयार होती हैं। सर्वर https://api.flowstep.ai/mcp पर होस्ट है (Streamable HTTP ट्रांसपोर्ट)। कोई लोकल प्रोसेस चलाने या कोई API key मैनेज करने की ज़रूरत नहीं है। क्लाइंट्स OAuth के ज़रिए आपके Flowstep अकाउंट से साइन इन करते हैं।

आप क्या कर सकते हैं

सर्वर आठ श्रेणियों में 22 टूल्स उपलब्ध कराता है: AI डिज़ाइन के तीनों टूल्स Flowstep ऐप की उसी मैसेज उपयोग सीमा से उपयोग होते हैं। बाकी सभी टूल्स मुफ़्त हैं। देखें Usage limits.

सामान्य उपयोग के मामले

प्रॉम्प्ट से स्क्रीन जनरेट करें: विवरण के साथ ai-design-screens कॉल करें। fileId छोड़ देने पर Flowstep एक चरण में फ़ाइल और स्क्रीन दोनों बना देता है। लौटाए गए हर screenId के लिए get-screen-image कॉल करें और परिणाम बातचीत में देखें। React कंपोनेंट को विज़ुअलाइज़ करें: upload-attachment (mimeType: text/javascript) से अपना .jsx या .tsx सोर्स अपलोड करें। फिर लौटे अटैचमेंट को स्क्रीन का वर्णन करने वाले मैसेज के साथ ai-design-screens में पास करें। Flowstep सोर्स पढ़ता है और मेल खाता डिज़ाइन जनरेट करता है। डिज़ाइन पर बार-बार सुधार करें: elementIds में एक या अधिक screenId (या अलग-अलग एलिमेंट आईडी) और मुक्त-रूप निर्देशों के साथ ai-design-screens कॉल करें, ताकि वे उसी जगह पर बदल जाएँ। वही कॉल नई स्क्रीन भी जोड़ सकती है, इसलिए एक अनुरोध से एक स्क्रीन एडिट हो सकती है और अगली बन सकती है। पूरी एक स्क्रीन पर प्रीसेट लागू करने के लिए, जैसे डार्क थीम या अलग लेआउट, ai-edit-screen-variant इस्तेमाल करें। फ़्लो का विस्तार करें: अगली स्क्रीन, एरर या एम्प्टी स्टेट, या मौजूदा स्क्रीन का वेब, टैबलेट या मोबाइल वर्शन जोड़ने के लिए ai-generate-screen-variant कॉल करें। कोड-फ़र्स्ट काम करें: get-screen-jsx से किसी भी स्क्रीन को JSX के रूप में पढ़ें, फिर add-screen-jsx (नई स्क्रीन) या replace-screen-jsx (मौजूदा को ओवरराइट करने) से अपना JSX वापस लिखें। अपनी इमेज इस्तेमाल करने के लिए उन्हें upload-attachment से अपलोड करें और लौटे assetUrl को अपने JSX में रखें। ये टूल्स मुफ़्त हैं। आउटपुट को ब्रांड के अनुरूप रखें: update-design-guidelines से अपने रंग, टाइपोग्राफ़ी और कंपोनेंट नियम किसी फ़ाइल पर DESIGN.md टेक्स्ट के रूप में सेव करें। उस फ़ाइल के लिए AI जनरेशन इनका पालन करते हैं। इन्हें get-design-guidelines से वापस पढ़ें, या delete-design-guidelines से हटाएँ। Figma से इंपोर्ट करें: Figma फ़्रेम लिंक और fileId के साथ import-figma कॉल करें, ताकि फ़्रेम कैनवस पर एडिट करने योग्य एलिमेंट्स के रूप में आ जाए। फ़ाइल के संगठन में पहले Figma कनेक्टेड होना चाहिए। अपनी उपयोग सीमा जाँचें: कई जनरेशन से पहले अपना प्लान, उपयोग और बचे हुए मैसेज देखने के लिए get-plan-details कॉल करें।

एंडपॉइंट

Transport: Streamable HTTP. Session model: stateless (हर अनुरोध स्वतंत्र है, कोई सेशन ID नहीं)। सर्वर MCP प्रोटोकॉल वर्ज़न 2026-07-28 सपोर्ट करता है, जिसकी घोषणा https://api.flowstep.ai/.well-known/mcp.json पर होती है। पुराने 2025-11-25 प्रोटोकॉल वाले क्लाइंट उसी एंडपॉइंट से कनेक्ट होते हैं।

अगले चरण

त्वरित शुरुआत

क्लाइंट कनेक्ट करें और अपनी पहली टूल कॉल चलाएँ।

प्रमाणीकरण

OAuth 2.1 PKCE साइन-इन और स्वीकृति कैसे काम करती है।

टूल्स

सभी 22 टूल्स के लिए पूर्ण इनपुट और आउटपुट संदर्भ।

उदाहरण

सामान्य कार्यों के लिए एंड-टू-एंड वर्कफ़्लो।