How to Build AI Code Components in Webflow: Multi-Step Forms and Availability Calendars

How to Build AI Code Components in Webflow: Multi-Step Forms and Availability Calendars

See the full video by Magnaem for Memberstack here!

TL;DR

Webflow's AI Assistant can now generate fully functional code components from natural language prompts. In this walkthrough, we built two components from scratch: a multi-step form with conditional branching and an availability calendar with month views, selectable dates, and blocked-out unavailable dates. No Calendly embed, no form plugin, no custom code block. The workflow uses three tools alongside Webflow: Claude Desktop for generating design logic and prompts, Paper for creating designs that match your brand system, and Make for capturing form submissions via webhooks.

All images sourced from the above linked video unless otherwise noted.

The Tool Stack

Four tools power this workflow:

Webflow is where the components live. The AI Assistant generates React-based code components directly inside the Webflow Designer from a text prompt.

Claude Desktop handles the design generation and logic. It connects to Paper and reads your design system to create component layouts and the prompts you will feed into Webflow's AI Assistant.

Paper is a design tool similar to Figma that lets you create designs alongside an AI agent. It outputs React CSS or Tailwind that you can copy and hand to Webflow's AI Assistant as a visual reference. The key advantage is maintaining a design system (brand colors, font sizes, tags, spacing) so everything stays consistent across components.

Make (formerly Integromat) captures form data via webhooks. When a user submits a form, the data posts to a Make webhook URL, where it can be routed to Airtable, HubSpot, or wherever you store responses.

Current Limitations

Two limitations worth knowing before you start:

• You cannot currently add CMS data to AI code components
• Components cannot be cloned or copied between sites, and if you copy a site, components may be removed
• Code cannot be exported from AI code components

These are real constraints, but they do not prevent you from building fully functional, interactive components.

Build 1: Multi-Step Form With Conditional Branching

The Design Phase

The form has four steps. Step two is the branching step: based on which option a user selects, they either proceed to step three, skip step three entirely, or skip all the way to the final step. This is conditional branching, and it is built entirely inside a single AI code component.

The design starts in Paper using Claude Desktop. A design system is created first (brand colors, fonts, sizing, tags) so that every component follows the same visual rules. For each component, Claude Desktop also generates a prompt that will be pasted into Webflow's AI Assistant.

Generating the Component in Webflow

Inside Webflow, the workflow is:

1. Go to the component selector and click the plus button to create a new component
2. Choose "Generate with AI"
3. Paste the prompt from Paper
4. The AI Assistant generates the component

The initial output matches the general structure but not the exact brand styling. From there, you go back to Paper, copy each step's design as React CSS, and paste it into the AI Assistant with instructions to update the styling for that step. Repeat for each step until the component matches your design system.

Fixing Glitches Along the Way

The process is not perfect. In this build, select options were not clickable on the first pass and needed a follow-up prompt to fix. Input fields had a bounce glitch that required another round of corrections. At one point, a fix attempt temporarily broke the entire component logic, but the AI Assistant recovered it on its own.

The pattern is: generate, test, fix, repeat. Expect a few rounds of iteration.

Testing Conditional Branching

Once styled, the branching logic worked as designed:

• Option one on step two goes to step three
• Option two also goes to step three
• Option three skips step three entirely (and the UI reflects the skip)
• Option four skips straight to the calendar booking step

Each branch behaved correctly, and the progress indicator updated to reflect skipped steps.

Connecting the Form to a Webhook

The form's submit URL points to a Make webhook. When a user completes the form and submits, the data (company name, size, industry, contact details, selected options) posts to Make, where it can be routed to any external database.

The final step also supports a Calendly embed via URL, so users can book a meeting directly inside the form flow.

Build 2: Availability Calendar

Designing in Claude Desktop and Paper

The second component is an availability calendar with month views and selectable dates. The process follows the same pattern: tell Claude Desktop what you want, let it read your existing design system in Paper, and generate a new artboard with the calendar layout.

Claude Desktop created a full-width calendar view with selected dates highlighted and a sidebar showing chosen dates. It also generated the prompt for Webflow's AI Assistant.

Generating and Tweaking in Webflow

The same generate-with-AI workflow applies. Paste the prompt, let Webflow build the initial component, then copy the design sections from Paper as React CSS and feed them back into the AI Assistant step by step (calendar panel first, then the sidebar, then the date cells).

Props and Configuration

The calendar component uses two configurable props:

• Block dates: a comma-separated list of dates that appear as unavailable (users cannot select them)
• Field name: the hidden input field name used when the form submits, so selected dates are included in the payload

Embedding in a Webflow Form

The calendar component drops directly into a native Webflow form. A user sees the calendar, selects available dates, fills in name and email fields, and submits. The form posts to a Make webhook, and the payload includes the user's name, email, and selected dates.

On the first test, selected dates were not appearing in the webhook payload. A follow-up prompt to the AI Assistant fixed the issue, and the second test returned the complete data set.

What Makes This Workflow Useful

The value is not that the AI gets everything right on the first try. It does not. The value is that you can build interactive, logic-driven components without writing code manually, without third-party form plugins, and without embedding external tools like Calendly.

The iteration cycle is: prompt, generate, test, fix, repeat. Each round gets closer to the final product. The AI Assistant handles recovery well when things break, and the Paper plus Claude Desktop combination keeps your design system consistent across components.

Frequently Asked Questions

What are Webflow AI code components? Code components are React-based components generated by Webflow's AI Assistant from natural language prompts. They live inside Webflow, support props and configuration, and render as interactive elements on your published site.

Can I use CMS data with AI code components? Not currently. CMS data cannot be connected to AI code components. This is a known limitation.

Can I copy AI code components between Webflow sites? Not reliably. Components may be removed when a site is copied, and they cannot be cloned between separate sites. However, duplicating a site within Webflow does seem to preserve existing components.

What is Paper and do I need it? Paper is a design tool that works with Claude Desktop to create component designs with AI. It is not required, but it makes maintaining a consistent design system much easier. You can copy designs as React CSS and use them as references when prompting Webflow's AI Assistant.

Does the AI Assistant ever break components during editing? Yes. In this walkthrough, a fix attempt temporarily broke the entire form component's logic. The AI Assistant recovered it on its own without manual intervention. Expect some iteration and save your work frequently.

Can I send form data to external tools? Yes. The form's submit URL can point to any webhook endpoint. In this walkthrough, Make receives the data and can route it to Airtable, HubSpot, or any other destination.