Your First Website
Building Your First Website
This is the end-to-end flow from a blank Bricks install to a published, styled site, built by the Brickser AI agent.
Before you start, make sure you have completed Installation — license activated, an AI provider key added (Anthropic, Gemini, or OpenAI), and the Brickser AI design system imported and assigned in Bricks → Theme Styles.
1. Open the Brickser sidebar
Edit any page in Bricks. In the top toolbar, click the sparkle icon next to + Elements. The Brickser AI panel slides in on the right of the canvas, ready to work.
2. Create your project
Each WordPress site has one Brickser project. The first time you open the sidebar, Brickser AI asks you to set it up:
- Project name — anything; this is just for you.
- Business description — one or two sentences describing what the site is for. The more concrete, the better the generation.
- Primary language — the language Brickser AI writes in by default. Pick from 15 supported languages.
Treat the business description like a creative brief. "Boutique pilates studio in Brooklyn for new mothers, calm and warm tone" beats "fitness website" every time.
3. Generate a sitemap
Brickser AI proposes a sitemap — a list of pages with a rough section count for each (Home, About, Services, Contact, etc.). Add, remove, or rename pages until the structure matches what you want, then approve.
4. Generate a page
Pick a page and click Generate. The agent uses its intelligence to build your page from the Brickser UI library — reasoning about which sections fit your business (hero, features, pricing, testimonials, FAQ, and more), writing copy grounded in your business description, and inserting everything as native Bricks sections, containers, and global classes with your brand styling applied as it goes.
Every section the agent picks is BEM-named, accessible, and performance-ready by design — no lorem ipsum, no AI slop, no markup you'll need to rewrite later.
This usually takes 30–60 seconds per page. The canvas shows a skeleton overlay while the agent works.
Before you generate, pick a model tier from the selector next to the prompt:
- Default — fast and efficient, great for everyday pages and quick iteration.
- Thinking — best output quality for complex pages or nuanced copy, but takes more time and tokens.
Start on Default; switch to Thinking when a page needs sharper reasoning or you are not happy with the first pass. The tiers work the same across all supported providers — Brickser AI handles the model mapping behind the scenes.
5. Refine
You almost never want to ship the first generation as-is. Common moves:
- Swap a section variant. Hover a section, click the shuffle icon, get a different layout for the same content type.
- Rewrite a block of text. Click any text element, click the sparkle icon, choose Rewrite / Shorten / Expand / Tone / Translate. Iterate as many times as you need, and switch between Default and Thinking model tiers depending on the difficulty of the rewrite. See Content Refinement.
- Insert from the UI library directly. Browse the catalog in the sidebar and drop sections onto the canvas — no AI prompt needed.
- Replace images. Click any image and use Bricks' native image picker.
- Reorder sections. Drag in the Bricks structure panel as usual.
6. Customize your brand
The Brickser AI design system you imported during installation is your starting point. Open the Style tab in the sidebar to make it yours: set your primary brand color (Brickser AI derives an 11-step palette automatically) and pick your heading and body fonts. Changes cascade to every section the agent has inserted, anywhere on the site. See Custom Colors & Fonts for the full system.
7. Save and publish
Click Save in the Bricks toolbar (or use the keyboard shortcut). Brickser AI does not have its own save — it writes through Bricks, so the standard Bricks save and publish flow is what ships your work.
Brickser AI auto-saves project metadata (sitemap, styles, page mapping) as you go. The page content itself is saved by Bricks when you click Save.
Moving to another site
Need to clone this work to a different site, or hand it off to a client? In the sidebar, open the project menu and choose Export. You get a single file containing your sitemap, style configuration, global classes, variables, palette, and page content — everything in one bundle. On the destination site, open Brickser AI and choose Import.