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

> Flowstep को एक MCP सर्वर के रूप में उपयोग करें UI डिज़ाइन को सीधे Cursor, Claude Code, या किसी भी MCP-संगत क्लाइंट से जेनरेट, इंस्पेक्ट और मैनेज करने के लिए।

Flowstep अपने डिज़ाइन टूल्स को [Model Context Protocol](https://modelcontextprotocol.io/) पर उजागर करता है, जिससे आपका AI असिस्टेंट आपके एडिटर को छोड़े बिना UI स्क्रीन बना सकता है और उन पर काम कर सकता है।

सर्वर `https://api.flowstep.ai/mcp` पर होस्ट किया गया है (Streamable HTTP ट्रांसपोर्ट)। कोई लोकल प्रक्रिया चलाने की जरूरत नहीं है।

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

सर्वर सात श्रेणियों में 20 टूल्स उजागर करता है:

| श्रेणी         | टूल्स                                                                                         |
| -------------- | --------------------------------------------------------------------------------------------- |
| **फ़ाइलें**    | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **स्क्रीन**    | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI जेनरेशन** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **चैट**        | `get-chat-history`                                                                            |
| **डिज़ाइन**    | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**      | `import-figma`                                                                                |
| **बिलिंग**     | `get-plan-details`                                                                            |

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

**प्रॉम्प्ट से स्क्रीन जेनरेट करें** — विवरण के साथ `create-new-design` को कॉल करें। Flowstep एक ही चरण में फ़ाइल और स्क्रीन बनाता है। परिणाम को इनलाइन देखने के लिए रिटर्न किए गए `screenIds` के साथ `get-screen-image` को कॉल करें।

**React कंपोनेंट को विज़ुअलाइज़ करें** — `upload-attachment` के माध्यम से अपनी `.jsx` या `.tsx` फ़ाइल को अपलोड करें (`mimeType: text/javascript` का उपयोग करें), फिर कंपोनेंट का वर्णन करने वाले मैसेज के साथ रिटर्न किए गए अटैचमेंट को `create-new-design` में पास करें। Flowstep स्रोत को पढ़ता है और एक मेल खाने वाली डिज़ाइन स्क्रीन जेनरेट करता है।

**डिज़ाइन पर काम करें** — टारगेट `screenId` के साथ `edit-design` को कॉल करें और इसे संशोधित करने के निर्देश दें, या शुरुआत से स्क्रीन को फिर से बनाने के लिए `regenerate-design` को कॉल करें।

**डिज़ाइन गाइडलाइन्स को मेंटेन करें** — अपने वर्तमान स्टाइल नियमों (रंग, टाइपोग्राफी, स्पेसिंग, टोन) को प्राप्त करने के लिए `get-design-guidelines` को कॉल करें, फिर जैसे-जैसे आपका डिज़ाइन विकसित होता है, उन्हें सिंक में रखने के लिए `update-design-guidelines` का उपयोग करें। सुसंगत गाइडलाइन्स को `create-new-design` या `edit-design` में पास करने से यह सुनिश्चित होता है कि प्रत्येक जेनरेट की गई स्क्रीन ब्रांड के अनुसार रहती है। उन्हें पूरी तरह से रीसेट करने के लिए `delete-design-guidelines` का उपयोग करें।

**Figma से आयात करें** — फ़्रेम को Flowstep फ़ाइल में संपादन योग्य तत्वों के रूप में लाने के लिए Figma फ़्रेम लिंक और एक `fileId` के साथ `import-figma` को कॉल करें। फ़ाइल के संगठन को पहले Figma से कनेक्ट होना चाहिए।

**कोटा ऑडिट करें** — जेनरेशन के एक बैच को शुरू करने से पहले शेष दैनिक और मासिक उपयोग देखने के लिए `get-plan-details` को कॉल करें।

## एंडपॉइंट

```
https://api.flowstep.ai/mcp
```

ट्रांसपोर्ट: Streamable HTTP। सेशन मॉडल: स्टेटलेस (प्रत्येक रिक्वेस्ट स्वतंत्र है, कोई सेशन ID नहीं)।

## अगले कदम

<CardGroup cols={2}>
  <Card title="त्वरित शुरुआत" icon="bolt" href="/hi/mcp/quickstart">
    पहली टूल कॉल Cursor के साथ 5 मिनट से कम समय में।
  </Card>

  <Card title="प्रमाणीकरण" icon="lock" href="/hi/mcp/authentication">
    OAuth 2.1 PKCE कैसे काम करता है और टोकन कैसे जारी किए जाते हैं।
  </Card>

  <Card title="टूल्स" icon="wrench" href="/hi/mcp/tools">
    सभी 20 टूल्स के लिए पूर्ण इनपुट/आउटपुट संदर्भ।
  </Card>

  <Card title="उदाहरण" icon="code" href="/hi/mcp/examples">
    सामान्य कार्यों के लिए एंड-टू-एंड वर्कफ़्लो।
  </Card>
</CardGroup>