AI Features and Credits
|
This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production. This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages. |
This page describes the AI features of Webflow as they were on 2026-10-28, the date on which their facts were checked against the official documentation. Webflow is a software-as-a-service product with no version numbers, and its AI features change faster than most of it, so everything below is dated; the Product Changes and Deprecations page tracks what has changed since, and Webflow announces changes at https://webflow.com/updates. Plans are named by tier only (Starter, Basic, Premium, Team and Enterprise for sites; Starter, Core, Growth, Freelancer, Agency and Enterprise for Workspaces) and this page never quotes prices; the Plans, Workspaces, Seats and Roles page explains how the two kinds of plan relate.
The running example is Fernbrook Gardens, the fictitious botanical garden of this sub-section, with English as its
primary language and Spanish (es) and German (de) as secondary locales. In this page the garden’s marketer uses the AI
features to draft a campaign, audit the SEO of the Plants pages, and build a small interactive widget, and the site
manager decides which of the results are good enough to publish.
What "Webflow AI" covers
Webflow uses the name Webflow AI for a family of features that share one switch, one pool of credits and one set of rules. As of 2026-10-28 the official documentation describes these pieces.
| Feature | What it does | Where it is used |
|---|---|---|
AI site builder |
Creates a new multi-page site from a text description of the business and its goals: a proposed structure of pages and sections, content and a theme that you can adjust |
The Dashboard, when creating a site |
AI Assistant |
A chat panel in the Designer that answers questions about Webflow, helps with design changes, writes copy, generates CMS collections and content, and starts SEO and AEO audits |
The Designer |
AI code components |
Generates a reusable React-based component from a prompt, which you refine by conversation or in code |
The Designer, through the AI Assistant |
SEO and AEO audit |
Finds missing alt text, titles, descriptions and schema markup, sitewide or per page, and can draft the missing content |
The Audit panel and the AI Assistant |
Source by Webflow |
A new platform for marketing teams and AI agents that brings codebase, CMS, hosting and marketing tools into one environment; in a limited research preview |
Application through webflow.com/source |
Webflow MCP server |
Lets an external AI agent act on a site through the Model Context Protocol; documented separately |
Two things are deliberately not part of this page. The external agents that connect through the MCP server are a developer topic with their own permissions and are covered on the page named in the table. And machine translation for Localization is a Localization feature: disabling Webflow AI does not turn off automatic translations, as the help article that explains the switch states. See Localization.
Turning Webflow AI on and off
Webflow AI is enabled per Workspace. The AI site builder, for example, can be used only when Webflow AI is enabled for the Workspace, which the help article places under Workspace settings, General. The same article describes the control as a single toggle labelled Enable Webflow AI, limited to Workspace owners and admins, and it lists the AI Assistant among the features the toggle covers. On Enterprise, changes to the setting are recorded in the Workspace audit log, and custom roles can restrict a permission to use Webflow AI for individual members. Webflow also announced that Webflow AI is enabled by default on Enterprise.
For the Fernbrook team this means a governance decision before any prompt is typed: the owner decides whether the Workspace allows AI at all, and on Enterprise the garden can allow it to the marketer and the designer while withholding it from freelancers with limited seats. Roles and seats are explained in Plans, Workspaces, Seats and Roles.
The AI site builder
The AI site builder generates a first version of a site from a description. It is a starting point, not a finished product, and the official article is explicit about its scope.
-
It is for new sites. It can be used when creating a brand-new site or when editing a site that the AI site builder itself generated. It cannot be applied afterwards to a site that was built by hand.
-
It generates a limited number of pages. The help article describes up to five pages at generation time. More pages can be added later in the normal way.
-
It needs a plan for anything bigger than a small static site. Sites with more than two static pages need a paid Site plan or a paid Workspace plan.
-
It produces three things: a site structure (pages and sections), content, and a theme that you can adjust.
The flow in the Dashboard is: choose New site, choose the AI site builder, describe the business and its goals, ask Webflow to generate the site structure, refine the proposed pages and sections, and then let the builder produce the design.
Example: a first prompt for Fernbrook Gardens
A good prompt states the business, the audience, the pages that are wanted and the tone, and it keeps facts that the model cannot know (opening hours, prices, species names) out of the request so that a person adds them afterwards.
Fernbrook Gardens is a botanical garden with a plant collection, seasonal events and a small seed shop. Visitors are families, hobby gardeners and school groups. Create a site with Home, Visit, Plants, Events and About pages. Tone: warm, factual and calm. Use a green and cream colour scheme. Do not invent opening hours, ticket prices or plant names; leave clearly marked placeholders for them.
What to do with the result
The output is an ordinary Webflow site: its elements, classes and styles can be edited in the Designer like any other. The review that follows is the real work, and it is the same for every AI result on this page; see Reviewing AI output. For a site that will carry real content, the usual next steps are to replace placeholder text, to rebuild the generated classes into the garden’s naming system (see Class Naming Systems), to move repeated sections into components (see Components, Props, Slots and Variants) and to define the garden’s colours and type as variables (see Variables and Modes).
The AI Assistant
The AI Assistant is the chat panel in the Designer. Webflow describes it in its Help Center as a way to get contextual help while working, and its capabilities have grown since its introduction. As of 2026-10-28 the official sources describe five kinds of request.
| Kind of request | What to expect |
|---|---|
Help |
Answers questions about Webflow, drawing on Webflow University and the Help Center, without leaving the Designer. The Help Center describes the help feature as built on a third-party language model that receives the question and a chat identifier without identifiable personal information |
Design changes |
Modifies the design of a page. The Help Center states that, while this capability is in beta, modifying page designs is limited to a small number of free templates and to sites created with the AI site builder, so it is not yet a general tool for every existing site |
Copy |
Writes or rewrites text for headings, paragraphs, buttons and metadata |
SEO and AEO audit |
Audits a page or the whole site for missing alt text, titles, descriptions and schema markup and can generate the missing content |
CMS generation |
Generates CMS collections and sample content from a description |
The Assistant is a drafting aid. It acts on the canvas of the person who asked, it respects that person’s permissions, and every change it makes is a normal Designer change that can be undone, reviewed in a branch or discarded. A site that uses page branching (see Page Branching, Releases and Approvals) can have AI work reviewed in a branch before it reaches the live site.
Example: asking for copy in two locales
The garden’s marketer wants a short banner for the autumn plant sale. The prompt gives the voice and the constraints and asks for one version per locale. A person who reads Spanish and German must still approve the translations, because the Assistant’s output is a draft; the garden’s real translations are managed in Localization.
Write a 12-word banner headline and a 25-word subheading for the Fernbrook Gardens autumn plant sale. Voice: warm and factual, no exclamation marks. Do not mention discounts or dates. Give the English, Spanish and German versions as three labelled blocks.
Example: generating a CMS collection
CMS generation is best used to scaffold a collection that a person then reviews field by field. A prompt that names the fields and their types produces a structure that matches the garden’s content model instead of a guess.
Create a collection called Plants with these fields: Name (plain text), Slug, Latin name (plain text), Light (option: full sun, partial shade, shade), Blooms in (multi-option: spring, summer, autumn, winter), Photo (image) and Description (rich text). Add five sample items for plants that grow in temperate gardens.
Source: Webflow AI is now enabled by default on Enterprise (describes copy and CMS collection generation) and, for the resulting structure, Collections and Field Types.
The generated sample items are placeholders. They are useful to test a template page and a Collection list, and they must be deleted or replaced before publishing, because published fiction is still published. The botanical details in particular must be checked by the garden’s horticulturists.
SEO and AEO audits
Webflow’s AI audit looks for the pieces of metadata that search engines and AI answer engines read. As of 2026-10-28 the official documentation says it checks for missing image alt text, meta titles, meta descriptions and schema markup, that it can run on the whole site or on a single page, and that Webflow AI can then draft the missing content. The Help Center adds that a paid Workspace or Site plan is required for the AI-powered accessibility, SEO and AEO features.
Two products share the letters AEO and are easy to confuse.
-
The audit is part of Webflow AI inside the Designer and fixes metadata on your pages.
-
Webflow AEO is a separate product that measures and improves how a brand appears in AI search results. The Help Center describes it as available on the Team and Enterprise plans.
The page SEO and AEO explains both and the metadata they depend on. The accessibility side of the Audit panel is covered in Accessibility.
Example: auditing the Plants pages
Audit the Plants collection template page and list every missing alt text, meta title, meta description and schema property. For each missing item propose a draft that uses the plant's Name, Latin name and Light fields through dynamic references instead of fixed text.
A template page generates one page per item, so the best fix is a dynamic one: a meta description that combines fields works for hundreds of plants, whereas a generated fixed sentence would repeat on every page and be flagged as duplicate content. Review the drafts with that in mind.
AI code components
AI code components let a person describe an interactive element in plain language and get a React-based component that is rendered on the canvas. Webflow announced the feature as generally available on 2026-04-30; the announcement says that the component can be refined through conversation or in code before it is placed in a site, and that publishing a site that uses an AI code component needs a paid Workspace plan or a Site plan with a CMS or higher tier (which, after the May 2026 plan change, corresponds to Premium or above).
The Help Center article for the feature fixes the prerequisites. To create and use AI code components a person needs the Site manager or Designer site role and Webflow AI enabled for the Workspace. It also names the two kinds of code component that Webflow has.
| AI code components | DevLink code components | |
|---|---|---|
Created by |
A prompt to the AI Assistant inside the Designer |
A developer, in an external codebase, with React and the Webflow CLI |
Source of the code |
Generated, then editable in the Designer |
Written and versioned by the team in git |
Review and release |
Reviewed by the person who accepts the result |
Normal code review and CI |
Documented in |
This page |
Because the generated code runs on the published page, the security expectations of any third-party script apply. Read the generated code before publishing it, check which external requests it makes, and do not accept a component that loads scripts from unknown origins.
Example: a prompt for a bloom calendar
Create a Bloom Calendar component for Fernbrook Gardens. It shows twelve month tiles; a visitor can select a month and see the names of the plants that bloom then. Take the month list and plants from props, not from hard-coded text. Make it keyboard accessible, with visible focus and a text alternative for any colour coding. Do not make network requests.
Source: Build AI code components.
The prompt states the requirements that matter in review: data comes from props so that an editor can change it, keyboard access is required, and network requests are forbidden. A prompt that omits them gets a component that looks right and fails in use.
What the code looks like after review
The Help Center describes AI code components as one of two kinds of code components, the other being the kind that a
developer declares in an external project. When the garden’s developers decide that a generated component is worth
keeping, they can rebuild it in their own codebase, where it is declared with declareComponent and gets reviewed like
any other code. The following snippet shows that shape for the same Bloom Calendar: a React component declared with
typed props that an editor sees in the Designer. It is a hand-written illustration of the developer path, not the literal
output of the AI feature.
// BloomCalendar.webflow.tsx
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { BloomCalendar } from './BloomCalendar';
export default declareComponent(BloomCalendar, {
name: 'Bloom Calendar',
description: 'Twelve month tiles that list the plants blooming in the selected month',
group: 'Fernbrook Gardens',
props: {
heading: props.Text({
name: 'Heading',
defaultValue: 'What blooms when'
}),
layout: props.Variant({
name: 'Layout',
options: ['compact', 'spacious'],
defaultValue: 'compact'
})
}
});Source: declareComponent reference.
The declaration lives in a file named like BloomCalendar.webflow.tsx, and the imports come from @webflow/react and
@webflow/data-types. Prop names that start with __wf_ are reserved by Webflow. The complete workflow, including the
CLI, shared libraries and versions, is explained in Code Components.
Source by Webflow
At Webflow Conf 2026 (1 to 3 September 2026) Webflow announced Source by Webflow. As of 2026-10-28 the official announcement describes it as a new platform, in a limited research preview, in which marketers, designers, developers and AI agents work in one shared environment that brings together a codebase, the CMS, hosting and the marketing technology stack, including sites already built in Webflow. Webflow says it will enrol selected agency partners and customers in phases and that interested teams apply through a form on webflow.com/source. The announcement gives no public release date and no price.
Practically, Source is not something the Fernbrook team can switch on. A research preview is an invitation-based programme with no commitment to ship in its present form, so the garden’s plans (including the Comparison and Decision Guide) are built on the Designer, the CMS and the Data API, which exist today. The team can apply to the preview and revisit the decision when Webflow publishes documentation for it.
Source: Introducing Source by Webflow.
AI credits
Most AI actions consume AI credits. Credits are included in the Workspace plan: since the May 2026 plan change every Workspace plan includes a credit allowance, and the limits have been enforced since 2026-06-29. The Help Center article on AI credits is the authority for the details.
Allowances per Workspace plan
As of 2026-10-28 the AI credits article lists these allowances. The numbers are credits, not currency.
| Workspace plan | Credits | Period |
|---|---|---|
Starter |
200 |
Per month |
Core and Freelancer |
300 |
Per month |
Growth and Agency |
400 |
Per month |
Team |
100,000 |
Per year |
Enterprise |
Custom amount |
Per agreement |
Webflow can change these values, so check the article before budgeting. Credits are pooled at the Workspace level: they can be used on any site in the Workspace, including sites on the free Starter Site plan, and they are not assigned to a single site or a single person.
Reset rules
-
Self-serve Workspace plans (Starter, Core, Growth, Freelancer and Agency) receive their allowance every month, and the allowance resets at the start of the next period.
-
Team and Enterprise plans receive a yearly allowance and reset yearly.
-
Unused credits expire at the end of each period. They do not roll over.
A practical consequence for the garden: a marketer who leaves a month’s credits unused gains nothing, so work that benefits from AI (the autumn campaign copy, the SEO audit) is best done in the month when the credits are available.
Enforcement and what happens at zero
Webflow began enforcing the credit limits on 2026-06-29. When a Workspace has used its allowance, AI actions stop until the next reset or until credits are added. Reaching the limit does not trigger an automatic upgrade or a surprise charge; a Workspace that needs more can buy an add-on credit pack. Everything else in the Workspace keeps working: the Designer, the CMS, publishing and hosting do not depend on credits.
The diagram shows the loop the garden’s team follows: each rejected draft costs another prompt, so a precise first prompt saves credits as well as time.
Planning the garden’s credits
The Fernbrook Gardens Workspace is on a self-serve plan with three people using AI: the marketer, the designer and the developer. A simple budget keeps the pool from being drained by experiments.
-
Reserve credits at the start of the month for the work that has a deadline, such as campaign copy.
-
Do exploratory prompts (try ten layouts) in a separate scratch site, so they are easy to discard, and expect them to use the same pool.
-
Write one precise prompt with the constraints, as in the examples above, instead of many vague ones.
-
Check the remaining balance before a large generation job, for example generating a whole collection.
The article explains how credits are measured and where the balance is shown. Because the measure can change, the team treats the Workspace’s own usage display as the source of truth and not a number copied into a wiki.
Reviewing AI output
AI features produce drafts. Publishing a draft makes it the garden’s own statement, so the person who accepts a result is responsible for it. The review has four parts, and each has a place in Webflow where it can be done.
| Check | What to look for | Where in Webflow |
|---|---|---|
Facts |
Opening hours, prices, species names, dates and claims; the model can state invented details with confidence |
Reading the page against the garden’s source of truth |
Accessibility |
Heading order, alt text that describes the picture, contrast, keyboard access, focus visibility, text alternatives to colour, reduced motion |
The Audit panel and manual keyboard testing; see Accessibility |
Brand |
Voice, colours, type and tone against the garden’s style; classes and variables that follow the naming system |
Style panel, variables and the shared library; see Building a Design System |
Technical quality |
Duplicate or meaningless class names, hard-coded text that should be a field or a prop, external requests in generated code |
Navigator, Style panel and, for code components, the code editor |
Accessibility specifically
Generated alt text is often a literal description such as "a flower" or "an image of plants". Good alt text states what the image contributes to the page. Generated components can omit focus styles or use colour alone to carry meaning. The Audit panel finds some problems, but it cannot judge whether alt text is meaningful or whether a widget works with a keyboard, so run those checks by hand with the keyboard and a screen reader before publishing.
Localized output
If the generated copy is published in Spanish or German, a speaker of the language reviews it. Machine-written text can be fluent and still wrong for a botanical audience, for example in the common names of plants, which vary by region. Treat AI copy as a first draft in every locale; see Localization.
Privacy and security
-
Data handling. Webflow states in its description of its approach to AI that it does not use customer data to train generative AI models and that it has contracts with the vendors that process data for its AI features forbidding them to train their own models on it. For the help feature of the AI Assistant, the Help Center says the third-party model receives the question and a chat identifier that contains no identifiable personal information.
-
Do not paste secrets or personal data into prompts. A prompt is data sent to a service. Keep visitor data, staff records and credentials out of it. The Fernbrook prompts above contain only public information.
-
Governance. The Workspace owner or an admin decides whether Webflow AI is enabled; on Enterprise the change is audited and custom roles can restrict who may use it.
-
Generated code is code. An AI code component runs in visitors' browsers with the same power as any script on the page. Review it, remove network requests that are not needed and keep it out of pages that handle payment or login unless it has been through the same review as other code. Webflow Optimize and machine translation use machine learning that is separate from the Webflow AI switch.
-
Agents are different. An external agent that edits a site through the MCP server has its own OAuth scopes and site access. See MCP Server and AI Agents.
Pitfalls
-
Treating the AI site builder as a way to rebuild an existing site. It works for new sites and for sites it created, so an existing hand-built site cannot be regenerated with it.
-
Expecting design changes on every site. While the capability is in beta, the Help Center limits page-design changes to a small number of free templates and AI-site-builder sites. A prompt that asks for a redesign of another site does not have the expected effect.
-
Confusing the two meanings of AEO. The Designer audit fixes metadata; Webflow AEO is a separate product on Team and Enterprise.
-
Forgetting that credits expire. Unused credits do not roll over, and the pool is shared by the whole Workspace.
-
Believing the credit table is permanent. Allowances are plan data that Webflow can change; confirm them in the article.
-
Publishing placeholder content. Generated sample items and invented facts end up on live pages if nobody removes them.
-
Fixed text on template pages. A generated meta description repeated on every Plants page creates duplicates; use dynamic fields.
-
Assuming a generated component is accessible. Test it with a keyboard.
-
Planning around Source. It is a limited research preview with no release date; do not schedule a migration against it.
-
Using the book as a guide. See the next section.
Corrections to older material
The book on which parts of this sub-section were compared, Webflow by Example (Packt, 2021), predates every AI feature described here. It has no AI site builder, AI Assistant, AI code components or credits, and its plan and Editor guidance is also outdated. For AI, the official documentation is the only source. Many online tutorials from 2023 and 2024 describe earlier AI behaviour, before credits were enforced, before AI code components became generally available and before the May 2026 plans put credits into every Workspace plan. The page Where Older Books and Tutorials Are Outdated collects these differences.
Change history
| Date | Change |
|---|---|
2026-04-30 |
AI code components announced as generally available |
2026-05 |
May 2026 plan change: credits included in every Workspace plan |
2026-06-29 |
AI credit limits enforced |
2026-09-01 to 2026-09-03 |
Webflow Conf 2026: Source by Webflow announced as a research preview |
2026-10-28 |
Facts on this page checked against the official documentation |
The Webflow updates page and the Help Center are where later changes appear. Re-read the AI credits article before relying on the allowance figures.