> ## 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 को अपने AI एडिटर से कनेक्ट करें और अपनी पहली टूल कॉल चलाएं।

## पूर्वापेक्षाएं

* एक Flowstep खाता ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Cursor v0.43+ की आवश्यकता है**

    ## चरण 1 — सर्वर जोड़ें

    `~/.cursor/mcp.json` (वैश्विक) को बनाएं या संपादित करें या अपने प्रोजेक्ट रूट में `.cursor/mcp.json`:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    सहेजने के बाद Cursor को पुनः शुरू करें।

    ## चरण 2 — प्रमाणीकरण करें

    Cursor MCP पैनल खोलें (Settings → MCP) और Flowstep के आगे **Connect** पर क्लिक करें। Cursor आपके ब्राउज़र को Flowstep OAuth लॉगिन पर खोलता है। अपने Flowstep क्रेडेंशियल्स (ईमेल/पासवर्ड या Google) से साइन इन करें। ब्राउज़र वापस रीडायरेक्ट करता है और Cursor स्वचालित रूप से टोकन संग्रहीत करता है।

    <Note>
      प्रमाणीकरण करने से पहले आपको एक Flowstep खाते की आवश्यकता है। यदि आपके पास कोई नहीं है, तो पहले [app.flowstep.ai](https://app.flowstep.ai) पर साइन अप करें।
    </Note>

    ## चरण 3 — एक टूल कॉल चलाएं

    Cursor चैट में पूछें:

    > "List my Flowstep files"

    Cursor `list-files` को कॉल करता है और आपकी फ़ाइल सूची लौटाता है। यदि प्रतिक्रिया खाली है, तो पहले एक फ़ाइल बनाएं:

    > "Create a new Flowstep file called 'Dashboard'"

    ## चरण 4 — एक स्क्रीन जेनरेट करें

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor `create-new-design` को कॉल करता है (जो फ़ाइल को बनाता है और स्क्रीन को एक चरण में जेनरेट करता है), फिर `get-screen-image` को कॉल करता है। आप चैट में इनलाइन रेंडर किया गया डिज़ाइन देखेंगे।
  </Tab>

  <Tab title="Claude Code">
    **Claude Code CLI की आवश्यकता है**

    ## चरण 1 — सर्वर जोड़ें

    अपने प्रोजेक्ट रूट में `.mcp.json` बनाएं (प्रोजेक्ट-स्कोप्ड) या `~/.claude/mcp.json` (वैश्विक):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      `"type": "http"` फ़ील्ड Claude Code HTTP सर्वर के लिए आवश्यक है। Cursor को इसकी आवश्यकता नहीं है।
    </Note>

    ## चरण 2 — प्रमाणीकरण करें

    Claude Code चैट से किसी भी Flowstep टूल को चलाएं। पहली बार उपयोग करते समय, Claude Code आपके ब्राउज़र को Flowstep OAuth लॉगिन पर खोलता है। अपने Flowstep क्रेडेंशियल्स (ईमेल/पासवर्ड या Google) से साइन इन करें। ब्राउज़र वापस रीडायरेक्ट करता है और टोकन स्वचालित रूप से संग्रहीत होता है।

    <Note>
      प्रमाणीकरण करने से पहले आपको एक Flowstep खाते की आवश्यकता है। यदि आपके पास कोई नहीं है, तो पहले [app.flowstep.ai](https://app.flowstep.ai) पर साइन अप करें।
    </Note>

    ## चरण 3 — एक टूल कॉल चलाएं

    Claude Code चैट में पूछें:

    > "List my Flowstep files"

    Claude Code `list-files` को कॉल करता है और आपकी फ़ाइल सूची लौटाता है। यदि प्रतिक्रिया खाली है, तो पहले एक फ़ाइल बनाएं:

    > "Create a new Flowstep file called 'Dashboard'"

    ## चरण 4 — एक स्क्रीन जेनरेट करें

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code `create-new-design` को कॉल करता है (जो फ़ाइल को बनाता है और स्क्रीन को एक चरण में जेनरेट करता है), फिर `get-screen-image` को कॉल करता है। आप चैट में इनलाइन रेंडर किया गया डिज़ाइन देखेंगे।
  </Tab>
</Tabs>

## अगले कदम

* [टूल्स संदर्भ](/hi/mcp/tools) — सभी 20 टूल्स के लिए पूर्ण input/output दस्तावेज़
* [उदाहरण](/hi/mcp/examples) — बहु-चरण वर्कफ़्लो
* [अन्य क्लाइंट्स](/hi/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai