Generate stunning, production-ready Bricks Builder sections from plain text prompts, screenshots, or raw code. Zero frontend bloat — pure native Bricks elements.
[
{
"id": "x7k2m9",
"name": "section",
"settings": {
"_background": { "color": "#0f0f23" },
"_padding": { "top": "100px", "bottom": "100px" }
}
},
{
"id": "p3n8w1",
"name": "heading",
"settings": {
"text": "Build Something Amazing",
"tag": "h1",
"_typography": { "font-size": "64px" }
}
}
]Works seamlessly with the tools you already use
Four powerful input modes, four AI providers, AI Credits or BYOK — and a zero-bloat output pipeline that generates native Bricks elements.
Describe what you want in plain English. The AI generates fully styled, responsive Bricks Builder sections with proper typography, colors, spacing, and hover effects.
“A dark hero section with gradient, bold heading, subtitle, and two CTA buttons”
Paste any HTML, CSS, and JavaScript. The converter parses it into native Bricks elements with mapped styles — no AI API call required.
Paste HTML + CSS + JS → Native Bricks elements in seconds
Upload a design screenshot or mockup. The AI vision model analyzes colors, layout, typography, and recreates it as native Bricks elements.
Drag & drop any .png / .jpg / .webp screenshot
Output is native Bricks JSON stored in postmeta. No extra CSS files, no JavaScript libraries, no shortcodes.
All API keys encrypted with AES-256-CBC using WordPress salts. Keys are never stored in plain text.
Full WooCommerce support — generate product grids, cart, checkout, and account page elements natively in Bricks.
Every generated section includes tablet and mobile breakpoint overrides. Proper stacking, font scaling, and spacing.
Collects your theme's CSS variables, color palette, global classes, and typography to generate matching designs.
Auto-generates clean BEM class names for converted elements. Keeps your markup organized and maintainable.
Browse and import from a curated library of professional Bricks templates — hero sections, footers, pricing, FAQ, and 60+ categories.
Every AI generation is saved with full metadata — prompt, provider, model, tokens, duration. Browse, search, and filter your past generations.
Open the AI panel inside the Bricks editor with Ctrl+Shift+A. Type a prompt, paste HTML/CSS/JS, or drag a screenshot into the upload zone.
Prompt: A pricing section with 3 cards, dark background, the middle card highlighted with a purple border
Claude, GPT-4o, Gemini, or Grok processes your input with site-aware context — your CSS variables, color palette, typography, and breakpoints — and returns fully styled Bricks JSON.
Generating... section → container → 3x div → heading + text + button (per card)
Mapped: _background, _typography, _padding, _flexbox, _border, _boxShadow
Responsive: tablet + mobile overrides applied
Elements are inserted directly into Bricks' postmeta and appear in the editor instantly. Fully editable — adjust any setting, style, or content as you normally would.
Inserted: 15 elements added to page
Status: All elements fully editable in Bricks structure panel
Bloat: 0 extra files. Pure native Bricks.
A single AI generation saves 15–30 minutes. At 10 sections per page, that's 2–5 hours saved per project.
Use your own API keys (BYOK) or our AI Credits — pay only for what you use, no markup.
claude-sonnet-4-20250514
gpt-4o
gemini-2.5-flash
grok-3-mini-fast
We're exploring support for Mistral, Llama, and other emerging AI models. Your license includes all future AI provider integrations at no extra cost. You can also use AI Credits for zero-config access — no API keys needed.
One-time purchase. No subscriptions, no recurring fees. Lock in launch pricing before it's gone.
Perfect for a single project
Best for freelancers & small agencies
For agencies building at scale
Unlimited sites, unlimited power
All plans include AI Credits (zero-config, no keys needed) and BYOK (bring your own keys from Anthropic, OpenAI, Google, or xAI — zero markup). Use whichever mode suits you.
Bricks AI Studio is a WordPress plugin that adds AI-powered page building to the Bricks Builder editor. It lets you generate fully styled, responsive Bricks elements from text prompts, code snippets, or screenshots. All output is native Bricks JSON — no frontend bloat, no extra files, no shortcodes.
Not necessarily! You have two options: AI Credits — use our managed infrastructure with zero configuration. No API keys needed, just generate. Or BYOK (Bring Your Own Key) — use your own API keys from Anthropic (Claude), OpenAI (GPT-4o), Google (Gemini), or xAI (Grok). Pay providers directly at their standard rates with zero markup. Keys are encrypted with AES-256-CBC and never leave your server.
AI Credits is our managed generation service. Instead of managing your own API keys, you purchase credits and generate through our cloud proxy. We handle all provider integration, model routing, and token management. It's the easiest way to get started — just activate your license and start generating. Credit purchase coming soon.
BYOK mode: A typical section costs ~$0.01–$0.05 in API tokens. A full page (5 sections) runs ~$0.10–$0.25. Gemini Flash models are even cheaper. Code-to-Bricks uses zero API calls. AI Credits mode: Pay-as-you-go pricing through our managed service. The plugin tracks all usage so you can monitor costs.
Four providers: Anthropic Claude (recommended), OpenAI GPT-4o, Google Gemini (2.5 Pro, 2.5 Flash, and more), and xAI Grok (Grok 3 & Grok 3 Mini). All include vision support for screenshot-to-Bricks. You can switch providers per request. More providers coming — all included with your license.
No. Bricks AI Studio generates native Bricks elements stored in postmeta. The output is identical to what you'd create manually in the Bricks editor. No extra CSS files, no JavaScript libraries, no shortcodes are added to the frontend.
One-time purchase, no subscriptions. After purchase you receive a BAIS-XXXX-XXXX-XXXX-XXXX license key. Activate it in Settings → Bricks AI Studio. Deactivate and reactivate on a different domain at any time. Staging sites don't count against your limit. Single & Multi include 1 year of updates; Agency & Unlimited include lifetime updates.
Stop designing from scratch. Let AI generate production-ready Bricks sections in seconds. Lock in lifetime pricing before it's gone.