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

> Käytä Flowsteppiä MCP-palvelimena käyttöliittymäsuunnitelmien luomiseen, tarkasteluun ja hallintaan suoraan Cursorista, Claude Codesta tai mistä tahansa MCP-yhteensopivasta asiakkaasta.

Flowstep tarjoaa suunnittelutyökalunsa [Model Context Protocol](https://modelcontextprotocol.io/) -protokollan kautta, jolloin tekoälyavustajasi voi luoda ja kehittää käyttöliittymänäyttöjä poistuamatta editorista.

Palvelin on isännöity osoitteessa `https://api.flowstep.ai/mcp` (Streamable HTTP -kuljetus). Mitään paikallista prosessia ei tarvitse ajaa.

## Mitä voit tehdä

Palvelin tarjoaa 20 työkalua seitsemässä kategoriassa:

| Kategoria             | Työkalut                                                                                      |
| --------------------- | --------------------------------------------------------------------------------------------- |
| **Tiedostot**         | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Näytöt**            | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Tekoälyllä luodut** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Keskustelu**        | `get-chat-history`                                                                            |
| **Suunnittelu**       | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**             | `import-figma`                                                                                |
| **Laskutus**          | `get-plan-details`                                                                            |

## Yleiset käyttötapaukset

**Näyttöjen luominen kehotteesta** — kutsu `create-new-design` kuvauksen kanssa. Flowstep luo tiedoston ja näytöt yhdessä vaiheessa. Kutsu `get-screen-image` palautetuilla `screenIds` nähdäksesi tuloksen.

**React-komponentin visualisointi** — lataa `.jsx` tai `.tsx` -tiedostosi kautta `upload-attachment` (käytä `mimeType: text/javascript`), siirrä palautettu liite `create-new-design` -komentoon komponentin kuvaavan viestin kanssa. Flowstep lukee lähdekoodin ja generoi vastaavan muotoilunäytön.

**Muotoilun kehittäminen** — kutsu `edit-design` kohde `screenId` kanssa ja ohjeet sen muokkaamiseksi, tai `regenerate-design` näytön tekemiseksi alusta.

**Suunnitteluohjeiden ylläpitäminen** — kutsu `get-design-guidelines` noutaaksesi nykyiset tyylin säännöt (värit, typografia, välistys, sävy), käytä sitten `update-design-guidelines` pitääksesi ne synkronoituina muotoilun kehittyessä. Johdonmukaisten suunnitteluohjeiden välittäminen `create-new-design` tai `edit-design` -komentoon varmistaa, että jokainen luotu näyttö pysyy brändissä. Käytä `delete-design-guidelines` nollataksesi ne kokonaan.

**Kiintiön tarkistaminen** — kutsu `get-plan-details` nähdäksesi jäljellä olevan päivittäisen ja kuukausittaisen käytön ennen erän generointia.

## Päätepiste

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

Kuljetus: Streamable HTTP. Istunnon malli: tilaton (jokainen pyyntö on itsenäinen, ei istunto-tunnusta).

## Seuraavat vaiheet

<CardGroup cols={2}>
  <Card title="Pika-aloitus" icon="bolt" href="/fi/mcp/quickstart">
    Ensimmäinen työkalukutsu alle viidessä minuutissa Cursorilla.
  </Card>

  <Card title="Todentaminen" icon="lock" href="/fi/mcp/authentication">
    Kuinka OAuth 2.1 PKCE toimii ja kuinka tokenit myönnetään.
  </Card>

  <Card title="Työkalut" icon="wrench" href="/fi/mcp/tools">
    Täydellinen syötteen ja tuloksen viittaus kaikille 20 työkalulle.
  </Card>

  <Card title="Esimerkit" icon="code" href="/fi/mcp/examples">
    Päästä päähän -työnkulkut yleisille tehtäville.
  </Card>
</CardGroup>