Choose the framework for AI-generated projects

Pick Tailwind CSS 4, Bootstrap 5 or plain HTML and CSS before AI Assistant builds a new site, so the project starts with the framework and styling tools you intend to use.

Requires Pinegrow 10

When AI Assistant creates a new site for you, you choose the framework first: Tailwind CSS 4, Bootstrap 5, or plain HTML and CSS. Pinegrow starts the project from a matching starter, tells the AI to build with that framework, and turns on the matching Design panel so you can keep styling the site visually.

Create with AI is available when AI Assistant is set up with an AI provider. If you haven't set it up yet, see Pinegrow AI Assistant.

Open Create with AI

In Pinegrow Desktop, click New project on the start screen, or choose File › New page…. The Create a new page or project dialog opens. Select Create with AI at the top of the list on the left.

The Create a new page or project dialog with the Create with AI tab selected. A card titled What do you want to build? contains an empty brief field, the Ask and Smart toggles, and the Framework menu set to Tailwind, the Format menu set to Auto and the Style menu set to Auto, above a Build button. — Open the Create with AI tab in the Create a new page or project dialog. The Framework menu sits under the brief field.

In Pinegrow Online, click New project and then Create with AI in the template chooser. The Create new project with AI Assistant screen opens with the same form. Pinegrow Online remembers how you started, so New project opens Create with AI again next time. To use a template instead, click Create project manually. After you create a project from a template, New project opens the template chooser again.

Choose the framework

Open the Framework menu below the brief field and choose one of the options:

Tailwind: a Tailwind CSS 4 project.
Bootstrap: a Bootstrap 5 project.
Plain HTML & CSS: a semantic HTML project without a CSS framework.

The Create with AI card with the Framework menu open, listing Tailwind, Bootstrap (checked) and Plain HTML & CSS. Format is set to Landing and Style to Tactile organic. — The Framework menu offers Tailwind, Bootstrap and Plain HTML & CSS.

Pinegrow remembers your choice and selects it again the next time you use Create with AI.

In Pinegrow Desktop, the menu lists only the frameworks that are available in your Pinegrow installation.

Describe the site and build it

Type or paste a short brief in the What do you want to build? field. You can also attach reference images with the image button.
Check the Framework menu.
Optionally, choose a Format, which decides how the site is organized, and a Style, which sets its visual direction. Auto lets the AI decide.
Turn on Ask if you want the AI to ask you three questions before it builds. Smart switches between the quick and the smart model.
Click Build, or press Cmd+Enter (Ctrl+Enter on Windows and Linux).

The Create with AI card with a brief for Cedar House, a neighborhood movement studio, typed in the brief field. Framework is Bootstrap, Format is Landing and Style is Tactile organic. The Build button is below. — Describe the site, check the framework and click Build.

You can save briefs you use often with Presets.

What Pinegrow does with your choice

When you click Build, Pinegrow shows Creating your project… with the framework it is using, for example Creating a new Bootstrap 5 project and starting the first build right away. Then:

It creates a new project from the matching starter. The Bootstrap project includes Bootstrap's files. The plain HTML project has no framework files.
It tells the AI to use that framework. The selected framework is given to the AI as a firm requirement, together with rules for that framework:
- Tailwind: use Tailwind utility classes for layout and local styling, and the Design panel for global colors and fonts.
- Bootstrap: prefer Bootstrap components and utility classes, use the Design panel for global colors, fonts, backgrounds and Bootstrap theme options, and add custom CSS only when neither can express the design.
- Plain HTML & CSS: write semantic HTML, use the Plain CSS Design panel for global colors, typography, headings and page background, reuse its CSS variables, and write custom CSS only for component styling.
- For each framework, the AI is also told not to switch to one of the other two.
It turns on the matching Design panel for the new project, if it isn't already active, so the AI and you work with the same visual styling tools.
It opens the AI Assistant panel and starts the build. You can follow the progress there, and the page updates as the AI works.

Pinegrow with a new project named Bootstrap-5 followed by a date and time. The project files include _pgbackup, _pginfo, assets, bootstrap, bootstrap_theme, generated_images, index.html, pinegrow.json, projectdb.pgml and style.css. The page shows the Cedar House landing page. The AI Assistant panel on the right ends with Task completed and Done. — The finished Cedar House page in a new Bootstrap project. The project contains the Bootstrap starter's folders, and AI Assistant reports the task as completed.

Pinegrow with a new project named Plain-HTML followed by a date. The project files are _pgbackup, _pginfo, css, generated_images, index.html, pinegrow.json and projectdb.pgml. The page shows the top of the Mara Vale photography portfolio. — A plain HTML and CSS project has no framework folders. The page is styled with the project's own CSS.

The AI writes the page content, markup and styles. When image generation is available in AI Assistant, it can also create images for the site. Building a complete first version can take a few minutes.

Keep working on the project

The result is a normal Pinegrow project. You can edit it visually, style it with the Design panel and the framework's tools, and ask AI Assistant for more changes. Save your work with File › Save all.

In Pinegrow Desktop, the new project starts in your default folder for new projects with a temporary name, such as Bootstrap-5- followed by the date and time. When you close it with File › Close project, Pinegrow asks Do you want to keep this project? and suggests a name, usually the name the AI gave the project.

The Do you want to keep this project? dialog. Project name is filled in with Cedar House. The folder path is hidden. Buttons: Move to a different location, Delete it, Cancel and Keep it. — When you close the new project, Pinegrow asks whether to keep it and suggests a name.

Click Keep it to keep the project with the suggested name. If you change the name, the button changes to Rename and keep.
Click Move to a different location… to save the project somewhere else.
Click Delete it and confirm to delete the project folder.

In Pinegrow Online, the new project starts as Untitled AI Project.

Limitations and troubleshooting

The framework is chosen once. The Framework menu applies only when Create with AI creates a new project. It doesn't convert an existing project to another framework. To try a different framework, create a new project with Create with AI.
One version per framework. Create with AI uses Tailwind CSS 4 and Bootstrap 5. For other framework versions, start from a template in the new project dialog.
No Create with AI tab or button. Create with AI is shown only when AI Assistant is enabled with a configured AI provider. In CMS Mode, AI Assistant must be allowed.
"Describe the project or attach one or more images first." The brief is empty. Type a brief or attach at least one image.
"The Bootstrap 5 starter template is not available." (or the Tailwind or plain HTML equivalent) Pinegrow Desktop couldn't find the starter template for that framework. Choose another framework or start from a template in the new project dialog.
"AI Assistant is not available." AI Assistant was turned off or lost its provider before the build started. Check your AI Assistant settings and try again.
Check the result. The framework is a firm instruction to the AI, not a guarantee. Review the generated pages before you publish them. See Review AI changes.