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

# Server MCP Flowstep

> Používejte Flowstep jako server MCP k vytváření, kontrole a správě UI designů přímo z aplikace Cursor, Claude Code nebo jakéhokoli kompatibilního klienta MCP.

Flowstep zveřejňuje své nástroje pro design přes [Model Context Protocol](https://modelcontextprotocol.io/), což vašemu asistentovi AI umožňuje vytvářet a iterovat UI obrazovky, aniž by musel opustit váš editor.

Server je hostován na adrese `https://api.flowstep.ai/mcp` (přenos Streamable HTTP). Není potřeba spouštět žádný místní proces.

## Co můžete dělat

Server zveřejňuje 20 nástrojů napříč sedmi kategoriemi:

| Kategorie         | Nástroje                                                                                      |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Soubory**       | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Obrazovky**     | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI generování** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat**          | `get-chat-history`                                                                            |
| **Design**        | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**         | `import-figma`                                                                                |
| **Fakturace**     | `get-plan-details`                                                                            |

## Běžné příklady použití

**Generujte obrazovky z promptu** — zavolejte `create-new-design` s popisem. Flowstep vytvoří soubor a obrazovky v jednom kroku. Zavolejte `get-screen-image` s vráceným `screenIds` a zobrazte výsledek vloženě.

**Vizualizujte komponentu React** — nahrajte váš soubor `.jsx` nebo `.tsx` přes `upload-attachment` (použijte `mimeType: text/javascript`), poté předejte vrácenou přílohu do `create-new-design` se zprávou popisující komponentu. Flowstep přečte zdroj a vygeneruje odpovídající obrazovku designu.

**Iterujte design** — zavolejte `edit-design` s cílovou `screenId` a pokyny k úpravě, nebo `regenerate-design` a předělejte obrazovku od nuly.

**Udržujte designové pokyny** — zavolejte `get-design-guidelines` a získejte své aktuální pravidla stylu (barvy, typografie, mezery, tón), poté použijte `update-design-guidelines` a udržujte je v synchronizaci, jak se váš design vyvíjí. Předání konzistentních pokynů do `create-new-design` nebo `edit-design` zajistí, že každá generovaná obrazovka zůstane v souladu s vaší značkou. Použijte `delete-design-guidelines` a zcela je resetujte.

**Importujte z Figmy** — zavolejte `import-figma` s odkazem na rámeček Figmy a `fileId` a přiveďte rámeček do souboru Flowstep jako editovatelné prvky. Organizace souboru musí mít nejdřív připojenou Figmu.

**Auditujte kvótu** — zavolejte `get-plan-details` a zobrazte zbývající denní a měsíční použití před spuštěním dávky generování.

## Koncový bod

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

Přenos: Streamable HTTP. Model relace: bez stavu (každý požadavek je nezávislý, bez ID relace).

## Další kroky

<CardGroup cols={2}>
  <Card title="Rychlý start" icon="bolt" href="/cs/mcp/quickstart">
    První volání nástroje za méně než 5 minut s Cursor.
  </Card>

  <Card title="Ověřování" icon="lock" href="/cs/mcp/authentication">
    Jak funguje OAuth 2.1 PKCE a jak jsou vydávány tokeny.
  </Card>

  <Card title="Nástroje" icon="wrench" href="/cs/mcp/tools">
    Úplná referenční příručka vstupů/výstupů pro všech 20 nástrojů.
  </Card>

  <Card title="Příklady" icon="code" href="/cs/mcp/examples">
    Pracovní postupy od začátku do konce pro běžné úkoly.
  </Card>
</CardGroup>