Use the Webflow AI Assistant to generate web apps and deploy them to Webflow Cloud.
Important
Webflow has paused further development of App Gen and will begin the process of deprecating it. Existing apps continue to run on Webflow Cloud, and App Gen remains free to use during this period. If you're looking to build interactive experiences in Webflow, explore AI code components as an alternative.
With the Webflow AI Assistant, you can generate web apps aligned to your site's design system from a simple text prompt. You can connect your app to your CMS content or import components to keep it consistent with the rest of your site. You can refine your app using the AI Assistant or edit the code yourself, then deploy it to Webflow Cloud and make it available on your custom domain.
What is a web app?
A web app is a self-contained application that runs in the browser and responds to user input. Unlike static pages, web apps can include logic and interactivity, making them feel more like software than content. Common examples include:
- Pricing estimators
- Store locators
- Booking tools
- Dashboards
In Webflow, web apps are generated and managed in App Gen. These are standalone applications you can build and deploy alongside your site, with access to your site's design system and CMS data.
Unlike smaller code components, which you add into a page, web apps are deployed separately to Webflow Cloud and run alongside your site.
Generate a web app
Note
Workspace Owners and Admins can enable or disable Webflow AI for a Workspace. Once enabled, team members with a site role of Site manager or Designer can generate apps using the Webflow AI Assistant.
Getting started
To generate a web app, you'll need to open an existing site in Webflow, create a new one, or generate one using the AI site builder. To get started:
- Go to Site settings > Webflow Cloud.
- Click App Gen above the apps list.
- Enter a prompt to describe the app you want to build.
- (Optional) Connect your app to your CMS collection(s) and components by clicking the Add button.
- Click the Submit button.
The Webflow AI Assistant generates your app based on the prompt you provide. From there, you can refine it with additional prompts, edit the code directly, or deploy your app to Webflow Cloud.
Previewing your app
When your app is generated, a live preview opens right within Webflow. You can toggle between the preview and your app's code using the Code/Preview toggle. If your latest changes aren't showing in the preview, click the Refresh button to reload your app.
You can also click the Open in a new tab icon to view the preview in a separate browser tab.
Using variables
Apps generated with the Webflow AI Assistant include their own variables collection for styles such as colors and spacing. The Assistant creates a variables collection automatically when you generate an app, and you can edit these variables in the Variables panel from the left toolbar to adjust your app's styles.
Important
Sites built with Webflow's AI site builder can't be transferred between Workspaces or used to share Libraries. These limitations are due to how AI-generated sites are structured.
Refine your app with the Webflow AI Assistant
Once you've generated your app, you can keep working with the Webflow AI Assistant to refine it. Enter follow-up prompts to add new features, change the layout, or adjust how your app works. You can also prompt the Assistant to fix any issues you find in the preview. The best results come from working iteratively — start with a simple version of your app, then continue refining it step by step until it meets your needs.
Edit your app's code directly
If you're working with a developer, you can extend or customize your app further by updating the code generated by the Webflow AI Assistant. Use the Navigator in the left toolbar to browse your app's folders and files, open the code in the built-in editor, and make changes. Additional developer tools are available at the bottom of the panel — Dev Server, Terminal, and Deployment.
Note
Webflow Support can't help troubleshoot or validate custom code. If you run into problems, you can use the Webflow AI Assistant to try to fix the issue, work with a developer, or reach out in the Webflow Community.
Deploy your app
Once you're ready to make your app live, you can deploy it directly to Webflow Cloud. To deploy your app:
- Click Deploy.
- Click Deploy and publish.
Deploying your app makes it live on your Webflow staging domain and/or custom domain (e.g., yourdomain.com/app-path), if you've connected one. Deployment may take a few minutes to complete.
You can change the app path (i.e. URL slug) at any time. To change your app's path:
- Go to Site settings > Webflow Cloud.
- Click App Gen above the apps list.
- Hover over your app.
- Click the settings icon.
- Enter your desired app path.
- Click Save.
- Refresh your browser tab.
You can deploy your app without republishing your site, unless:
- your site has never been published
- your site hasn't been published since the app was first created
- you change the app path (slug)
In these scenarios, your site is automatically published so your app is available on its path.
FAQs
How does App Gen pricing work?
App Gen is free for all users. Webflow Cloud hosting is billed separately — you can learn more on our Webflow Cloud page. If you want to deploy an app to a custom domain, you'll need to upgrade to a paid Site plan.
What's happening with App Gen?
Webflow has paused further development of App Gen and will begin deprecating it. Your existing apps aren't affected right now — they continue to run on Webflow Cloud, and App Gen remains free to use. Webflow will provide notice before any further changes to availability.
If you're looking to add interactive functionality to your Webflow site, explore AI code components — which let you generate reusable React components directly on your pages using the Webflow AI Assistant.
Will other Webflow AI features use Webflow AI credits?
As we continue expanding Webflow AI, some features — but not all — will require Webflow AI credits.