Skip to main content
Flowstep är designcanvaset för agentbyggd programvara. Flowstep MCP-servern exponerar canvaset via Model Context Protocol, så agenterna som ditt team redan använder kan designa skärmar, titta på det renderade resultatet och bygga utifrån det. Allt sker utan att du lämnar editorn eller terminalen. Skärmar som en agent skapar via MCP hamnar i samma Flowstep-filer som ditt team arbetar i. De förblir redigerbara på canvas, delningsbara och redo att exporteras eller kopieras till Figma. Servern finns på https://api.flowstep.ai/mcp (Streamable HTTP-transport). Det finns ingen lokal process att köra och ingen API-nyckel att hantera. Klienter loggar in med ditt Flowstep-konto via OAuth.

​
Vad du kan göra

Servern exponerar 23 verktyg inom åtta kategorier: De fyra AI-design-verktygen använder samma meddelandekvot som Flowstep-appen. Alla andra verktyg är gratis. Se Användningsgränser.

​
Vanliga användningsfall

Generera skärmar från en prompt: anropa ai-generate-screens med en beskrivning. Utelämna fileId så skapar Flowstep filen och skärmarna i ett steg. Anropa get-screen-image för varje returnerat screenId för att se resultatet inline. Visualisera en React-komponent: ladda upp din .jsx- eller .tsx-källkod med upload-attachment (mimeType: text/javascript). Skicka sedan den returnerade bilagan till ai-generate-screens med ett meddelande som beskriver skärmen. Flowstep läser källkoden och genererar en matchande design. Iterera på en design: anropa ai-edit-screens med ett eller flera screenId (eller enskilda element-ID) och instruktioner i fritt format för att ändra dem på plats. Använd ai-edit-screen-variant för att tillämpa en förinställning, till exempel ett mörkt tema eller en annan layout, på en hel skärm. Utöka ett flöde: anropa ai-generate-screen-variant för att lägga till nästa skärm, ett fel- eller tomt tillstånd, eller en webb-, surfplatte- eller mobilversion av en befintlig skärm. Arbeta kodfirst: läs valfri skärm som JSX med get-screen-jsx och skriv sedan din egen JSX tillbaka med add-screen-jsx (ny skärm) eller replace-screen-jsx (skriver över en befintlig). Dessa verktyg är gratis. Håll resultatet i linje med varumärket: använd update-design-guidelines för att lagra dina färger, typografi och komponentregler på en fil som DESIGN.md-text. AI-genereringar mot den filen följer dem. Läs tillbaka dem med get-design-guidelines eller rensa dem med delete-design-guidelines. Importera från Figma: anropa import-figma med en Figma-ramlänk och ett fileId för att föra in ramen på canvas som redigerbara element. Filens organisation måste först ha Figma anslutet. Kontrollera din kvot: anropa get-plan-details för att se din plan, användning och kvarvarande meddelanden före en batch av genereringar.

​
Endpoint

Transport: Streamable HTTP. Sessionsmodell: tillståndslös (varje förfrågan är oberoende, och det finns inget sessions-ID). Servern stöder MCP-protokollversion 2026-07-28, som den annonserar på https://api.flowstep.ai/.well-known/mcp.json. Klienter på det tidigare protokollet 2025-11-25 ansluter till samma endpoint.

​
Nästa steg

Snabbstart

Anslut en klient och kör ditt första verktygsanrop.

Autentisering

Hur inloggning och godkännande med OAuth 2.1 PKCE fungerar.

Verktyg

Fullständig referens för in- och utdata för alla 23 verktyg.

Exempel

Användningsflöden från början till slut för vanliga uppgifter.