DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 AI Content & Layout Builder: native, editable AI sections for Elementor, WPBakery and Gutenberg

Our own WordPress plugin: AI copywriting, SEO meta, image alt text and a layout generator that turns a one-line prompt into native Elementor containers or WPBakery rows, built on the Google Gemini API with the site owner's own key.

WordPressPHPReactElementorWPBakeryGutenbergGoogle Gemini APIREST APIPHPUnitJestTailwind CSS
Industry
WordPress plugins
Services
AI ImplementationWeb DevelopmentCustom Software

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
A one-line prompt imported into Elementor 4.3.5 as native containers: header, billing toggle, three pricing plans with a featured middle plan, and an FAQ.

A one-line prompt imported into Elementor 4.3.5 as native containers: header, billing toggle, three pricing plans with a featured middle plan, and an FAQ.

The challenge

Most AI add-ons for page builders paste generated text into a single block, or produce HTML that the builder can't edit. Site builders want the opposite: a section they can describe in one sentence ("3-column pricing table with a monthly/yearly toggle") that arrives as the builder's own containers, headings, lists and buttons, ready to restyle. Making that reliable means getting long, deeply nested JSON out of a language model every time, converting it for two very different builders, and running inside editors (Elementor, WPBakery, the block editor and the Media Library) that each have their own APIs.

Our solution

We built DEV3 AI Content & Layout Builder as a WordPress plugin in PHP with React-based editor integrations, using the Google Gemini API through the customer's own encrypted API key.

Key design decisions

  • One builder-neutral layout tree. The model fills a single response schema: sections → columns → widgets, with 15 widget types such as heading, text, price, period toggle, accordion and testimonial. The same tree is converted to Elementor elements and to WPBakery shortcodes, so the AI never has to know either builder's internal format.
  • Normalise before converting. Layout_Schema::normalize() drops unknown widgets, caps sections, columns and items, rebalances column widths to 100%, sanitises HTML, URLs and Font Awesome classes, and turns a price card with no amount into a heading instead of an empty card.
  • Native widgets only. Elementor output uses free core widgets in container (flexbox) or legacy section/column mode, detected from the site. WPBakery output uses core elements with correctly escaped attributes. A small frontend script powers the billing-period toggle and loads only on pages that use it.
  • Reliable structured output. Copy and JSON tasks on gemini-2.5-flash run with low temperature and schema length caps; vision gets a small thinking budget; layouts get an explicit 2,048-token thinking budget and room for long answers; malformed or truncated JSON gets one near-deterministic retry.
  • Editor-native entry points. A wand on Elementor text controls plus "Write with AI" and "Generate items" for accordions, tabs and toggles; WPBakery params and a navbar button; a block-editor toolbar button and AI sidebar with SEO meta; alt text, caption and title in Media Library attachment details.

Architecture

All editors call one REST namespace. A prompt orchestrator builds the system instruction, prompt and schema per task (rewrite, tone, translate, SEO meta, items, vision, layout), the client calls the API, and the response parser turns the answer into plain text, safe HTML or validated JSON. Every generation is rate-limited per user, logged with tokens and latency, and stored in a per-user history that can be restored. The API key is encrypted with AES-256-GCM and never sent to the browser. Licensing, updates and the settings shell come from a shared core used across DEV3's plugins.

Results

The plugin is complete and is being prepared for release on CodeCanyon and the DEV3 marketplace. What was built and verified:

  • 28 PHPUnit tests with 134 assertions, including layout normalisation, Elementor container and section output, WPBakery shortcode escaping and API error mapping
  • 5 Jest tests for the shared editor client
  • PHP_CodeSniffer with WordPress Coding Standards: 0 errors, 0 warnings
  • Live in Elementor 4.3.5: a 3-column pricing table with a monthly/yearly toggle imported as native, editable containers; headings, text-editor content and accordion items generated in place
  • Live in the block editor and Media Library: toolbar actions, SEO meta in the sidebar, and alt text, caption and title generated from an image
  • Fixed during QA: a structured-output loop on gemini-2.5-flash with thinking disabled, empty price objects from layouts with too little thinking budget, and REST URLs that broke on sites using plain permalinks

Related case studies