Using AI chat to build your website

The Website Builder’s interactive AI chat feature makes building your site faster and easier. Instead of manually creating each page, you can describe what you want (like adding a hero section, changing a background color, or inserting an entire post section) and the AI will instantly generate editable sections using beehiiv’s native design tools.

This lets you focus on your content and layout while still keeping full control to customize everything manually in the builder.

1. Open a page in the Website Builder. From the left panel dashboard, go to Website > Builder, then open an existing page or create a new one.
    
2. Access Chat mode. Click any element on the canvas to open the design panel on the right. You’ll see two modes: Design and Chat.

• Chat mode (default) lets you build or edit your page by engaging naturally with the AI. Your website’s theme acts as the design context for your prompts.
• Design mode lets you fine-tune the look and layout manually with full styling controls. 

3. Select or enter an AI prompt. You can pick from pre-generated suggestions in the chat panel or type your own AI prompt.  
   
   The prompt box appears at the bottom of the chat panel, labeled with the name of the selected element. For example, it would say Signup if you have the Signup block selected on the canvas.
   
   
   
   
   Enter a natural prompt into the prompt box. For the pictured example (below), we used: Put the header in all caps and match the color of the subscribe button. 
   
   You can also upload images to inform layouts, components, and copy that matches your brand. To submit your prompt, hit enter or click the arrow in the prompt box.
   
    
   
4. See the changes. The AI applies your prompt to the selected element as requested, using your publication’s theme, existing blocks, and design system to generate results automatically.

By default, the requests you prompt the AI to make are set to Auto-apply, but you can switch to Review first to approve edits before they appear on the canvas.

After submitting a prompt:

1. Click the Settings icon at the top of the chat panel.
2. Select Review first.
3. Review each suggestion, then click Accept or Discard as needed.
   
   
   

You can move seamlessly between Chat and Design modes:

• Chat mode lets you describe changes the AI can automatically make.
• Design mode gives you full manual control over layout, padding, colors, and spacing.

It's a breeze to continue building your pages by prompting the AI to add new sections and elements. Try using prompts such as:

• ‘Add a features section with three columns’
• ‘Add a FAQ section with an intro or subhead’
• ‘Add a posts section with placeholders for the categories’

You can also select a full section and ask for broader edits, like:

• ‘Change the main background color to blue’ 
• Or select a specific element and direct it to: ‘Change the text color to green’

If you find a design you like, you can simply upload a screenshot or image in Chat mode. The AI will interpret the layout, rebuild it with beehiiv’s building blocks, and you can adjust or rearrange the sections directly in the builder.

The AI can automatically create post sections that display your latest content with your author and tag data. These sections are fully editable; you can adjust layout, styling, and content through the Website Builder.

Your workspace and publication include a set number of monthly AI requests based on your plan type and tier. A credit counter at the bottom of the prompt box shows how many credits you have remaining. Each AI prompt counts toward your monthly shared workspace allowance.

Is the AI Website Builder free to use?
Yes. You get free monthly credits to build and publish based on your plan type and plan tier. If you need more, paid plans include higher credit limits so you can create and ship even faster.
How does Chat mode work?
Select a section (hero, pricing, FAQ, etc.), then tell the AI what to do, like: ‘add a CTA,’ ‘swap the layout,’ ‘make the headline punchier.’ It updates in place, so you can iterate fast without requiring you to code or make manual changes.
How does Design mode work??
Design mode lets you fine-tune everything by hand. Adjust layouts, spacing, colors, fonts, and component styles directly, like a classic website builder. Use it when you want pixel-level control, quick tweaks the AI didn't nail, or to polish the final details before you publish. You can switch between AI edits and Design mode anytime.
Can I create interactive components with this?
Yes. You can build interactive, on-brand components such as calculators, graphs, sliders, accordions, quizzes, and more. You describe the behavior, the AI outputs the HTML component, and it's ready to drop onto your page.
Will the AI make my site look like my brand?
Yes. The AI uses your site's design system — colors, fonts, shadows — as context, so everything it creates feels on-brand. You can give it even more context by uploading image references (moodboards, logos, screenshots), and it will adapt layouts and styling to match that visual direction across pages and components.
Do I need to code?
No. You can build everything with prompts and simple edits. If you want to fine-tune, Design mode will give you full manual control.
Is it mobile-friendly?
Yes. Everything ships responsive and lightweight, so pages look great and load fast on phones and desktop.=