Spring til hovedindhold
Flowstep er designlærredet for agentbygget software. Flowstep MCP-serveren eksponerer lærredet over Model Context Protocol, så de agenter, dit team allerede bruger, kan designe skærme, se det renderede resultat og bygge videre på det — uden at forlade editoren eller terminalen. Skærme, en agent opretter over MCP, havner i de samme Flowstep-filer, som dit team arbejder i. De forbliver redigerbare på lærredet, kan deles og er klar til at blive eksporteret eller kopieret til Figma. Serveren er hostet på https://api.flowstep.ai/mcp (Streamable HTTP-transport). Der er ingen lokal proces at køre, og ingen API-nøgle at administrere. Klienter logger ind med din Flowstep-konto via OAuth.

​
Hvad du kan gøre

Serveren eksponerer 22 værktøjer fordelt på otte kategorier: De tre AI-design-værktøjer trækker på den samme beskedkvote som Flowstep-appen. Alle andre værktøjer er gratis. Se Brugsgrænser.

​
Almindelige anvendelser

Generér skærme ud fra en prompt — kald ai-design-screens med en beskrivelse. Udelad fileId, så opretter Flowstep filen og skærmene i ét trin. Kald get-screen-image for hvert returneret screenId for at se resultatet inline. Visualisér en React-komponent — upload din .jsx- eller .tsx-kilde med upload-attachment (mimeType: text/javascript), og send derefter den returnerede vedhæftning ind i ai-design-screens med en besked, der beskriver skærmen. Flowstep læser kilden og genererer et matchende design. Itér på et design — kald ai-design-screens med et eller flere screenId’er (eller enkelte element-id’er) i elementIds og fritekstinstruktioner for at ændre dem på stedet. Det samme kald kan også tilføje nye skærme, så én anmodning kan redigere en skærm og bygge den næste. Brug ai-edit-screen-variant til at anvende en forudindstilling, såsom et mørkt tema eller et andet layout, på en hel skærm. Udvid et flow — kald ai-generate-screen-variant for at tilføje den næste skærm, en fejl- eller tom-tilstand eller en web-, tablet- eller mobilversion af en eksisterende skærm. Arbejd kodefirst — læs en hvilken som helst skærm som JSX med get-screen-jsx, og skriv din egen JSX tilbage med add-screen-jsx (ny skærm) eller replace-screen-jsx (overskriv en eksisterende). Vil du bruge egne billeder, uploader du dem med upload-attachment og sætter den returnerede assetUrl ind i din JSX. Disse værktøjer er gratis. Hold outputtet on-brand — brug update-design-guidelines til at gemme dine farver, typografi og komponentregler på en fil som DESIGN.md-tekst. AI-generationer mod den fil følger dem. Læs dem tilbage med get-design-guidelines, eller ryd dem med delete-design-guidelines. Importér fra Figma — kald import-figma med et Figma-frame-link og et fileId for at bringe framen ind på lærredet som redigerbare elementer. Filens organisation skal have forbundet Figma først. Tjek din kvote — kald get-plan-details for at se dit abonnement, forbrug og resterende beskeder, før du starter en batch af genereringer.

​
Endpoint

Transport: Streamable HTTP. Sessionsmodel: stateless (hver forespørgsel er uafhængig og har intet session-ID). Serveren understøtter MCP-protokolversion 2026-07-28, som den annoncerer på https://api.flowstep.ai/.well-known/mcp.json. Klienter på den tidligere 2025-11-25-protokol forbinder til det samme endpoint.

​
Næste trin

Hurtigstart

Forbind en klient, og kør dit første værktøjskald.

Godkendelse

Sådan fungerer OAuth 2.1 PKCE-login og godkendelse.

Værktøjer

Fuld reference for input og output for alle 22 værktøjer.

Eksempler

End-to-end-workflows til almindelige opgaver.