MCP-pikaopas

Edellytykset

Flowstep-tili (app.flowstep.ai)

Käytätkö Claudea claude.ai-palvelussa tai Claude Desktopissa? Flowstep on listattu liittimenä Clauden hakemistossa. Lisää se yhdellä napsautuksella osoitteessa claude.ai/directory/flowstep. Katso claude.ai.

Cursor
Claude Code

Vaatii Cursor v0.43+

Vaihe 1: Lisää palvelin

Asenna se yhdellä napsautuksella klikkaamalla Add Flowstep to Cursor, tai luo tai muokkaa ~/.cursor/mcp.json-tiedostoa (globaali) tai projektisi juuressa olevaa .cursor/mcp.json-tiedostoa:

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

Käynnistä Cursor uudelleen tallennuksen jälkeen.

Vaihe 2: Todenna

Avaa Cursorin MCP-paneeli (Settings → MCP, Asetukset → MCP) ja napsauta Flowstepin vieressä Connect (Yhdistä). Cursor avaa selaimesi Flowstepin kirjautumissivulle. Kirjaudu sisään Flowstep-tunnuksillasi (sähköposti/salasana tai Google) ja napsauta sitten hyväksymisnäkymässä Allow (Salli). Selain ohjaa takaisin, ja Cursor tallentaa tunnuksen automaattisesti.

Tarvitset Flowstep-tilin ennen todennusta. Jos sinulla ei ole sellaista, rekisteröidy ensin osoitteessa app.flowstep.ai.

Vaihe 3: Suorita työkalukutsu

Kysy Cursor-keskustelussa:

“Listaa Flowstep-tiedostoni”

Cursor kutsuu list-files-työkalua ja palauttaa tiedostoluettelosi. Jos vastaus on tyhjä, luo ensin tiedosto:

“Luo uusi Flowstep-tiedosto nimeltä ‘Dashboard‘“

Vaihe 4: Luo näyttö

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor kutsuu ai-design-screens-työkalua (joka luo uuden tiedoston ja generoi näytöt yhdessä vaiheessa), sitten get-screen-image-työkalua. Näet renderöidyn suunnitelman keskustelussa.

Vaatii Claude Code CLI:n

Vaihe 1: Lisää palvelin

Suorita tämä projektissasi:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

Jos haluat jakaa palvelimen tiimisi kanssa, lisää se sen sijaan projektisi juuressa olevaan .mcp.json-tiedostoon:

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

"type": "http"-kenttä vaaditaan Claude Coden HTTP-palvelimille. Cursor ei tarvitse sitä.

Vaihe 2: Todenna

Suorita mikä tahansa Flowstep-työkalu Claude Code -keskustelusta. Ensimmäisellä käyttökerralla Claude Code avaa selaimesi Flowstepin kirjautumissivulle. Kirjaudu sisään Flowstep-tunnuksillasi (sähköposti/salasana tai Google) ja napsauta sitten hyväksymisnäkymässä Allow (Salli). Selain ohjaa takaisin, ja tunnus tallentuu automaattisesti. Kirjoita Claude Codeen /mcp tarkistaaksesi, että Flowstep on yhdistetty.

Tarvitset Flowstep-tilin ennen todennusta. Jos sinulla ei ole sellaista, rekisteröidy ensin osoitteessa app.flowstep.ai.

Vaihe 3: Suorita työkalukutsu

Kysy Claude Code -keskustelussa:

“Listaa Flowstep-tiedostoni”

Claude Code kutsuu list-files-työkalua ja palauttaa tiedostoluettelosi. Jos vastaus on tyhjä, luo ensin tiedosto:

“Luo uusi Flowstep-tiedosto nimeltä ‘Dashboard‘“

Vaihe 4: Luo näyttö

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code kutsuu ai-design-screens-työkalua (joka luo uuden tiedoston ja generoi näytöt yhdessä vaiheessa), sitten get-screen-image-työkalua. Näet renderöidyn suunnitelman keskustelussa.

ai-design-screens ja muut AI-suunnittelutyökalut käyttävät Flowstep-viestikiintiötäsi. Tiedostojen listaaminen, lukeminen ja näyttöjen renderöinti on veloitukseton. Katso Käyttörajat.

Seuraavat vaiheet

Työkaluviite: täydelliset syöte- ja tulostiedot kaikille 22 työkalulle
Esimerkit: monivaiheiset työnkulut
Muut asiakkaat: Windsurf, Codex, 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: Todenna

Vaihe 3: Suorita työkalukutsu

Vaihe 4: Luo näyttö

Vaihe 1: Lisää palvelin

Vaihe 2: Todenna

Vaihe 3: Suorita työkalukutsu

Vaihe 4: Luo näyttö

Seuraavat vaiheet

​Edellytykset

​Vaihe 1: Lisää palvelin

​Vaihe 2: Todenna

​Vaihe 3: Suorita työkalukutsu

​Vaihe 4: Luo näyttö

​Vaihe 1: Lisää palvelin

​Vaihe 2: Todenna

​Vaihe 3: Suorita työkalukutsu

​Vaihe 4: Luo näyttö

​Seuraavat vaiheet

Edellytykset

Vaihe 1: Lisää palvelin

Vaihe 2: Todenna

Vaihe 3: Suorita työkalukutsu

Vaihe 4: Luo näyttö

Vaihe 1: Lisää palvelin

Vaihe 2: Todenna

Vaihe 3: Suorita työkalukutsu

Vaihe 4: Luo näyttö

Seuraavat vaiheet