MCP Pika-aloitus

Edellytykset

Flowstep-tili (app.flowstep.ai)

Cursor
Claude Code

Vaatii Cursor v0.43+

Vaihe 1 — Lisää palvelin

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

{
  "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.

Tarvitset Flowstep-tilin ennen todentamista. Jos sinulla ei ole tiliä, rekisteröidy ensin osoitteessa app.flowstep.ai.

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.

Vaatii Claude Code CLI:n

Vaihe 1 — Lisää palvelin

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

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Kenttä "type": "http" on pakollinen Claude Code HTTP -palvelimille. Cursor ei tarvitse sitä.

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.

Tarvitset Flowstep-tilin ennen todentamista. Jos sinulla ei ole tiliä, rekisteröidy ensin osoitteessa app.flowstep.ai.

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.

Seuraavat vaiheet

Työkalujen viite — täydellinen syöte/tulos-dokumentaatio kaikille 20 työkalulle
Esimerkit — monivaiheisia työnkulkuja
Muut asiakkaat — Windsurf, Claude Desktop, claude.ai

Aloittaminen

Flowstepin käyttö

Tiimit ja organisaatiot

Vienti ja integraatiot

MCP-palvelin

Laskutus ja tilaukset

Turvallisuus ja tietosuoja

Edellytykset

Vaihe 1 — Lisää palvelin

Vaihe 2 — Todentaminen

Vaihe 3 — Suorita tool call

Vaihe 4 — Luo näyttö

Vaihe 1 — Lisää palvelin

Vaihe 2 — Todentaminen

Vaihe 3 — Suorita tool call

Vaihe 4 — Luo näyttö

Seuraavat vaiheet

​Edellytykset

​Vaihe 1 — Lisää palvelin

​Vaihe 2 — Todentaminen

​Vaihe 3 — Suorita tool call

​Vaihe 4 — Luo näyttö

​Vaihe 1 — Lisää palvelin

​Vaihe 2 — Todentaminen

​Vaihe 3 — Suorita tool call

​Vaihe 4 — Luo näyttö

​Seuraavat vaiheet

Edellytykset

Vaihe 1 — Lisää palvelin

Vaihe 2 — Todentaminen

Vaihe 3 — Suorita tool call

Vaihe 4 — Luo näyttö

Vaihe 1 — Lisää palvelin

Vaihe 2 — Todentaminen

Vaihe 3 — Suorita tool call

Vaihe 4 — Luo näyttö

Seuraavat vaiheet