Saltar al contingut principal
Flowstep és el llenç de disseny per al programari construït amb agents. El servidor MCP de Flowstep exposa aquest llenç mitjançant el Model Context Protocol, de manera que els agents que el teu equip ja fa servir poden dissenyar pantalles, veure’n el resultat renderitzat i construir-ne a partir d’ell, sense sortir de l’editor ni del terminal. Les pantalles que un agent crea mitjançant MCP es desen als mateixos fitxers de Flowstep on treballa el teu equip. Continuen sent editables al llenç, compartibles i a punt per exportar-les o copiar-les a Figma. El servidor està allotjat a https://api.flowstep.ai/mcp (transport Streamable HTTP). No hi ha cap procés local per executar ni cap clau d’API per gestionar: els clients inicien sessió amb el teu compte de Flowstep mitjançant OAuth.

​
Què pots fer

El servidor exposa 22 eines en vuit categories: Les tres eines de Disseny amb IA consumeixen la mateixa quota de missatges que l’aplicació de Flowstep. Totes les altres eines són gratuïtes. Consulta Límits d’ús.

​
Casos d’ús habituals

Genera pantalles a partir d’un prompt: crida ai-design-screens amb una descripció. Si omets fileId, Flowstep crea el fitxer i les pantalles en un sol pas. Crida get-screen-image per a cada screenId retornat i veure’n el resultat en línia. Visualitza un component de React: puja el teu codi .jsx o .tsx amb upload-attachment (mimeType: text/javascript) i després passa l’adjunt retornat a ai-design-screens amb un missatge que descrigui la pantalla. Flowstep llegeix el codi font i genera un disseny equivalent. Itera sobre un disseny: crida ai-design-screens amb un o més screenId (o identificadors d’elements individuals) a elementIds i instruccions de text lliure per canviar-los in situ. La mateixa crida també pot afegir pantalles noves, de manera que una sola petició pot editar una pantalla i construir-ne la següent. Fes servir ai-edit-screen-variant per aplicar una preconfiguració, com un tema fosc o una disposició diferent, a una pantalla completa. Amplia un flux: crida ai-generate-screen-variant per afegir la pantalla següent, un estat d’error o buit, o una versió web, de tauleta o mòbil d’una pantalla existent. Treball code-first: llegeix qualsevol pantalla com a JSX amb get-screen-jsx i després escriu el teu propi JSX de tornada amb add-screen-jsx (pantalla nova) o replace-screen-jsx (sobreescriu una pantalla existent). Per fer servir les teves pròpies imatges, puja-les amb upload-attachment i posa el assetUrl retornat al teu JSX. Aquestes eines són gratuïtes. Mantén la sortida alineada amb la marca: fes servir update-design-guidelines per guardar els teus colors, la tipografia i les regles de components en un fitxer com a text DESIGN.md. Les generacions amb IA d’aquest fitxer les seguiran. Llegeix-les amb get-design-guidelines o esborra-les amb delete-design-guidelines. Importa des de Figma: crida import-figma amb un enllaç de marc de Figma i un fileId per portar el marc al llenç com a elements editables. L’organització del fitxer ha de tenir Figma connectat primer. Comprova la teva quota: crida get-plan-details per veure el teu pla, l’ús i els missatges restants abans d’un lot de generacions.

​
Endpoint

Transport: Streamable HTTP. Model de sessió: sense estat (cada petició és independent, sense ID de sessió). El servidor admet la versió 2026-07-28 del protocol MCP, que anuncia a https://api.flowstep.ai/.well-known/mcp.json. Els clients que fan servir el protocol anterior 2025-11-25 es connecten al mateix endpoint.

​
Passos següents

Inici ràpid

Connecta un client i fes la primera crida a una eina.

Autenticació

Com funcionen l’inici de sessió OAuth 2.1 PKCE i l’aprovació.

Eines

Referència completa d’entrada i sortida de les 22 eines.

Exemples

Fluxos de treball de principi a fi per a tasques habituals.