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
Three powerful input modes, two AI providers, 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.
Server-Sent Events (SSE) streaming delivers AI output in real-time. Watch elements appear as they're generated.
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.
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 or GPT-4o 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.
Use your own API keys. Pay only for what you use — no markup, no middleman.
claude-sonnet-4-20250514
gpt-4o
One-time purchase. Lifetime updates. No subscriptions, no recurring fees.
Perfect for a single project
Best for freelancers & small agencies
For agencies building at scale
You use your own API keys — we never touch your AI usage. Pay OpenAI or Anthropic directly at their standard rates. No markup.
We're actively building new features. Here's what's on the horizon.
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.
Yes. Bricks AI Studio is specifically built for the Bricks Builder page builder (which is a WordPress theme). You need Bricks Builder 1.9 or higher installed and activated. The plugin integrates directly into the Bricks editor interface.
Yes, you bring your own API keys from Anthropic (Claude) and/or OpenAI (GPT-4o). This means you pay the AI providers directly at their standard rates with zero markup from us. Your keys are encrypted with AES-256-CBC and never leave your server.
A typical section generation costs roughly $0.01–$0.05 in API tokens depending on complexity and provider. A full page with 5 sections might cost $0.10–$0.25. The Code-to-Bricks converter uses zero API calls — it runs entirely on your server. The plugin tracks your usage so you can monitor costs.
No. Bricks AI Studio generates native Bricks elements stored in the _bricks_page_content_2 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.
Absolutely. Generated elements are fully native Bricks elements. You can click on any element in the Bricks structure panel and edit its settings, styles, content, and responsive overrides exactly as you would with manually created elements.
AI Generate uses Claude or GPT-4o to create elements from a text description. It requires an API key and costs a small amount per request. Code to Bricks is a deterministic converter — it parses your HTML, maps CSS properties to Bricks settings, and preserves JavaScript. It runs entirely on your server with zero API calls.
After purchase, you receive a license key (format: BAIS-XXXX-XXXX-XXXX-XXXX). Enter it in Settings > Bricks AI Studio along with the license server URL. The plugin validates your license and activates for your domain. You can deactivate and reactivate on a different domain at any time within your license limit.
Staging environments on common subdomains (staging.*, dev.*, *.local, localhost) are not counted against your activation limit. Only production domains count. So a Single license effectively covers 1 production site + unlimited staging.
The plugin continues to work indefinitely — you just stop receiving new version updates and new prompt improvements. You can renew at a discounted rate to get updates again. The Agency license includes lifetime updates.
Yes. We offer a 14-day money-back guarantee. If Bricks AI Studio doesn't meet your expectations, contact us within 14 days of purchase for a full refund — no questions asked.
Stop designing from scratch. Let AI generate production-ready Bricks sections in seconds.
14-day money-back guarantee. No subscription. Use your own API keys.