Build AI code components

Create custom code components with the Webflow AI Assistant.

AI code components let you build advanced, interactive functionality — like pricing calculators, multi-step forms, and image galleries — directly inside Webflow. Describe what you want in a prompt, and the Webflow AI Assistant generates a code component (using React) you can customize and reuse across your site. You don’t need to write the code yourself — the AI Assistant can generate and modify the code for you.

AI code components are one of two types of code components in Webflow. The other type, DevLink code components, are built in an external codebase and imported into Webflow. Learn more about code components and Webflow component types.

Create an AI code component

To create an AI code component:

1. Open the Components panel

2. Click the create icon (+) at the top of the panel

3. Click Create with AI

4. Enter a prompt that describes the component you want to build or choose a pre-populated starter idea

5. (Optional) Click the “plus” icon to upload reference images

6. Click the “submit” icon

After you submit your prompt, Webflow opens the component canvas with two areas: a preview of your component on the left, and the AI Assistant chat on the right. The AI Assistant reads your site’s existing styles and variables to align the component with your design system, then generates your component and displays it in the preview as it builds.

Refine your component with the AI Assistant

Once your component is generated, you can continue prompting the AI Assistant to make changes. For example, you can ask the AI Assistant to:

• Change colors, fonts, or layout

• Add or remove interactive elements

• Adjust animations or transitions

• Add, edit, or rename component props

• Reference your site’s existing variables in the component

Each prompt you submit refines your component in real time. The preview updates as the AI Assistant makes changes.

View and edit code

You can view and directly edit the underlying React code for your AI code component:

1. Click the code toggle button in the toolbar to open the code popover

2. Review your component’s React code in the code editor

3. Make any manual edits directly in the code — changes auto-save

The code editor appears as a resizable popover alongside your component preview. You can resize and reposition the popover to suit your workflow. The popover remembers its position for the duration of your session.

Manage component props

AI code components support props just like other code components. Props let you customize instances of a component without changing the underlying code.

To add, edit, or rename props for an AI code component, ask the AI Assistant. For example:

• “Add a prop called ‘buttonColor’ that controls the CTA button color”

• “Rename the ‘title’ prop to ‘heading’”

• “Remove the ‘showBorder’ prop”

You can also add or modify props by editing the code directly in the code editor.

Once your component has props, you can configure them in the Properties panel when you select an instance of the component on the canvas.

Add an AI code component to your site

After you build your AI code component, you can add it to any page on your site:

1. Open the Components panel

2. Find your AI code component — AI code components display a "<>" icon to distinguish them from native components

3. Drag the component onto the canvas

You can modify the component’s props in the Properties panel for each instance.

To edit the component itself, double-click it on the canvas to return to the component canvas editing experience.

Manage access to AI code components

Workspace Owners and Admins can enable or disable all Webflow AI features — including AI code components — at the Workspace level. If Webflow AI is disabled for your Workspace, you can’t create AI code components, but existing ones on your site remain viewable. Learn more about enabling or disabling Webflow AI.

Access to create, use, or view AI code components depends on your site role:

For Enterprise customers, the “Use Webflow AI” custom role permission controls whether a team member can access Webflow AI features. This permission works alongside the site role — for example, a Content editor with “Use Webflow AI” enabled can view AI code components but can’t create them, since creation requires the Site Manager or Designer role. The permission is enabled by default on the Content editor, Marketer, and Designer base roles, and can be toggled off when configuring a custom role. Learn more about creating and managing custom roles.

Limitations

AI code components have the following limitations:

• React only — AI code components are written in React. Other frameworks (Vue, Angular, Svelte) aren’t supported

• Single-file components — each AI code component is a single file. Multi-file components aren’t supported at this time

• No visual editing — you can’t visually edit the internal structure of an AI code component on the canvas. You can modify props and use the AI Assistant or code editor to make changes

• No CMS data integration — connecting AI code components to your CMS via the Content Delivery API isn’t available yet

• No DevLink export — you can’t export AI code components to an external codebase via DevLink

• Can’t create from existing components — you can’t create an AI code component from an existing Webflow component, DevLink code component, or AI code component

• Clone and copy restrictions — sites with code components can’t be cloned, and code components are removed when you copy and paste between sites

• Code export — code components are stripped from code export

• Unsupported requests — the AI Assistant can’t add databases, API secret management, or authentication to your component. If you enter an API secret, rotate it immediately