> ## 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 Gyors kezdés

> Csatlakoztatd a Flowstepet az AI szerkesztődhöz, és futtatd le az első eszközhívást.

## Előfeltételek

* Egy Flowstep fiók ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Cursor v0.43+ szükséges**

    ## 1. lépés — Add hozzá a szervert

    Hozz létre vagy szerkessz `~/.cursor/mcp.json` (globális) vagy `.cursor/mcp.json` a projekt gyökerében:

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

    Indítsd újra a Cursort a mentés után.

    ## 2. lépés — Hitelesítés

    Nyisd meg a Cursor MCP panelt (Settings → MCP), és kattints a **Connect** lehetőségre a Flowstep mellett. A Cursor megnyitja a böngészt a Flowstep OAuth bejelentkezéséhez. Jelentkezz be a Flowstep hitelesítő adataiddal (e-mail/jelszó vagy Google). A böngésző visszatér, és a Cursor automatikusan eltárol a tokent.

    <Note>
      A hitelesítés előtt szükséged van egy Flowstep fiókra. Ha nem rendelkezel eggyel, először regisztrálj a [app.flowstep.ai](https://app.flowstep.ai) oldalon.
    </Note>

    ## 3. lépés — Futtass le egy eszközhívást

    Egy Cursor csevegésben kérd meg:

    > "List my Flowstep files"

    A Cursor meghívja a `list-files`-t, és visszaadja a fájllistádat. Ha az eredmény üres, először hozz létre egy fájlt:

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

    ## 4. lépés — Generálj egy képernyőt

    ```
    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.
    ```

    A Cursor meghívja a `create-new-design`-t (amely egy lépésben létrehozza a fájlt és generálja a képernyőket), majd a `get-screen-image`-t. Az így előállt tervet a csevegésben beágyazva fogod látni.
  </Tab>

  <Tab title="Claude Code">
    **Claude Code CLI szükséges**

    ## 1. lépés — Add hozzá a szervert

    Hozz létre `.mcp.json`-t a projekt gyökerében (projekt-hatáskörű) vagy `~/.claude/mcp.json` (globális):

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

    <Note>
      A `"type": "http"` mező szükséges a Claude Code HTTP szerverekhez. A Cursor nem igényli.
    </Note>

    ## 2. lépés — Hitelesítés

    Futtass le bármilyen Flowstep-eszközt egy Claude Code csevegésből. Az első használaton a Claude Code megnyitja a böngészt a Flowstep OAuth bejelentkezéséhez. Jelentkezz be a Flowstep hitelesítő adataiddal (e-mail/jelszó vagy Google). A böngésző visszatér, és a token automatikusan elmentésre kerül.

    <Note>
      A hitelesítés előtt szükséged van egy Flowstep fiókra. Ha nem rendelkezel eggyel, először regisztrálj a [app.flowstep.ai](https://app.flowstep.ai) oldalon.
    </Note>

    ## 3. lépés — Futtass le egy eszközhívást

    Egy Claude Code csevegésben kérd meg:

    > "List my Flowstep files"

    A Claude Code meghívja a `list-files`-t, és visszaadja a fájllistádat. Ha az eredmény üres, először hozz létre egy fájlt:

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

    ## 4. lépés — Generálj egy képernyőt

    ```
    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.
    ```

    A Claude Code meghívja a `create-new-design`-t (amely egy lépésben létrehozza a fájlt és generálja a képernyőket), majd a `get-screen-image`-t. Az így előállt tervet a csevegésben beágyazva fogod látni.
  </Tab>
</Tabs>

## Következő lépések

* [Eszközök referencia](/hu/mcp/tools) — teljes be-/kimenet dokumentáció az összes 20 eszközhöz
* [Példák](/hu/mcp/examples) — többlépéses munkafolyamatok
* [Egyéb ügyfelek](/hu/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai