# Flowstep billing: cycles, cancellation, and access
Source: https://docs.flowstep.ai/billing
Learn how Flowstep handles monthly and annual billing cycles, who can manage billing in an organization, how to cancel your subscription, and what happens after cancelling.
Flowstep gives you control over how and when you pay. You can choose monthly or annual billing when you subscribe, and you can cancel at any time without losing access for the remainder of your paid period.
## Who can manage billing
In an organization, only the **Owner** — the person who created the organization — can manage billing. The Owner is the only person who sees the **Plan & Billing** page in Settings and the **Upgrade** buttons in the app.
Admins can add and remove people, but they can't upgrade, downgrade, change seats, or cancel the subscription — seat changes only sync to the subscription through the Owner. See [Organizations](/organizations) for the full role breakdown.
## Billing cycles
When you subscribe to a paid Flowstep plan, you choose between two billing options:
* **Monthly** — you are charged once per month on your billing date.
* **Annual** — you are charged once per year. Your full year is billed upfront at the start of the billing period.
Paid plans are billed per seat: your total is the plan's per-seat price multiplied by the number of seats — one for each Owner, Admin, and Member in your organization. Guests are free and don't count. Adding people mid-cycle is prorated, so you only pay for the remainder of the period. See [Seats](/seats) for details.
Plan upgrades take effect immediately, while downgrades take effect at the end of your current billing period.
Choosing annual billing saves you up to 20% compared to paying month-to-month. If you plan to use Flowstep regularly, the annual plan is the most cost-effective option.
## Managing your subscription
The Owner manages the subscription from **Settings → Plan & Billing**. On the free tier or a trial, the page shows an **Upgrade** button that opens the plan picker. On a paid plan, it shows a **Manage** button instead, which opens the billing portal where you manage your payment details and subscription.
## Cancellation
You can cancel your Flowstep subscription at any time — there are no cancellation fees or lock-in periods. To cancel, the Owner opens the billing portal via **Manage** on the **Plan & Billing** page. The Owner receives an email confirming the cancellation and the date it takes effect.
When you cancel, your subscription does not end immediately. You retain full access to your plan's features and remaining messages until the end of your current billing period. After that, your organization moves to the Free plan with a single seat — the Owner keeps edit access, and any other members become read-only until you upgrade again.
## Invoices
After each billing cycle, Flowstep automatically generates an invoice for your payment. You can download past invoices at any time through the billing portal. See [Invoices](/invoices) for instructions.
# Flowstep data privacy policy and AI training limits
Source: https://docs.flowstep.ai/data-privacy
Flowstep does not use your personal data to train AI models, and neither do its LLM providers. Learn what data may be used and how.
Your data belongs to you. Flowstep does not use your personal data to train AI models, and the large language model (LLM) providers that power Flowstep's AI features are contractually prohibited from using your data for training purposes either. This applies to everything you create, upload, or interact with inside Flowstep.
## What Flowstep does not do
* Flowstep does **not** feed your designs, prompts, or project content into AI model training.
* Flowstep's LLM providers are **not permitted** to use your data to train or fine-tune their models.
## Aggregated and anonymized feedback
Flowstep may use aggregated, anonymized feedback to improve the quality of AI outputs. This data cannot be traced back to you or your projects — it contains no personally identifiable information and no raw content from your work.
This limited use of anonymous feedback helps Flowstep make its AI features more accurate and useful for everyone, without compromising your privacy.
## If the approach changes
If Flowstep's data practices ever change, you will know about it. Flowstep will update its Privacy Policy and notify users before any new data uses take effect. You won't be surprised by changes to how your data is handled.
## Questions about privacy
If you have questions about how Flowstep handles your data, reach out to the team at [hello@flowstep.ai](mailto:hello@flowstep.ai). You can also review the full Flowstep Privacy Policy at [flowstep.ai](https://flowstep.ai) for complete details.
# Set design guidelines to keep every Flowstep generation on-brand
Source: https://docs.flowstep.ai/design-guidelines
Define file-level design guidelines in DESIGN.md format — colors, typography, spacing, and conventions that steer every AI generation and edit in the file.
Design guidelines let you set standing rules — colors, typography, spacing, component conventions — that Flowstep applies to every AI generation and edit in a file. Instead of repeating "use our blue theme" in every prompt, write it down once and the AI follows it from then on.
## Edit your design guidelines
In the chat panel header, click the **Edit design guidelines** button. The **Design guidelines** modal opens with a `DESIGN.md` text editor.
Type your guidelines directly, or drag and drop a `.md` file into the editor to import it. The format follows Google's open `design.md` standard — optional YAML front matter (recognized keys: `version`, `name`, `description`, `colors`, `typography`, `rounded`, `spacing`, `components`) followed by Markdown sections.
Click **Save changes**. From now on, every generation and edit in this file uses your guidelines as mandatory context.
Guidelines apply to **future output only** — existing designs stay as they are. They are scoped to the current file and don't carry over to other files.
## Good to know
* **Length limit** — guidelines can be up to 50,000 characters. Imported files beyond that are truncated.
* **Validation** — structural errors (unclosed YAML front matter, duplicate `##` section headings) block saving. Softer issues, like unrecognized YAML keys or colors that aren't valid hex codes, show warnings but still save.
* **Export** — use the **Copy raw file** and **Download** buttons in the modal to copy or download your `DESIGN.md`.
* **Removing guidelines** — clear the text field and save to remove the guidelines for that file.
## Flowstep updates guidelines for you
When you give a standing style instruction in a prompt — for example, "from now on, use a blue theme" — Flowstep detects it and updates your design guidelines automatically, confirming in the chat: "Updated your design guidelines to use \[style] for future generations." One-off requests like "make it blue" don't change the guidelines; they only affect that generation.
## Design guidelines over MCP
If you work through the [MCP server](/mcp/overview), the `get-design-guidelines`, `update-design-guidelines`, and `delete-design-guidelines` tools read and write the same guidelines — so your IDE workflow and the web app stay in sync. See the [Tools reference](/mcp/tools).
# Use references to guide and speed up Flowstep designs
Source: https://docs.flowstep.ai/design-references
Attach a PRD, upload an image, or paste a URL to give Flowstep context—so you can ideate faster without writing lengthy prompts.
Flowstep lets you attach references alongside your prompt to give the AI more context about what you are trying to build. Instead of describing every detail in text, you can hand Flowstep a document, an image, or a link and let it extract the relevant information. This shortens your prompts and speeds up ideation significantly.
## Reference types
### Attach a PRD
Upload a product requirements document to give Flowstep a thorough understanding of your product's goals, features, and user needs before generating screens.
Use a PRD reference when you are designing a feature that already has written requirements. Flowstep reads the document and uses it to make design decisions that align with your product's intent—saving you from restating everything in the prompt.
### Upload an image
Attach a screenshot, sketch, mood board, or any image to give Flowstep a visual reference for the style or layout you have in mind.
Use an image reference when you have a strong visual direction in mind—such as a competitor's UI you want to draw inspiration from, or a rough wireframe you sketched by hand. Flowstep uses the image as inspiration, not as an exact template to copy.
### Paste a URL
Provide a link to a website, live product, or any web page and Flowstep will use it as a reference for visual style, structure, or content patterns.
Use a URL reference when you want to match or draw from an existing digital product. This is especially useful for white-labeling work, competitor analysis, or when a stakeholder says "make it look like this."
## Attach by pasting
The fastest way to attach a reference is often to paste it: pasting a file or an image into the prompt input attaches it automatically. Supported attachments are images (JPG, PNG, WEBP) and documents (PDF, MD, TXT), up to 3 MB each.
Pasting long text works too — the prompt input holds up to 6,000 characters, and pasting text at or beyond that limit automatically attaches it as a file called `pasted.txt` (if the prompt is empty, it's filled with "Follow the instructions in the file"). Handy for handing Flowstep a long spec without trimming it down.
## Why use references
References reduce the amount of detail you need to include in your prompt. Rather than writing a paragraph to explain your product context or visual direction, a single attached file or link can communicate it more completely. This makes the generation process faster and often produces more relevant results on the first try.
You can combine references—for example, attaching a PRD for product context and an image for visual inspiration at the same time.
# Edit and iterate on Flowstep designs via chat or canvas
Source: https://docs.flowstep.ai/editing-designs
Refine any Flowstep-generated screen through manual visual editing or chat-based prompts — iterate as many times as needed until the design is right.
Flowstep designs are fully editable after generation. You are not locked into what the AI first produces—you can adjust visuals directly in the editor, use chat to describe changes in plain language, or ask Flowstep to generate variations and new screens. Use whichever method fits the change you want to make.
## Two ways to edit
Make changes directly on the canvas by selecting and modifying elements. This method works best for precise adjustments—moving a component, changing a color, updating a label, or tweaking spacing.
Click on any component or layer in your design to select it.
Use the editor controls to adjust properties such as color, size, position, or text content.
Your changes apply immediately on the canvas. Continue editing or move on to the next screen.
Describe the change you want in plain language and Flowstep updates the design for you. This method is faster for broad or structural changes—adjusting the layout, rethinking a section, or applying a style direction.
Select the screen you want to edit, then open the chat input.
Type what you want Flowstep to update. Be specific about what should change and why, if it helps.
Flowstep applies the change and shows you the result. If it is not quite right, send a follow-up message to refine further.
Edits and regenerations update the selected screen **in place** rather than adding a new screen — while Flowstep streams the change, the element it's currently working on is highlighted with a green dashed border. Generating without a screen selected adds a new screen instead.
## Edit just part of a screen
You don't have to edit whole screens. Select a sub-element — a card, a button, a text label — and your chat prompt applies only to it, leaving the rest of the screen untouched.
* Switch to **Direct selection** mode with **Shift+V** (or the dropdown on the Select toolbar button) to select the deepest element under your click. Press **V** for normal selection, or hold **Cmd** (Mac) / **Ctrl** (Windows) to use direct selection temporarily. **Escape** exits direct selection.
* Select sub-elements across multiple screens with **Cmd+Shift** — a single prompt can edit up to 6 screens per message.
When an image element is selected (outside wireframe mode), an **Image** panel appears in the property panel: preview the image, swap it by dragging a new image file onto the preview or clicking **Pick image**, or save it with **Download image**.
## Restore a previous version
Each AI generation in the chat history keeps its original result. If a screen has been edited or deleted since it was generated, its chat message shows a **Restore** button — **Restore original** to revert edits, or **Restore** / **Restore all** to bring back deleted screens. Use it to get back to a known-good state after an edit goes in the wrong direction.
Hover over any message in the chat panel to see when it was sent. Recent messages show the time; older ones show how long ago they were sent (for example, "1 day ago"), with the full date and time in a tooltip.
## One-click actions
Beyond direct edits, you can ask Flowstep to explore alternatives:
* **Try again from scratch** — ask Flowstep to produce a fresh version of the current screen with a different layout or visual direction.
* **Show the next screen** — ask Flowstep to generate what logically comes next in the user flow.
* **Make it pretty** — adjust spacing, alignment, and colors across the design. Layout stays the same.
These options let you iterate rapidly without having to write a prompt each time.
## Iterating to refine
Design rarely lands perfectly on the first attempt. Use chat-based editing for each round of feedback—describe what is working and what is not, and Flowstep adjusts from there. There is no limit to how many times you can iterate on a screen.
When iterating via chat, reference specific elements by name or location to get more accurate results. For example: "Move the call-to-action button to the bottom of the screen and make it full-width" is more effective than "fix the button."
# Download Flowstep designs as JPG or PNG image files
Source: https://docs.flowstep.ai/export-formats
Flowstep supports exporting designs as JPG or PNG. Learn which format suits your use case and how to download your screens in a few clicks.
When you're ready to share or hand off a design, Flowstep lets you export it as a static image — either a JPG or a PNG. Both formats are widely supported across design tools, presentation software, and browsers, so you can take your AI-generated designs wherever you need them.
## How to export your design
Navigate to the design you want to export inside Flowstep.
Locate the export option in the toolbar or design panel. Select it to open the export settings.
Select either **JPG** or **PNG** depending on your use case (see the comparison below).
Confirm your selection and download the exported image to your device.
## JPG vs PNG: which format should you use?
| | JPG | PNG |
| ---------------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| **Best for** | Sharing previews, presentations, stakeholder reviews | Designs with transparent backgrounds, high-fidelity handoffs |
| **File size** | Smaller — faster to share via email or messaging | Larger — retains full image detail |
| **Transparency** | Not supported | Supported |
| **Quality** | Slightly compressed | Lossless — no quality reduction |
If you're pasting your design into a slide deck or sending a quick preview to a client, JPG is usually the right choice. If you need crisp edges or a transparent background — for example, to overlay the design on another image — use PNG.
## Export code
Beyond images, the **Code** button exports your design as React + Tailwind code — copy a snippet, or download the full bundle as a ZIP. You can export a single screen, several selected screens, or a whole file at once. When you export more than one screen, each becomes its own component file and any navigation you've set up between screens is wired into the generated code, so the exported app is clickable end to end. Bundles are self-contained: images used in the design (including ones you attached in the chat panel) are included in a `public/assets/` folder with the code referencing them by local path, so the export runs as-is.
Downloaded files — images and code bundles alike — are named after the screen they belong to (falling back to the file name if the screen is unnamed), which keeps exports easy to identify when you're working with many screens.
## Send designs to your coding agent
Instead of downloading a file, you can hand a design straight to an AI coding assistant. Click **Send to your coding agent** in the toolbar — or open the export dialog and choose the same option — to copy a ready-to-paste prompt for your agent:
> Your agent reads these screens over MCP and builds them in your repo. Paste this prompt into Claude, Cursor, or your preferred agent.
The prompt tells your agent to fetch the screens over the Flowstep MCP server and rebuild them in your codebase. You can hand off a single screen, several selected screens, or an entire file in one go — the prompt adapts to what you've selected.
This uses the Flowstep MCP server, so connect an MCP client first. See the [MCP server overview](/mcp/overview) for supported clients and the [Quickstart](/mcp/quickstart) to connect one.
If you need to take your design into a vector editing workflow, copy it directly into Figma instead. See [Copy Flowstep designs into Figma instantly](/figma-integration).
# Move designs between Flowstep and Figma
Source: https://docs.flowstep.ai/figma-integration
Copy any Flowstep frame into Figma with copy-and-paste, or import Figma frames into Flowstep as editable screens. Work across both tools without switching.
Flowstep is built to fit into the design workflow you already use — not to replace it. You can generate a design in Flowstep and immediately bring it into Figma using a simple copy-and-paste, or go the other way and import a Figma frame into Flowstep. This means you get the speed of AI-assisted design generation combined with the precision and collaboration features you rely on in Figma.
Flowstep and Figma are complementary tools, not competitors. Flowstep helps you rapidly generate and explore UI design ideas; Figma is where you refine, collaborate, and build out production-ready work. Using both together gives you the best of both.
## How to copy a Flowstep design into Figma
Click a screen to select it — or select several screens to copy them all in one go. Make sure the selection is highlighted in the canvas.
Press **Cmd+**⇧+**C** on Mac or **Ctrl+**⇧+**C** on Windows. Flowstep shows "Preparing your design. Stay on the current tab." while it works; the copy completes in a moment.
Switch to Figma and open the file where you want to place the design. Press **Cmd+V** on Mac or **Ctrl+V** on Windows to paste. The Flowstep screens appear on your Figma canvas, ready to edit.
Copying to Figma uses your browser's clipboard, so the browser must allow Flowstep clipboard access — if you see a permission error, allow clipboard access in your browser settings and try again. Switching tabs mid-copy interrupts the transfer; keep the Flowstep tab focused until the copy finishes.
Paste the frame onto a dedicated "AI imports" page in Figma to keep your working files organized. From there, you can move elements into your main design system or component library at your own pace.
## Import a design from Figma
You can also go the other way and bring a Figma frame into Flowstep as editable screens. Importing is available to everyone — connect your Figma account once, then import from a frame link.
Connect your Figma account to Flowstep from your settings. Flowstep uses Figma's authorization to read the files you have access to.
In Figma, right-click the frame you want and choose **Copy link to selection**. You can also copy a link to a whole page to import all of its top-level frames at once.
Use the Figma import option in the Flowstep toolbar and paste the link. Flowstep converts the frame into editable elements on your canvas. Re-importing the same frame updates it in place.
### What gets imported
Flowstep recreates a Figma frame as native, editable elements — not a flat image. An import brings across:
* Frames and their nested layers
* Text, including per-character styling like weight, colour, and bold
* Colours from your Figma variables
* Image fills, and SVG icons and shapes
* Drop and inner shadows, and layer and background blurs
* Dashed and dotted strokes
The file's organization must have Figma connected. If a frame won't import, Flowstep shows an actionable message that tells you what to do next — for example, reconnect Figma if your authorization has expired, wait and retry if Figma is rate-limiting or slow to respond, or, for a Community template, duplicate it to your team first and paste the new link.
# Generate UI screens from text prompts with Flowstep
Source: https://docs.flowstep.ai/generating-designs
Use Flowstep to generate one screen or up to 6 screens at once from a single text prompt — ideal for fast UI ideation and exploring full flows.
Flowstep generates UI screens from natural language prompts, letting you go from idea to visual design in seconds. Whether you need a single screen to validate a concept or a full set of screens covering an entire user journey, a well-written prompt is all it takes to get started.
## Generate a design
From your Flowstep dashboard, create a new project or open an existing one where you want to add screens.
Type a description of the screen or screens you want. Be specific about the type of app, the user goal, and the content you expect to see.
By default, Flowstep generates a single screen. If you want multiple screens, say so explicitly in your prompt — Flowstep can generate up to 6 screens from one prompt.
Submit your prompt. Flowstep produces your screens and displays them in the editor, ready to review or refine.
When you create a new file and send its first prompt, Flowstep names the file for you based on that prompt, so it's easy to find later. A file that already has a name — or earlier prompts — keeps its name, and you can rename any file yourself at any time.
## Single screen vs. multiple screens
You can generate either one screen or up to 6 screens from a single prompt. Both approaches suit different stages of design work.
* **One screen** — best for exploring a specific UI state, component, or focused concept.
* **Multiple screens** — best for mapping out flows, comparing layout options, or covering a full user journey quickly.
When you want multiple screens, be explicit in your prompt. Flowstep uses the wording of your prompt to decide how many screens to produce, so vague prompts typically return a single screen. Generated screens are named **Screen 1**, **Screen 2**, and so on — use these names to refer to a specific screen in follow-up prompts.
## More ways to prompt
Text isn't the only input. You can also:
* **Attach files** — add images (JPG, PNG, WEBP) or documents (PDF, MD, TXT) up to 3 MB each to the prompt, via drag-and-drop, the file picker, or by pasting. Reference an attached image in your prompt and Flowstep incorporates it into the generated screens. See [Use References](/design-references).
* **Dictate your prompt** — click the mic button in the prompt bar (or press **Cmd+Shift+V** on Mac, **Ctrl+Shift+V** on Windows) and speak for up to 60 seconds. The transcript is appended to whatever you've already typed.
* **Let Flowstep research the web** — when your prompt calls for it (for example, "clone the Stripe pricing page"), Flowstep can search the web and read a page's branding — colors, fonts, logo, UI components — and use it in the generated screens. Flowstep decides on its own whether to research, so it won't necessarily trigger on every prompt; note that recreated websites use different images and navigation than the original.
* **Set design guidelines** — define standing style rules that apply to every generation in the file. See [Design Guidelines](/design-guidelines).
## Writing effective prompts
**Single-screen prompt example:** "Design a mobile login screen for a fitness tracking app with email and password fields, a sign-in button, and a forgot password link."
**Multi-screen prompt example:** "Generate multiple screens for a food delivery app onboarding flow—cover selecting cuisine preferences, entering a delivery address, and confirming the first order."
**Full journey prompt example:** "Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval."
Keep these principles in mind when writing prompts:
* Name the platform (mobile, desktop, tablet) so Flowstep sizes screens correctly.
* Describe the user's goal, not just UI elements—Flowstep infers layout from intent.
* Include key content like labels, actions, or data if they matter to the design.
* Use phrases like "generate multiple screens" or "cover the full user journey" to trigger multi-screen output.
# Get started with Flowstep: sign up and generate designs
Source: https://docs.flowstep.ai/getting-started
Create a free Flowstep account, generate your first UI design from a text prompt, and share it with your team — all in one sitting.
Getting up and running with Flowstep takes only a few minutes. You sign up for free, describe what you want to build, and Flowstep generates your design immediately. From there you can refine it through follow-up prompts, invite your team to collaborate, and share the result with stakeholders — no design tools or prior experience needed.
Go to [flowstep.ai](https://flowstep.ai) and sign up with Google or with your email and password. No credit card is required to get started.
If you sign up with email and password, check your inbox for a confirmation email ("Confirm your Flowstep email") and click the link to activate your account — you can resend it from the "Check your inbox" page if it doesn't arrive. Disposable email addresses aren't accepted; use a work or personal email.
After signing up you land on a short welcome screen: answer three quick questions, then describe your first design right there — four sample prompts (Dashboard, Landing page, Mobile app, Checkout) are available if you want a starting point.
Type a prompt in plain English describing the UI you have in mind. Be specific about the purpose of the screen and any key elements it should include.
A prompt like "Dashboard for a project management app with a task list, progress bars, and a sidebar navigation" gives Flowstep enough context to produce a focused, useful design.
You don't need design vocabulary. Focus on what the screen is for and what information it should show — Flowstep handles the layout, typography, spacing, and color choices.
Submit your prompt and Flowstep generates your design in seconds. You can generate multiple screens in a single session to explore different directions or build out a full flow.
Not quite right? Type a follow-up prompt to adjust the design — change the color scheme, rearrange elements, swap out content, or request a different layout entirely. You can also edit elements manually or use one-click actions in the options menu.
When you're happy with the result, choose how to share it:
* **Export** the code or via MCP
* **Download** the screen as a JPG or PNG file
* **Copy to Figma** using the keyboard shortcut to paste directly into an existing Figma file
* **Share a link** with teammates or stakeholders — they can view the design without creating an account
You can invite your team to collaborate on a Flowstep file. They can join and start contributing within minutes.
# What is Flowstep?
Source: https://docs.flowstep.ai/introduction
Flowstep is an AI design tool that generates polished UI screens from text prompts. Learn what it does, who it's for, and what you can build with it.
Describe the screen you want, get a designed interface back in seconds.
For developers, it's the fastest way to spec a UI before writing the code. For PMs and founders, it's a way to communicate product ideas without ambiguity. For designers, it's a starting point that skips the blank canvas.
## What you can do with Flowstep
* **Generate screens from text** — describe what you want, get a designed UI in seconds
* **Iterate through prompts or direct edits** — refine layouts, copy, and styling without leaving the canvas
* **Preview as an interactive prototype** — Flowstep links your screens into a clickable flow automatically. See [Prototypes](/prototypes).
* **Connect to your IDE via MCP** — generate and edit screens from Cursor, Claude Code, Windsurf, or Claude Desktop. See [MCP Server](/mcp/overview).
* **Export to Figma, code, or as image files** — paste straight into an existing Figma file, export the code, or download screens as PNG/JPG
* **Share with one link** — reviewers don't need a Flowstep account to view or comment
## Who Flowstep is for
* **Developers** building product UI without a designer on call, or who want to spec a screen visually before implementing it
* **Product managers and founders** communicating ideas visually or validating an idea
* **Designers** skipping the blank canvas — start from a generated layout and edit from there
No design experience required. If you can describe a screen in plain English, Flowstep can generate it.
## Where to go next
Generate your first screen in under five minutes.
Use Flowstep from Cursor, Claude Code, or any MCP-compatible client.
How to write prompts that produce the screens you actually want.
Paste Flowstep designs into an existing Figma file with one shortcut.
# Access and download your Flowstep billing invoices
Source: https://docs.flowstep.ai/invoices
Flowstep automatically generates invoices for all paid plans after each billing cycle. Download them anytime from your account dashboard.
If you're on a paid Flowstep plan, you receive an invoice automatically after every billing cycle. Invoices are generated and stored through Stripe, and you can download them at any time directly from your account dashboard.
## How to find your invoices
Sign in to Flowstep and navigate to your account settings. Look for the **Billing** section in the sidebar or account menu.
In the **Billing** section, locate the invoice history. Flowstep uses Stripe to manage payments, so your invoices are displayed through the Stripe billing portal.
Find the billing cycle you need and click the download link next to it. Your invoice will download as a PDF.
## Who receives invoices
All paid plan subscribers receive invoices automatically. You do not need to request them manually — Flowstep generates and stores each invoice as soon as a payment is processed.
Free plan users do not receive invoices, as there are no charges on the free tier.
## Questions about a charge
If you see a charge you don't recognize or have a question about an invoice, check your billing cycle dates in the dashboard. For further help, refer to the [Billing](/billing) page or contact Flowstep support.
# MCP Authentication
Source: https://docs.flowstep.ai/mcp/authentication
How Flowstep MCP authenticates clients: OAuth 2.1 PKCE flow and account creation.
The `/mcp` endpoint requires a Supabase `access_token` passed as a Bearer token. Most MCP clients obtain this automatically via the OAuth 2.1 PKCE flow. You can also supply a token manually for testing.
## OAuth 2.1 PKCE flow
Flowstep implements a full OAuth 2.1 authorization server at `https://api.flowstep.ai`. MCP clients discover and complete the flow automatically: they open a browser window for you to log in and approve access, then handle the token exchange behind the scenes.
### Supported login methods
The authorization page at `/oauth/authorize` supports:
* **Email/password** — any Flowstep account with a password set
* **Google SSO** — redirects through Supabase social auth, returns to the client automatically
### Review and approve access
After you log in, Flowstep shows a consent screen before it issues a token — no client can finish connecting without your explicit approval. The screen is headed **Authorize access** and names the client that's requesting access — the client's name in bold, followed by "is requesting access to your Flowstep account" — then shows **You'll be redirected to** and the destination host.
Choose **Allow** to finish connecting, or **Deny** to cancel. Denying returns the client an `access_denied` error and issues no token.
The client name is set by whoever registered the client, so treat it as a label rather than proof of identity. Before you click **Allow**, check that the host under **You'll be redirected to** is one you expect for the client you're connecting.
### Account creation for claude.ai connector users
The OAuth login page does not include a sign-up form. If you're connecting via claude.ai's custom connector and don't have a Flowstep account yet, create one first at [app.flowstep.ai](https://app.flowstep.ai), then return to the connector setup to authenticate.
## Cookie fallback
If no `Authorization` header is present, the middleware falls back to a cookie-based Supabase session. This works when accessing `/mcp` directly from a browser with an active Flowstep session. MCP clients always use the Bearer path.
## Manual token (testing)
To call the endpoint directly without a client OAuth flow:
1. Sign in to [app.flowstep.ai](https://app.flowstep.ai) in your browser
2. Open DevTools → Console, run:
```javascript theme={"system"}
const pairs = document.cookie.split("; ").map((c) => {
const i = c.indexOf("=");
return [c.slice(0, i), c.slice(i + 1)];
});
const authPairs = pairs
.filter(([k]) => /^sb-.+-auth-token(\.\d+)?$/.test(k))
.sort(([a], [b]) => a.localeCompare(b));
const raw = authPairs.map(([, v]) => decodeURIComponent(v)).join("");
const session = JSON.parse(
raw.startsWith("base64-") ? atob(raw.slice(7)) : raw,
);
console.log(session.access_token);
```
3. Pass the token as a header:
```bash theme={"system"}
curl -X POST https://api.flowstep.ai/mcp \
-H "Authorization: Bearer " \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'
```
MCP sessions last 30 days — the server refreshes the underlying token transparently, so clients using the OAuth flow don't need to re-authenticate during normal use. A manually extracted token like the one above still expires after about an hour; it's for quick testing only.
# Flowstep MCP — claude.ai
Source: https://docs.flowstep.ai/mcp/clients/claude-ai
Connect Flowstep to claude.ai using a custom MCP connector.
Claude.ai supports custom MCP connectors via the Integrations panel.
## Add the connector
Go to **claude.ai → Settings → Integrations**.
Click **Add More** (or **Custom Connector**), then enter:
```
https://api.flowstep.ai/mcp
```
Claude.ai redirects your browser to `https://api.flowstep.ai/oauth/authorize`. Sign in with your Flowstep account (email/password or Google SSO). The page redirects back to claude.ai automatically.
Back in Integrations, confirm the Flowstep connector shows as connected. Toggle it on for the conversations where you want to use it.
You need an existing Flowstep account to authenticate. If you don't have one, create it at [app.flowstep.ai](https://app.flowstep.ai) first, then return here to complete the connector setup.
## Verify the connection
In a claude.ai conversation with the Flowstep connector enabled:
```
List my Flowstep files
```
## Usage
Once connected, describe what you want in natural language:
```
Create a Flowstep file called "Checkout flow" and generate a three-step checkout screen
for an e-commerce app: cart review, address entry, and payment. Show me each screen.
```
Claude will call the Flowstep tools in sequence and display the rendered images inline.
# Flowstep MCP — Claude Code
Source: https://docs.flowstep.ai/mcp/clients/claude-code
Connect Flowstep to Claude Code (CLI) using the Streamable HTTP MCP transport.
## Configuration
Add the server to your Claude Code settings. Use the global settings file to enable it everywhere, or add it per-project.
```json theme={"system"}
{
"mcpServers": {
"flowstep-production": {
"type": "http",
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
```json theme={"system"}
{
"mcpServers": {
"flowstep-production": {
"type": "http",
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
Alternatively, use the CLI:
```bash theme={"system"}
claude mcp add --transport http flowstep-production https://api.flowstep.ai/mcp
```
## Authentication
Claude Code handles the OAuth 2.1 PKCE flow automatically the first time it calls a Flowstep tool. Your browser opens to `https://api.flowstep.ai/oauth/authorize`. Sign in with your Flowstep credentials and the CLI captures the callback.
You need a Flowstep account before authenticating. Create one at [app.flowstep.ai](https://app.flowstep.ai).
## Verify the connection
```bash theme={"system"}
claude mcp list
```
The server should appear as connected. Then in a Claude Code session:
```
List my Flowstep files
```
## Usage example
```
Create a Flowstep file called "Settings page", generate a desktop settings screen
for a developer tool with sections for API keys, notifications, and team members.
Show me the rendered image when done.
```
# Flowstep MCP — Claude Desktop
Source: https://docs.flowstep.ai/mcp/clients/claude-desktop
Connect Flowstep to Claude Desktop using the Streamable HTTP MCP transport.
## Configuration
Edit `claude_desktop_config.json`. The file location depends on your OS:
* **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
* **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"type": "http",
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
Requires Node.js installed.
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://api.flowstep.ai/mcp"]
}
}
}
```
Restart Claude Desktop after saving.
## Authentication
Claude Desktop opens your browser to `https://api.flowstep.ai/oauth/authorize` on first connection. Sign in with your Flowstep credentials and the app captures the callback.
You need a Flowstep account before connecting. Create one at [app.flowstep.ai](https://app.flowstep.ai).
## Verify the connection
In a Claude Desktop conversation:
```
List my Flowstep files
```
If you see a file list (or an empty array if you have no files yet), the connection is working.
## Usage example
```
Create a Flowstep file called "Profile page", generate a mobile profile screen
with an avatar, display name, bio, and an edit button. Show me the rendered image.
```
Claude Desktop will call `create-file` → `ai-prompt` → `get-screen-image` in sequence.
# Flowstep MCP — Codex
Source: https://docs.flowstep.ai/mcp/clients/codex
Connect Flowstep to OpenAI Codex using the Streamable HTTP MCP transport.
## Configuration
Add the server with the Codex CLI:
```bash theme={"system"}
codex mcp add flowstep --url https://api.flowstep.ai/mcp
```
Or edit the config file directly. Use the global file to enable it everywhere, or the project file (trusted projects only) to keep it scoped.
```toml theme={"system"}
[mcp_servers.flowstep]
url = "https://api.flowstep.ai/mcp"
```
```toml theme={"system"}
[mcp_servers.flowstep]
url = "https://api.flowstep.ai/mcp"
```
Codex picks the Streamable HTTP transport automatically when a `url` is set — no transport field needed.
## Authentication
Run:
```bash theme={"system"}
codex mcp login flowstep
```
Codex opens your browser to `https://api.flowstep.ai/oauth/authorize`. Sign in with your Flowstep credentials (email/password or Google SSO). Codex captures the callback and stores the token.
You need a Flowstep account before connecting. Create one at [app.flowstep.ai](https://app.flowstep.ai).
## Verify the connection
```bash theme={"system"}
codex mcp list
```
The server should appear with its OAuth status. Inside a Codex session, type `/mcp` to see connected servers, then ask:
```
List my Flowstep files
```
If the tool call succeeds, the connection is working.
## Usage example
```
Create a Flowstep file called "Checkout flow", generate a mobile payment screen
with a card form and an order summary, then show me the rendered image.
```
Codex will call `create-new-design` → `get-screen-image` and display the result.
# Flowstep MCP — Cursor
Source: https://docs.flowstep.ai/mcp/clients/cursor
Connect Flowstep to Cursor using the Streamable HTTP MCP transport.
## Configuration
Add the server to your MCP config. Cursor looks for this in two locations — use the global file to enable it across all projects, or the project file to keep it scoped.
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
Restart Cursor after saving the file.
## Authentication
Open **Settings → MCP** and click **Connect** next to Flowstep. Cursor opens your browser to `https://api.flowstep.ai/oauth/authorize`. Sign in with your Flowstep credentials (email/password or Google SSO). Cursor captures the callback automatically and stores the token.
You need a Flowstep account before connecting. Create one at [app.flowstep.ai](https://app.flowstep.ai).
## Verify the connection
In a Cursor chat, type:
```
List my Flowstep files
```
If the tool call succeeds, the connection is working.
## Usage example
```
Create a Flowstep file called "Onboarding", generate a mobile sign-up screen
with name, email, and password fields, then show me the image.
```
Cursor will call `create-file` → `ai-prompt` → `get-screen-image` in sequence.
# Flowstep MCP — Windsurf
Source: https://docs.flowstep.ai/mcp/clients/windsurf
Connect Flowstep to Windsurf using the Streamable HTTP MCP transport.
## Configuration
Edit `~/.codeium/windsurf/mcp_config.json`:
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"serverUrl": "https://api.flowstep.ai/mcp"
}
}
}
```
Restart Windsurf after saving.
## Authentication
On first use, Windsurf opens your browser to the Flowstep OAuth login page. Sign in with your Flowstep credentials (email/password or Google SSO) and Windsurf stores the token.
You need a Flowstep account before connecting. Create one at [app.flowstep.ai](https://app.flowstep.ai).
## Verify the connection
Open the MCP panel in Windsurf and confirm Flowstep is listed. In a Cascade chat:
```
List my Flowstep files
```
## Usage example
```
Create a Flowstep file called "Empty states", then generate a mobile empty-state screen
for a task list app with an illustration placeholder and a call-to-action button.
Show me the rendered result.
```
# MCP Examples
Source: https://docs.flowstep.ai/mcp/examples
End-to-end workflows for common Flowstep MCP tasks.
## 1. Generate and preview a screen
The most common workflow: generate a screen (creating the file in the same step), then view the result.
```
1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
Email/password fields, Google SSO button, dark theme." }
→ { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }
2. get-screen-image { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
→ [inline PNG]
```
Omitting `fileId` creates a new file automatically. Pass an existing `fileId` to add screens to that file instead.
**Prompt to your AI assistant:**
> Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.
***
## 2. Visualise a React component
Upload a `.jsx` or `.tsx` file as an attachment and ask Flowstep to generate a matching design. Flowstep reads the source and produces a screen — no need to run the app.
```
1. upload-attachment { "fileData": "",
"fileName": "ApiKeys.tsx",
"mimeType": "text/javascript" }
→ { "id": "ATT_ID", "path": "...", "type": "document",
"mimeType": "text/javascript" }
2. create-new-design { "message": "Generate a desktop screen that matches this React component.",
"attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
→ { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }
3. get-screen-image { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
→ [inline PNG]
```
**Prompt to your AI assistant:**
> Read `src/components/settings/ApiKeys.tsx`, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.
***
## 3. Iterate on an MCP-generated screen
`edit-design` and `regenerate-design` require design context that is only present on screens generated with a `designs` array. For screens generated without one, the workaround is to render the screen as an attachment and call `create-new-design` with the image.
```
1. upload-attachment { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
→ { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }
2. create-new-design { "fileId": "FILE_ID",
"message": "Change the color scheme to dark mode and
add a 'Remember me' checkbox below the password field.",
"attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
→ { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }
3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
→ [inline PNG]
```
For screens that do have design context, call `edit-design` directly with the change in `message` and the screen in `targets`.
***
## 4. Expand a screen to a full flow
Add follow-on screens to an existing design.
```
1. list-screens { "fileId": "FILE_ID" }
→ [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]
2. expand-design { "fileId": "FILE_ID",
"message": "Add the next screen in the user flow",
"operationVariant": "next_screen",
"targets": ["BASE_SCREEN_ID"] }
→ { "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"] }
3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
→ [inline PNG]
```
Repeat step 2 with `operationVariant: "error_state"` or `"empty_state"` to add edge-case screens.
`operationVariant` is a required parameter for `expand-design`. The base screen must also have been generated with a `designs` array (design context) — for screens without it, use the attachment workaround from Example 3.
***
## 5. Audit quota before a batch job
Check remaining capacity before kicking off multiple generations.
```
get-plan-details {}
→ {
"remaining": {
"messages": { "daily": 38, "monthly": 413 }
}
}
```
If `daily` is low, schedule the batch for after 00:00 UTC when it resets.
# Flowstep MCP Server
Source: https://docs.flowstep.ai/mcp/overview
Use Flowstep as an MCP server to generate, inspect, and manage UI designs directly from Cursor, Claude Code, or any MCP-compatible client.
Flowstep exposes its design tools over the [Model Context Protocol](https://modelcontextprotocol.io/), letting your AI assistant create and iterate on UI screens without leaving your editor.
The server is hosted at `https://api.flowstep.ai/mcp` (Streamable HTTP transport). No local process to run.
## What you can do
The server exposes 21 tools across seven categories:
| Category | Tools |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Files** | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file` |
| **Screens** | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`, `rename-screen` |
| **AI generation** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat** | `get-chat-history` |
| **Design** | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines` |
| **Figma** | `import-figma` |
| **Billing** | `get-plan-details` |
## Common use cases
**Generate screens from a prompt** — call `create-new-design` with a description. Flowstep creates the file and screens in one step. Call `get-screen-image` with the returned `screenIds` to see the result inline.
**Visualise a React component** — upload your `.jsx` or `.tsx` file via `upload-attachment` (use `mimeType: text/javascript`), then pass the returned attachment into `create-new-design` with a message describing the component. Flowstep reads the source and generates a matching design screen.
**Iterate on a design** — call `edit-design` with a target `screenId` and instructions to modify it, or `regenerate-design` to redo a screen from scratch.
**Maintain design guidelines** — call `get-design-guidelines` to retrieve your current style rules (colours, typography, spacing, tone), then use `update-design-guidelines` to keep them in sync as your design evolves. Passing consistent guidelines into `create-new-design` or `edit-design` ensures every generated screen stays on-brand. Use `delete-design-guidelines` to reset them entirely.
**Import from Figma** — call `import-figma` with a Figma frame link and a `fileId` to bring the frame into a Flowstep file as editable elements. The file's organization must have Figma connected first.
**Audit quota** — call `get-plan-details` to see remaining daily and monthly usage before kicking off a batch of generations.
## Endpoint
```
https://api.flowstep.ai/mcp
```
Transport: Streamable HTTP. Session model: stateless (each request is independent, no session ID).
## Next steps
First tool call in under 5 minutes with Cursor.
How OAuth 2.1 PKCE works and how tokens are issued.
Full input/output reference for all 21 tools.
End-to-end workflows for common tasks.
# MCP Quickstart
Source: https://docs.flowstep.ai/mcp/quickstart
Connect Flowstep to your AI editor and run your first tool call.
## Prerequisites
* A Flowstep account ([app.flowstep.ai](https://app.flowstep.ai))
**Requires Cursor v0.43+**
## Step 1 — Add the server
Create or edit `~/.cursor/mcp.json` (global) or `.cursor/mcp.json` in your project root:
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
Restart Cursor after saving.
## Step 2 — Authenticate
Open the Cursor MCP panel (Settings → MCP) and click **Connect** next to Flowstep. Cursor opens your browser to the Flowstep OAuth login. Sign in with your Flowstep credentials (email/password or Google). The browser redirects back and Cursor stores the token automatically.
You need a Flowstep account before authenticating. If you don't have one, sign up at [app.flowstep.ai](https://app.flowstep.ai) first.
## Step 3 — Run a tool call
In a Cursor chat, ask:
> "List my Flowstep files"
Cursor calls `list-files` and returns your file list. If the response is empty, create a file first:
> "Create a new Flowstep file called 'Dashboard'"
## Step 4 — Generate a screen
```
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 calls `create-new-design` (which creates the file and generates the screens in one step), then `get-screen-image`. You'll see the rendered design inline in the chat.
**Requires Claude Code CLI**
## Step 1 — Add the server
Create `.mcp.json` in your project root (project-scoped) or `~/.claude/mcp.json` (global):
```json theme={"system"}
{
"mcpServers": {
"flowstep": {
"type": "http",
"url": "https://api.flowstep.ai/mcp"
}
}
}
```
The `"type": "http"` field is required for Claude Code HTTP servers. Cursor does not need it.
## Step 2 — Authenticate
Run any Flowstep tool from a Claude Code chat. On first use, Claude Code opens your browser to the Flowstep OAuth login. Sign in with your Flowstep credentials (email/password or Google). The browser redirects back and the token is stored automatically.
You need a Flowstep account before authenticating. If you don't have one, sign up at [app.flowstep.ai](https://app.flowstep.ai) first.
## Step 3 — Run a tool call
In a Claude Code chat, ask:
> "List my Flowstep files"
Claude Code calls `list-files` and returns your file list. If the response is empty, create a file first:
> "Create a new Flowstep file called 'Dashboard'"
## Step 4 — Generate a screen
```
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 calls `create-new-design` (which creates the file and generates the screens in one step), then `get-screen-image`. You'll see the rendered design inline in the chat.
## Next steps
* [Tools reference](/mcp/tools) — full input/output docs for all 20 tools
* [Examples](/mcp/examples) — multi-step workflows
* [Other clients](/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai
# MCP Tools Reference
Source: https://docs.flowstep.ai/mcp/tools
Input schema, output shape, and examples for all 21 Flowstep MCP tools.
All tools return a `content` array of MCP content blocks. Text tools return `{ type: "text", text: "" }`. Image tools return `{ type: "image", data: "", mimeType: "image/png" }`. On failure, `isError: true` is set and the text block contains the error message.
***
## File tools
### `list-files`
List Flowstep files for the current user.
**Input**
| Parameter | Type | Default | Description |
| ----------------- | ----------------- | ------- | ------------------------- |
| `orderByCreation` | `boolean` | `true` | Order by creation date |
| `limit` | `integer` (1–100) | `20` | Number of files to return |
| `offset` | `integer` (≥0) | `0` | Pagination offset |
**Output** — JSON array of file objects.
```json theme={"system"}
[
{
"id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
"name": "Dashboard redesign",
"created_at": "2026-04-30T15:02:13.120152+00:00",
"updated_at": "2026-04-30T15:02:13.120152+00:00",
"owner": true,
"url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
}
]
```
***
### `get-file`
Get a single file by ID. File content is intentionally omitted — use `get-screen` or `get-screen-image` to inspect screens, and `get-design-guidelines` to retrieve attached guidelines.
**Input**
| Parameter | Type | Description |
| --------- | ------ | ----------- |
| `id` | `uuid` | File ID |
**Output** — JSON file object.
```json theme={"system"}
{
"file": {
"id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
"name": "Dashboard redesign",
"project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
"created_at": "2026-04-30T15:02:13.120152+00:00",
"updated_at": "2026-04-30T15:02:13.120152+00:00",
"access_level": "private",
"owner": true,
"url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
},
"user_access_level": "write"
}
```
***
### `create-file`
Create a new Flowstep file.
**Input**
| Parameter | Type | Description |
| --------- | ---------------- | ----------- |
| `title` | `string` (min 1) | File name |
**Output** — JSON file object with the new file's `id`.
```json theme={"system"}
{
"id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
"name": "Dashboard redesign",
"project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
"created_at": "2026-04-30T15:02:13.120152+00:00",
"updated_at": "2026-04-30T15:02:13.120152+00:00",
"access_level": "private",
"user_access_level": "write",
"owner": true,
"url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
}
```
Use the returned `id` as `fileId` in subsequent tool calls.
***
### `update-file`
Rename a file.
**Input**
| Parameter | Type | Description |
| --------- | ---------------- | ----------- |
| `id` | `uuid` | File ID |
| `name` | `string` (min 1) | New name |
**Output** — Updated file object in the same shape as `get-file`.
```json theme={"system"}
{
"file": {
"id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
"name": "Dashboard redesign (v2)",
"project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
"created_at": "2026-04-30T15:02:13.120152+00:00",
"updated_at": "2026-04-30T15:02:13.120152+00:00",
"access_level": "private",
"owner": true,
"url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
},
"user_access_level": "write"
}
```
***
### `delete-file`
Permanently delete a file. The `name` you pass is verified against the file's actual name before deletion — if it does not match, the deletion is aborted. This prevents accidentally deleting the wrong file.
**Input**
| Parameter | Type | Description |
| --------- | -------- | -------------------------------------------------------------------- |
| `id` | `uuid` | File ID |
| `name` | `string` | Current name of the file — must match exactly or deletion is aborted |
**Output** — `"File deleted successfully"`
This is irreversible. All screens in the file are deleted.
***
## Screen tools
### `list-screens`
List all generated screens for a file. Use the returned `screenId` values to reference screens in `get-screen`, `get-screen-image`, and as `targets` in `edit-design`, `regenerate-design`, or `expand-design`.
**Input**
| Parameter | Type | Description |
| --------- | ------ | ----------- |
| `fileId` | `uuid` | File ID |
**Output** — JSON array of screen summaries.
```json theme={"system"}
[
{
"screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
"name": "Mobile login screen",
"fidelity": "ui",
"prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
"createdAt": "2026-04-30T15:02:37.444139+00:00"
}
]
```
`name` is the user-assigned screen name, or `null` if unnamed.
***
### `get-screen`
Get the JSX code for a screen allowing you to edit or use the code outside of Flowstep. Use `get-screen-image` for a visual preview instead.
**Input**
| Parameter | Type | Description |
| ---------- | ------ | ------------------------------------------------------------------------------------------------- |
| `fileId` | `uuid` | File ID |
| `screenId` | `uuid` | The `screenId` returned by `list-screens` or from the `screenIds` array returned by a design tool |
**Output** — The screen as code (JSX). Note the first line comment which is required when using the `add-screen` tool.
```json theme={"system"}
World Clock
Search cities...
...
;
```
***
### `add-screen`
Adds a new screen to a Flowstep file from a raw JSX string.
**Input**
| Parameter | Type | Description |
| ------------ | -------- | ------------------------------------------------------------------------------- |
| `fileId` | `uuid` | File ID |
| `jsxContent` | `string` | JSX to add to the file as a screen |
| `screenType` | `string` | Required if the screen type is not defined as a comment at the start of the JSX |
**Note** - A comment similar to the one below MUST be present as the first line of the JSX as it is used to add the screen correctly. `screenType`, `name`, and `screenId` are all optional — `screenId` is used (internally) if present (e.g. when passing JSX copied from `get-screen` output) but is not mandatory. The screen name is taken from the comment's `name` field (displayed as "Copy of \"), or "Untitled" if absent.
``
**Output** — The newly added screen Id.
```json theme={"system"}
{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }
```
***
### `get-screen-image`
Render a screen to PNG and return it as an inline image. Requires a client that supports image content blocks.
**Input**
| Parameter | Type | Description |
| ---------- | ------ | ------------------------------------------------------------------------------------------------- |
| `fileId` | `uuid` | File ID |
| `screenId` | `uuid` | The `screenId` returned by `list-screens` or from the `screenIds` array returned by a design tool |
**Output** — MCP image content block (`image/png`).
***
### `rename-screen`
Rename a screen's canvas label — the name shown by `list-screens` and in the editor. This changes the label only, not the screen's layout, size, or content — use `edit-design` for those.
**Input**
| Parameter | Type | Description |
| ---------- | ---------------------- | ----------------------------------------------------------- |
| `fileId` | `uuid` | File ID |
| `screenId` | `uuid` | The `screenId` returned by `list-screens` |
| `name` | `string` (1–100 chars) | New screen name. Leading and trailing whitespace is trimmed |
**Output** — `{ screenId, name }`.
```json theme={"system"}
{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }
```
***
## AI tools
`regenerate-design`, `expand-design`, and `edit-design` require design context that is only present on screens originally generated with a `designs` array. Screens generated without design context will return an error.
### `create-new-design`
Generate one or more screen designs from a text prompt. Omit `fileId` to create a new file automatically. Blocks until generation completes or times out (180 seconds).
**Input**
| Parameter | Type | Default | Description |
| ------------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fileId` | `uuid` | — | Target file — omit to create a new file automatically. Required when `targets` is set |
| `message` | `string` | — | Prompt describing the screens to generate |
| `targets` | `uuid[]` | `[]` | Optional visual references — `screenId`s from `list-screens` and/or subelement IDs from `get-screen`. The referenced screens are used only as visual inspiration; they are not edited in place |
| `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Pre-uploaded attachments — images, PDFs, or code files. Always upload via `upload-attachment` first; do not inline file contents in the message |
| `designs` | `DesignRequestData[]` | `[]` | Design references |
**Output** — `{ fileId, screenIds, designGuidelinesUpdated }`. Pass each `screenId` to `get-screen-image` to view results. `designGuidelinesUpdated` reports whether the file's design guidelines were changed as part of this generation.
```json theme={"system"}
{
"fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
"screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"],
"designGuidelinesUpdated": false
}
```
***
### `regenerate-design`
Redo existing screens from scratch or with a style variation. Requires at least one `screenId` in `targets`. Blocks until generation completes or times out (180 seconds).
**Input**
| Parameter | Type | Default | Description |
| ------------------ | ----------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fileId` | `uuid` | — | Target file |
| `message` | `string` | — | Prompt text |
| `targets` | `uuid[]` (min 1) | — | screenIds of screens to regenerate |
| `operationVariant` | `"different_layout" \| "different_style" \| "from_scratch"` | — | **Required** — how to redo the screen: `different_layout` (keep style and content, change the layout), `different_style` (keep layout and content, change colors and visual treatment), or `from_scratch` (new layout, style, and content for the same purpose) |
| `designs` | `DesignRequestData[]` | `[]` | Design references (resolved automatically) |
**Output** — `{ fileId, screenIds, designGuidelinesUpdated }`. Pass each `screenId` to `get-screen-image` to view results.
***
### `expand-design`
Add follow-on screens to an existing design. Requires at least one `screenId` in `targets` and a mandatory `operationVariant`. Blocks until generation completes or times out (180 seconds).
**Input**
| Parameter | Type | Default | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------- |
| `fileId` | `uuid` | — | Target file |
| `message` | `string` | — | Prompt text |
| `targets` | `uuid[]` (min 1) | — | screenIds of screens to expand from |
| `operationVariant` | `"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"` | — | **Required** — type of follow-on screen to generate |
| `designs` | `DesignRequestData[]` | `[]` | Design references (resolved automatically) |
**Output** — `{ fileId, screenIds, designGuidelinesUpdated }`. Pass each `screenId` to `get-screen-image` to view results.
***
### `edit-design`
Modify existing screens via a prompt. Requires at least one `screenId` in `targets`. Blocks until generation completes or times out (180 seconds).
**Input**
| Parameter | Type | Default | Description |
| ------------------ | ------------------------------------------------ | ------- | --------------------------------------------------------------------- |
| `fileId` | `uuid` | — | Target file |
| `message` | `string` | — | Instructions describing the edits to apply |
| `targets` | `uuid[]` (min 1) | — | screenIds of screens to edit |
| `operationVariant` | `"dark_theme" \| "light_theme" \| "make_pretty"` | — | Optional style shortcut |
| `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Pre-uploaded attachments. Always upload via `upload-attachment` first |
| `designs` | `DesignRequestData[]` | `[]` | Design references (resolved automatically) |
**Output** — `{ fileId, screenIds, designGuidelinesUpdated }`. Pass each `screenId` to `get-screen-image` to view results.
***
### `upload-attachment`
Upload a file to use as an attachment in `create-new-design` or `edit-design` (not `regenerate-design` or `expand-design`). File bytes never pass through the model, and the server never fetches URLs on your behalf.
There are two modes — use exactly one, and don't combine them.
**Mode A — files and images (`mimeType` + `fileName`)**
A required three-step flow for any image, PDF, or larger text file:
1. Call `upload-attachment` with `mimeType` and `fileName` only (for example `image/png` and `dog.png`). The response is a *prepared* upload, not a stored file:
```json theme={"system"}
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
"path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
"type": "image",
"mimeType": "image/png",
"signedUrl": "https://…",
"uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
"nextStep": "…"
}
```
2. Replace `LOCAL_FILE_PATH` in `uploadCommand` with the absolute path to your file and run that exact command in your shell — it must exit 0. The token in `signedUrl` authorizes only this single upload. **Skipping this step leaves storage empty and the design tool fails its preflight check.**
3. Pass only `{ id, path, type }` into the design tool's `attachments` array — not `signedUrl`, `uploadCommand`, or `nextStep`.
To attach a remote file, download it to a local path yourself first (for example with `curl`), then follow the same three steps. Never pass a URL to `upload-attachment`.
| Parameter | Type | Description |
| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mimeType` | enum | File MIME type. One of `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Use `text/javascript` for `.jsx`, `.tsx`, `.js`, `.ts` files |
| `fileName` | `string` (min 1) | Original filename with extension, for example `cat.png` or `design.md` |
**Mode B — short text (`text` + `mimeType`)**
Upload text that's already in context — no shell command needed. The response is ready to use directly:
```json theme={"system"}
{
"id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
"path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
"type": "document",
"mimeType": "text/plain"
}
```
| Parameter | Type | Description |
| ---------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `text` | `string` (max 64,000 chars) | Raw text content. Text files only — don't use for images or PDFs. Longer than 64,000 characters? Use Mode A instead |
| `mimeType` | enum | One of `text/markdown`, `text/plain`, `text/javascript` |
Pass the resulting `{ id, path, type }` into the `attachments` array of `create-new-design` or `edit-design`.
Maximum file size is **3 MB** across both modes, and PDFs are capped at 100 pages. `type` is `"image"` for image files and `"document"` for PDFs and text files.
***
## Chat tools
### `get-chat-history`
Get the chat message history for a file.
**Input**
| Parameter | Type | Description |
| --------- | ------ | ----------- |
| `fileId` | `uuid` | File ID |
**Output** — JSON object with a `messages` array. Each message has a `type` (`"request"` or `"response"`), `author` (`"human"` or `"ai"`), and `content_type` (`"text"`, `"summary"`, or `"followup"`).
```json theme={"system"}
{
"messages": [
{
"id": "453f593d-2380-425b-ba29-127db08d6a8e",
"chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
"type": "request",
"status": "success",
"content": "Generate a simple mobile login screen with email and password fields",
"author": "human",
"content_type": "text",
"sequence": 1,
"request_message_id": null,
"targets": [],
"attachments": []
},
{
"id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
"chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
"type": "response",
"status": "success",
"content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and sign up link.",
"author": "ai",
"content_type": "summary",
"sequence": 7,
"request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
"targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }],
"attachments": []
}
]
}
```
***
## Design tools
### `get-design-guidelines`
Get the design guidelines stored for a file.
**Input**
| Parameter | Type | Default | Description |
| ------------ | -------- | -------- | ------------- |
| `resourceId` | `uuid` | — | File ID |
| `linkedTo` | `"file"` | `"file"` | Resource type |
**Output**
```json theme={"system"}
{
"guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter",
"linkedTo": "file"
}
```
`guidelines` is `null` if no guidelines have been set.
***
### `update-design-guidelines`
Set or replace the design guidelines for a file. Guidelines are passed as a plain text string in Google's `design.md` format — do not pass an object or JSON.
The server performs soft validation and may return a `Warnings:` section in the response listing issues (unknown keys, non-hex colours) that were accepted but may be ignored by the AI. Surface these to the user.
**Input**
| Parameter | Type | Default | Description |
| ------------------ | ---------------- | -------- | ----------------------------------------------------------------------------- |
| `resourceId` | `uuid` | — | File ID |
| `designGuidelines` | `string` (min 1) | — | Raw text content of the guidelines. Must be a plain string — not JSON-encoded |
| `linkedTo` | `"file"` | `"file"` | Resource type |
**Validation rules**
* Frontmatter must be opened and closed correctly
* Frontmatter lines must be valid block-style YAML
* Markdown body must not contain duplicate `##` section headings
**Output** — `"Design guidelines updated successfully"`, optionally followed by a `Warnings:` section.
***
### `delete-design-guidelines`
Clear the design guidelines for a file.
**Input**
| Parameter | Type | Default | Description |
| ------------ | -------- | -------- | ------------- |
| `resourceId` | `uuid` | — | File ID |
| `linkedTo` | `"file"` | `"file"` | Resource type |
**Output** — `"Design guidelines deleted successfully"`
***
## Figma tools
### `import-figma`
Import a Figma frame into a Flowstep file as editable elements on its canvas. Re-importing the same frame updates it in place. The file's organization must have Figma connected in Flowstep settings.
**Input**
| Parameter | Type | Description |
| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `figmaUrl` | `string` | Link to a specific Figma frame. In Figma, right-click the frame and choose **Copy link to selection**. A link to a page imports all top-level frames on that page (capped at 20 frames over MCP). |
| `fileId` | `uuid` | The Flowstep file to import the frame into |
**Output** — `{ fileId, screenId }`. `screenId` is the id of the imported screen element — pass it to `get-screen-image` to view the result. When a page URL imports multiple frames, `screenId` is `null` and `frameCount` is returned instead.
```json theme={"system"}
{
"fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
"screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}
```
***
## Billing tools
### `get-plan-details`
Get the current user's plan, subscription status, and remaining quota. Takes no input.
**Output**
```json theme={"system"}
{
"plan": {
"name": "Starter",
"code": "starter",
"type": "paid"
},
"subscription": {
"isPaid": true,
"isTrial": false,
"startDate": "2025-01-01T00:00:00Z",
"endDate": null,
"trialDaysRemaining": null
},
"limits": {
"messages": {
"daily": { "max": 50, "warn": 40 },
"monthly": { "max": 500, "warn": 400 },
"unlimited": false
}
},
"usage": {
"messages": { "daily": 12, "monthly": 87 }
},
"remaining": {
"messages": { "daily": 38, "monthly": 413 }
}
}
```
Limits vary by plan. Call this tool before a batch of generations to check available quota.
# MCP Usage Limits
Source: https://docs.flowstep.ai/mcp/usage-limits
How Flowstep usage limits apply to MCP tool calls, and how to check your remaining quota.
Flowstep usage limits apply at the **organization** level and are **shared** between the web app and the MCP server. A generation kicked off in Cursor counts against the same quota as one started from app.flowstep.ai.
## How limits work
Limits are per-feature (the primary feature is `messages`). Each plan defines:
* A **daily limit** — resets at **00:00 UTC** every day
* A **monthly limit** — resets on the **date of the account sign up or paid subscription start each month**
Hitting either limit blocks further generations until it resets.
## Checking your quota
Call `get-plan-details` to see your current limits, usage, and remaining quota:
```json theme={"system"}
// Response (excerpt)
{
"limits": {
"messages": {
"daily": { "max": 50, "warn": 40 },
"monthly": { "max": 500, "warn": 400 },
"unlimited": false
}
},
"usage": {
"messages": { "daily": 12, "monthly": 87 }
},
"remaining": {
"messages": { "daily": 38, "monthly": 413 }
}
}
```
Actual limit values depend on your plan. Run the tool to see your specific numbers. See [Pricing](https://flowstep.ai/pricing) for per-plan details.
## Per-request limits (all plans)
These limits are enforced at the request level regardless of plan:
| Limit | Value |
| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Max attachments per `create-new-design` / `edit-design` call | 5 |
| Max attachment size | 3 MB |
| Supported attachment types | `image/jpeg`, `image/png`, `image/webp`, `application/pdf` (base64), plus text/code files — `.html`, `.htm`, `.js`, `.ts`, `.jsx`, `.tsx` — as plain UTF-8 |
| Generation timeout (`create-new-design`, `edit-design`, `regenerate-design`, `expand-design`) | 180 seconds |
## Failed generations don't count
If a generation request fails — due to a timeout, a server error, or an invalid input — it does **not** consume a message.
# Flowstep messages explained: usage limits and resets
Source: https://docs.flowstep.ai/messages-and-limits
Find out what counts as a message in Flowstep, how daily and monthly limits work, how limits apply per seat in a team, and what happens when you hit your limit.
Flowstep measures your usage in messages. Each plan includes a monthly message allowance, and some plans — such as the Free plan — also have a daily limit. Understanding how messages are counted — and when your limits reset — helps you get the most out of your plan.
## What is a message?
Every time you send a prompt to Flowstep, that counts as one message. This includes initial design requests and follow-up prompts to refine or iterate on an existing design.
You don't lose a message to a failed generation. If a generation fails, the message is credited back to you automatically — including when only some screens in a multi-screen request fail.
## Usage limits
Depending on your plan, you may have both a **daily message limit** and a **monthly message limit**. Once you reach either limit, you'll need to wait for it to reset before sending more prompts.
You can see how many messages you have left in the editor's prompt panel, and your plan's limits on the **Settings → Plan & Billing** page.
## Limits in organizations
On paid plans, message limits apply per seat: every member with a seat gets the plan's full message allowance individually. Usage isn't pooled — one teammate's heavy usage doesn't eat into anyone else's messages. See [Seats](/seats) for how seats work.
## What happens when you hit your limit
If you submit a prompt after reaching your limit, the prompt isn't processed and doesn't use up a message. Instead, Flowstep replies in the chat to let you know, and the reply is tailored to why you're blocked:
* **Daily limit** — you've used your messages for today. Upgrade to keep going, or come back after the daily reset at 00:00 UTC.
* **Monthly limit** — you've used your messages for the month. The reply shows the date your limit resets, or you can upgrade for more messages.
* **Trial** — you've used your trial messages. Upgrade to keep going, or wait for your Free plan to start when your trial ends.
You can still view your designs and edit them manually while you wait.
The reply invites you to upgrade, but only the Owner can change the plan. If you're a Member or Admin and hit your limit, ask the Owner to upgrade — or wait for your limit to reset.
On the free trial, using up your trial messages ends the trial early — your account moves to the Free plan the next day (shortly after midnight UTC). See [Pricing](/pricing).
## When limits reset
Your limits reset on a fixed schedule:
* **Monthly limits** reset on the **1st of each month**.
* **Daily limits** reset at **00:00 UTC** every day.
If you're unsure what time 00:00 UTC corresponds to in your timezone, you can use any timezone converter to find the equivalent local time.
## Staying within your limits
If you consistently reach your daily or monthly limits, consider upgrading to a higher plan. Visit the [Pricing](/pricing) page or the [Flowstep website](https://flowstep.ai/pricing) to compare plan options.
# How to use Flowstep without prior design experience
Source: https://docs.flowstep.ai/no-design-skills
You don't need a design background to create great UI screens with Flowstep. Learn how to describe what you want and let Flowstep handle the rest.
There's no need to know the difference between a typeface and a font, understand grid systems, or have ever opened a design tool before. Flowstep handles layout, typography, color, spacing, and visual hierarchy automatically — your job is simply to describe what you want.
## How it works without design skills
When you type a prompt, Flowstep interprets your description and makes all the visual decisions that a designer would normally make: how to arrange elements on screen, which fonts to use, how much whitespace to add, and how to establish a visual hierarchy that guides the eye. You describe the purpose and content; Flowstep produces a screen that looks like a professional designed it.
Think of prompting Flowstep the same way you'd brief a designer. You wouldn't tell a designer which font size to use — you'd tell them what the screen is for and what it needs to communicate. Flowstep works the same way.
## Tips for writing good prompts
Focus on three things: the purpose of the screen, the key information it should show, and the type of product or audience.
**Lead with the screen's purpose**
Start with what the screen is supposed to do. "Sign-up screen for a meal planning app" tells Flowstep far more than a list of UI elements.
**Mention the key content or actions**
Include the most important things a user should see or do. You don't need to list everything — just the elements that matter most to the experience.
**Reference a product type or audience if it helps**
Mentioning the kind of product (e.g., consumer mobile app, B2B dashboard, e-commerce checkout) helps Flowstep match the right visual tone and conventions.
If your first result isn't quite right, don't start over — just type a follow-up prompt. Saying "make the layout more minimal" or "use a darker color scheme" is enough to steer the design in a new direction.
## Example prompts to try
Here are a few prompts that work well, written in plain English with no design terminology:
**Onboarding flow for a fitness app**
> "First screen of an onboarding flow for a fitness tracking app. It should welcome the user, briefly explain what the app does, and have a button to get started."
**Settings page for a SaaS product**
> "Settings page for a B2B project management tool. Include sections for profile, notifications, billing, and connected accounts. Use a clean, professional look."
**Mobile checkout screen**
> "Checkout screen for a mobile shopping app. Show an order summary, a field for a promo code, and a prominent button to complete the purchase."
These prompts work not because they use design language, but because they clearly describe the screen's purpose, content, and context. That's all you need.
# Manage your organization: people, roles, and settings
Source: https://docs.flowstep.ai/organization-settings
Add members to your Flowstep organization, change roles, manage guests and pending invites, and rename your organization — all from Settings.
Owners and Admins manage the organization from two pages in Settings: **Organization** (the organization's name) and **People** (your members and guests). Members can open the **Organization** page too, but it's read-only for them — a note points them to an Owner or Admin to make changes. The **People** page stays limited to Owners and Admins, and Guests don't see either page.
## Manage people
Go to **Settings → People** to see everyone in your organization. The page is split into two tabs:
* **Members** — Owners, Admins, and Members. Each row shows the person's name and email, their role, and when they were last seen ("Online now" if they're currently active).
* **Guests** — people with view access to individual files. The **Access** column shows how many files each guest can open; click it to see the list.
People who haven't accepted their invitation yet appear at the bottom of the list marked **Pending**.
## Add members
Go to **Settings → People** and click **Add members**.
Type or paste email addresses, separated by commas. Each address becomes a pill, so you can invite several people at once. Invalid addresses are highlighted so you can correct them before sending.
Pick **Admin** or **Member** for the people you're inviting. The role applies to everyone in this batch, and you can change individual roles later.
Click **Invite**. Each person receives an email invitation — they don't need an existing Flowstep account, since one is created for them automatically.
Each member you invite adds a paid seat to your organization's plan, starting from the moment they're invited. On a paid plan, seats update automatically when the Owner adds people; members added by an Admin may show as **Inactive** until the Owner clicks **Fix**. Adding members requires a paid plan — on the Free plan, clicking **Add members** prompts you to upgrade instead of opening the invite dialog. See [Seats](/seats).
Guests can't be invited from this dialog — guest access is granted by [sharing a file](/sharing-designs) with view access. Entering the email of someone who's already a guest upgrades them to a member instead.
## Change someone's role
On the **Members** tab, use the dropdown in the **Role** column to switch a person between **Admin** and **Member**. The Owner's role is fixed and can't be changed.
## Remove someone
Open the **⋯** menu on a person's row and choose **Remove from organization**. You'll be asked to confirm: the person immediately loses access to all files shared with them, and you can re-invite them at any time.
Removing a member frees their seat, but your organization keeps (and pays for) that seat until the end of the current billing period — assign it to someone else before then, or it's removed at your next renewal.
For people who haven't accepted their invitation yet, the action is **Cancel invite** instead, which withdraws the invitation immediately. Since a pending member invite already holds a seat, cancelling it frees that seat.
You can't remove yourself or the organization's Owner.
## Manage guests
On the **Guests** tab you can review what each guest has access to. On a paid plan, the Owner can promote a guest to a full member with **Upgrade to member** — members can view and edit files within the organization, so upgrading a guest adds a paid seat to your plan. You can also promote a guest by entering their email in **Add members**: Flowstep recognizes the existing guest and upgrades them to a member instead of sending a duplicate invitation. On the Free plan these actions are unavailable until you upgrade.
## Fix inactive members
If some members show as **Inactive**, they have read-only access because your organization has more members than paid seats:
* On a **paid plan**, the Owner sees a "Some members aren't active" banner — click **Fix** to sync your seats and restore their edit access.
* On the **Free plan**, upgrade to a paid plan to activate your members.
## Rename your organization
Go to **Settings → Organization** and click **Change** next to the organization name. The name is visible to the other members of your organization.
Members can open this page but can't edit it — instead of the **Change** button they see a note to "Contact organization owner or admins to change the organization settings or invite new members."
# Flowstep organizations: teams, roles, and permissions
Source: https://docs.flowstep.ai/organizations
Learn how organizations work in Flowstep — what Owners, Admins, Members, and Guests can do, how files are shared across your team, and how to join or switch organizations.
Every Flowstep account belongs to an organization. When you sign up, Flowstep creates one for you automatically — and when you add teammates, they join your organization and can work on its files based on their role.
## How organizations work
Files live inside an organization, not in a personal account. When you create a new file, it's created in the organization you currently have selected, and everyone in that organization can see it according to their role and the file's [sharing settings](/sharing-designs).
If you belong to more than one organization, an organization switcher appears in the header. Switching organizations changes your whole workspace context:
* **All files** and **Created by me** on the Home page show files from the selected organization.
* **Shared with me** shows files shared with you from organizations you're not a member of.
## Roles
Flowstep organizations have four roles:
| Role | Uses a seat | What they can do |
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Owner** | Yes | Everything Admins can do, plus manage the plan, seats, and billing. The Owner is the person who created the organization. |
| **Admin** | Yes | Can view and edit all files within the organization. Can change organization settings and invite new members. |
| **Member** | Yes | Can view and edit all files within the organization. Can't change organization settings or invite new members. |
| **Guest** | No | View-only access to designs shared with them. Guests can't edit anything in your organization. |
File access is also governed by each file's sharing settings — files set to **Restricted** can only be opened by the people they're shared with. See [Sharing designs](/sharing-designs).
Each organization has exactly one Owner — the person who created it. The Owner role can't be transferred or removed in the app, and only the Owner can manage billing. See [Billing](/billing) for details.
## Guests
Guests are people who were given view access to your designs — for example, a stakeholder you invited to review a file. Guest access is view-only: guests can't edit anything in your organization.
* Guests are free: they never use a paid [seat](/seats).
* Someone becomes a guest by accepting a view invitation to one of your files. There's no way to invite a guest directly from organization settings — guest access always starts from sharing a file. See [Sharing designs](/sharing-designs).
* On a paid plan, the Owner can upgrade a guest to a full Member from **Settings → People**. This adds a paid seat to your plan. See [Organization settings](/organization-settings).
## Inactive members
A member needs a paid seat to keep edit access. If your organization has more members than seats — for example, after a paid subscription is cancelled and the organization returns to the Free plan's single seat — the members without a seat are marked **Inactive** and get read-only access until a seat is available.
On a paid plan, seats usually sync automatically when the Owner adds people. If members show as **Inactive**, the Owner can click **Fix** on the **Settings → People** page to restore their access — or upgrade to a paid plan if your organization is on the Free plan. See [Seats](/seats) for how seats work.
## Joining an organization
You join an organization through an email invitation. Click the link in the invite email and you're added with the role you were invited as — if you don't have a Flowstep account yet, one is created for you automatically, and clicking the invite link signs you in. After joining, the organization appears in your organization switcher.
## Where to go next
Add members, change roles, manage guests, and rename your organization.
How per-seat billing works for teams.
# Flowstep pricing: free trial, free tier, and paid plans
Source: https://docs.flowstep.ai/pricing
Start Flowstep with a free trial and no credit card. Compare the Free, Starter, Pro, and Max plans, with per-seat pricing and annual billing saving up to 20%.
Flowstep is free to start — you can sign up and begin generating designs without entering any payment details. When you're ready to unlock more capacity, paid plans are available with both monthly and annual billing options.
## Free trial
Every new account starts with a free trial — no credit card required. The trial unlocks paid features such as exports, so you can evaluate Flowstep properly before choosing a plan.
The trial lasts three days and includes a set number of messages. It ends when the three days are up or when you've used your trial messages, whichever comes first — after that, your account moves to the Free plan automatically. If you use up your trial messages early, AI generation pauses and your account moves to the Free plan the next day.
## Plans
Flowstep offers a free tier and multiple paid plans:
* **Free** — keep creating after your trial with daily and monthly message limits. Exporting to Figma, code, or image files requires a paid plan (or the trial).
* **Starter** — for individuals who want more messages and full export options.
* **Pro** — for professionals who need higher usage limits.
* **Max** — the highest usage limits, for power users and teams that ship fast.
* **Enterprise** — need more? [Contact us](https://flowstep.ai/pricing) to talk about an Enterprise arrangement.
All prices are shown in USD. Paid plans are billed per seat — each Owner, Admin, and Member in your organization uses one seat, and every seat gets the plan's full message allowance. See [Seats](/seats).
* **Monthly billing** — pay month-to-month with no long-term commitment.
* **Annual billing** — pay once per year and save up to 20% compared to monthly pricing.
For the current plan options and exact pricing, visit the [Flowstep pricing page](https://flowstep.ai/pricing). Prices and plan details are kept up to date there.
## Frequently asked questions
**Do I need a credit card to sign up?** No. You can create a free account and start using Flowstep without providing any payment information.
**What happens when my trial ends?** Your account moves to the Free plan automatically. Your work stays yours, and you can keep creating within the Free plan's message limits — or upgrade to keep full access.
**What currency are prices shown in?** All prices are displayed in USD.
**How does billing work for teams?** Paid plans are priced per seat per month. Guests — people you share designs with for viewing — are free; only Owners, Admins, and Members use seats. Only the organization's Owner can upgrade or manage the subscription. See [Seats](/seats).
**Can I switch between monthly and annual billing?** Yes. You choose monthly or annual when you subscribe, and on a paid plan the Owner can manage the subscription — including the billing period — from **Settings → Plan & Billing**.
# Preview Flowstep designs as interactive prototypes
Source: https://docs.flowstep.ai/prototypes
Open any Flowstep file as a clickable prototype — Flowstep links your screens automatically, and you can set or lock navigation manually per element.
Flowstep can turn the screens in a file into a clickable prototype. Click **Preview** in the editor toolbar and Flowstep opens a full-page prototype player where you can click through your flow — useful for testing a user journey or presenting it to stakeholders.
## Open a prototype
In the editor toolbar, click **Preview**. The prototype player opens as a full-page view, separate from the editor.
If your file has two or more screens, Flowstep automatically links interactive elements — buttons, cards, menu items — to their target screens when you open the preview (you'll see "Bringing your screens to life" while it works). Links are regenerated only when your screens have changed since the last run.
Click any linked element — a button, a card, a menu item — to navigate to its target screen. The sidebar lists all screens in the file so you can jump to any of them directly, and **Back to editor** returns you to the file.
Automatic linking needs at least two screens in the file. If link generation fails, use the **Retry** button in the player.
## Set navigation manually
You can control exactly where an element navigates:
1. In the editor, select the element (for example, a button).
2. Open the **Navigation** panel in the property panel on the right.
3. Pick a target screen from the dropdown — or choose **No navigation** to remove the link.
To stop Flowstep's automatic linking from overwriting a link you set yourself, click **Lock link** in the Navigation panel. Locked links are left untouched when links are regenerated.
## Interactive controls
A prototype isn't just clickable navigation — the controls on your screens respond while you preview. Flip a switch, tick a checkbox, pick a radio option, choose from a dropdown, switch tabs, type in a field, or increment a counter, and the screen updates live to reflect the new state.
Screens in a file share one prototype state during a preview session, so a change you make on one screen carries through as you click into others. You can also switch a screen between light and dark appearance to see how it responds.
Interactive behavior is generated automatically from your screens — there's nothing to wire up. Preview a file to try it.
# Seats and per-seat billing for Flowstep teams
Source: https://docs.flowstep.ai/seats
How seats work on Flowstep paid plans: who uses a seat, how adding and removing members affects your bill, and what happens to members without a seat.
Paid Flowstep plans are billed per seat. Every Owner, Admin, and Member in your organization uses one seat; Guests are free and never count toward your seat total. Your subscription cost is the plan's per-seat price multiplied by the number of seats.
Every seat gets the plan's full message allowance individually — usage isn't pooled across the team. See [Messages & Limits](/messages-and-limits).
## Who uses a seat
| Role | Uses a seat |
| -------------------- | ----------- |
| Owner, Admin, Member | Yes |
| Guest | No |
See [Organizations](/organizations) for what each role can do.
## Adding people
When the Owner invites members on a paid plan, seats are added to the subscription automatically and the charge is prorated — you only pay for the remainder of the current billing period. There's no separate seat purchase step. If an Admin invites members instead, the new members may show as **Inactive** until the Owner clicks **Fix** on the People page.
A member's seat is used from the moment they're invited, even while the invitation is still pending — cancelling an unaccepted invite frees the seat.
When you first upgrade to a paid plan, you're charged for the people already in your organization — one seat for each Owner, Admin, and Member.
On the Free plan, your organization has a single seat and you can't add members — inviting people requires upgrading to a paid plan first.
Inviting people isn't the only thing that uses a seat: upgrading a Guest to Member and [granting someone edit access to a file](/sharing-designs) both add a paid seat too.
## Removing people
Removing a member frees their seat, but the organization keeps the seat — and keeps paying for it — until the end of the current billing period. You can assign it to someone else before then, or it's removed at your next renewal.
If you have more seats than active members, the People page shows how many seats are available, and the Owner can click **Reduce seats** to trim the subscription down to match the team. A seat reduction is scheduled for the end of the current billing period rather than applied right away — you keep the seats and their access until then, and your bill drops at the next renewal.
If you add people again before a scheduled reduction takes effect, the reduction is cancelled and the new seats are added immediately, prorated for the rest of the period.
## Inactive members
Members without a seat get read-only access and show as **Inactive** on the People page. This happens when your organization has more members than paid seats — for example, after reducing your seat count, or after a paid subscription is cancelled and the organization returns to the Free plan's single seat.
When there are fewer seats than members, seats go to the Owner first, then to members by join date — the most recently joined members are the first to become Inactive.
The Owner can restore their access by clicking **Fix** on the People page (paid plans) or by upgrading to a paid plan. Inactive members can still open the organization's files but can't edit them — except files they created themselves, which they can always edit.
## Who manages seats
Only the organization's Owner can change the plan, adjust seats, or perform any other billing action. Admins can add and remove people, but they can't access billing pages, and seat changes only sync to the subscription through the Owner. See [Billing](/billing).
## Cancelling
If the Owner cancels a paid subscription, the organization keeps its plan and seats until the end of the paid period. After that, it moves to the Free plan with a single seat — the Owner keeps edit access, and other members become read-only until the organization is upgraded again.
# How Flowstep protects your account data and designs
Source: https://docs.flowstep.ai/security
Learn how Flowstep protects your data with encryption in transit and at rest, and where to find full details about security in the Privacy Policy.
Flowstep takes security seriously. Every piece of data you send to or store in Flowstep is protected using industry-standard encryption — both while it travels across the network and while it sits on our servers. You can use Flowstep knowing that your designs and project data are handled with care.
## Encryption in transit
All communication between your browser (or any Flowstep client) and Flowstep's servers takes place over HTTPS. This means your data is encrypted the moment it leaves your device and remains encrypted until it reaches our servers. No one intercepting traffic in between can read it.
## Encryption at rest
Your data is encrypted when stored on Flowstep's servers. This protects your information even in the unlikely event that storage media were ever accessed outside of normal operations.
## Your Privacy Policy
The Privacy Policy contains the full, authoritative details of how Flowstep collects, stores, and protects your data. If you have questions that aren't answered there, you can reach the Flowstep team directly.
For complete details on how Flowstep handles your data, refer to the Flowstep Privacy Policy available at [flowstep.ai](https://flowstep.ai). You can also contact the team at [hello@flowstep.ai](mailto:hello@flowstep.ai) with any security-related questions.
# Share Flowstep designs with your team and stakeholders
Source: https://docs.flowstep.ai/sharing-designs
Generate a shareable link for any Flowstep design, control who can open a file with general access levels, and invite people to view or edit by email.
Flowstep makes it easy to share your designs with anyone who needs to see them. You can generate a shareable link for any design and send it directly to stakeholders—no account setup or software installation required on their end. This removes friction from the feedback process whether you are presenting to executives, clients, or cross-functional teammates.
## Generate a shareable link
Navigate to the design in your Flowstep project.
Use the share option to create a link for the design. To let people outside your organization open it, set the file's **General access** to **Public** — new files default to **Members only**.
Paste the link into an email, Slack message, Notion doc, or wherever your stakeholders will see it. Anyone with the link can open the design immediately.
Viewers do not need a Flowstep account to open a shared design link, and viewing is always free. Shared links are view-only — people with the link can look at the design in their browser, but they can't edit it.
## Control who can open a file
Each file has a **General access** setting in the share dialog with three levels:
* **Restricted** — only people with access can open the file.
* **Members only** — members of your organization (the Owner, Admins, and Members) can view and edit the file.
* **Public** — everyone with the link can view the file. Link access is view-only.
Only the file's creator, the organization Owner, and Admins can change a file's general access.
## Invite people by email
You can also invite specific people to a file by email with one of two access levels:
* **Can view** — they can open the file but not edit it. People you invite this way become [Guests](/organizations) in your organization, which is free.
* **Can edit** — they can edit the file. Granting edit access adds the person to your organization as a Member, which uses a paid [seat](/seats), so on a paid plan you'll be charged for it. On the Free plan the **Can edit** option is disabled — you'll be prompted to upgrade to a paid plan before you can give anyone edit access.
Only the organization Owner and Admins can grant edit access; other members can invite people with view access. Invitees don't need an existing Flowstep account — one is created for them automatically.
## When to use shareable links
Shareable links are useful any time you need input or sign-off from people who are not part of your day-to-day design workflow:
* **Executive or leadership reviews** — share early-stage concepts for direction before investing more time.
* **Client presentations** — let clients view designs at their own pace and come back with consolidated feedback.
* **Cross-team alignment** — share flows with engineering, product, or marketing without requiring tool access.
* **Async feedback** — send links to stakeholders in different time zones so they can review when it suits them.
## Collaborating with your team
For ongoing collaboration — teammates who create and edit designs with you — add people to your organization as Members or Admins instead of sharing file by file. See [Organizations](/organizations) and [Organization settings](/organization-settings).