> ## 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 Pika-aloitus

> Yhdistä Flowstep AI-editoriin ja suorita ensimmäinen tool call.

## Edellytykset

* Flowstep-tili ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Vaatii Cursor v0.43+**

    ## Vaihe 1 — Lisää palvelin

    Luo tai muokkaa `~/.cursor/mcp.json` (yleinen) tai `.cursor/mcp.json` projektisi juuressa:

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

    Käynnistä Cursor uudelleen tallennuksen jälkeen.

    ## Vaihe 2 — Todentaminen

    Avaa Cursor MCP -paneeli (Settings → MCP) ja napsauta **Connect** Flowstepin vieressä. Cursor avaa selaimen Flowstepin OAuth-kirjautumissivulle. Kirjaudu sisään Flowstep-tunnuksillasi (sähköpostiosoite/salasana tai Google). Selain ohjaa sinut takaisin ja Cursor tallentaa tunnuksen automaattisesti.

    <Note>
      Tarvitset Flowstep-tilin ennen todentamista. Jos sinulla ei ole tiliä, rekisteröidy ensin osoitteessa [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Vaihe 3 — Suorita tool call

    Cursor-chatissa kysy:

    > "List my Flowstep files"

    Cursor kutsuu `list-files`:ää ja palauttaa tiedostolistasi. Jos vastaus on tyhjä, luo ensin tiedosto:

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

    ## Vaihe 4 — Luo näyttö

    ```
    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 kutsuu `create-new-design`:ää (joka luo tiedoston ja luo näytöt yhdessä vaiheessa) ja sitten `get-screen-image`:ää. Näet renderoidun suunnittelun inline-chatissa.
  </Tab>

  <Tab title="Claude Code">
    **Vaatii Claude Code CLI:n**

    ## Vaihe 1 — Lisää palvelin

    Luo `.mcp.json` projektisi juureen (projektin laajuinen) tai `~/.claude/mcp.json` (yleinen):

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

    <Note>
      Kenttä `"type": "http"` on pakollinen Claude Code HTTP -palvelimille. Cursor ei tarvitse sitä.
    </Note>

    ## Vaihe 2 — Todentaminen

    Suorita mikä tahansa Flowstep-työkalu Claude Code -chatista. Ensimmäisellä kerralla Claude Code avaa selaimesi Flowstepin OAuth-kirjautumissivulle. Kirjaudu sisään Flowstep-tunnuksillasi (sähköpostiosoite/salasana tai Google). Selain ohjaa sinut takaisin ja tunnus tallennetaan automaattisesti.

    <Note>
      Tarvitset Flowstep-tilin ennen todentamista. Jos sinulla ei ole tiliä, rekisteröidy ensin osoitteessa [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Vaihe 3 — Suorita tool call

    Claude Code -chatissa kysy:

    > "List my Flowstep files"

    Claude Code kutsuu `list-files`:ää ja palauttaa tiedostolistasi. Jos vastaus on tyhjä, luo ensin tiedosto:

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

    ## Vaihe 4 — Luo näyttö

    ```
    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 kutsuu `create-new-design`:ää (joka luo tiedoston ja luo näytöt yhdessä vaiheessa) ja sitten `get-screen-image`:ää. Näet renderoidun suunnittelun inline-chatissa.
  </Tab>
</Tabs>

## Seuraavat vaiheet

* [Työkalujen viite](/fi/mcp/tools) — täydellinen syöte/tulos-dokumentaatio kaikille 20 työkalulle
* [Esimerkit](/fi/mcp/examples) — monivaiheisia työnkulkuja
* [Muut asiakkaat](/fi/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai