Bricksforge Assistant (AI)

The Bricksforge Assistant helps you with AI in different areas of Bricksforge. It supports both OpenAI and Anthropic (Claude) as AI providers.

How to Use

To use the Bricksforge Assistant, you need an API key from your chosen provider:

Navigate to Bricksforge > Tools > AI Assistant, select your provider, and enter your API key. Once connected, the status will change to “Connected” and AI features will be available.

AI Implementations

Pro Forms Builder (Beta)

The AI-powered Pro Forms Builder lets you create, modify, and design forms through natural language prompts directly inside the Bricks Builder. Select a Pro Forms element and use the AI textarea to describe what you want.

What It Can Do

Create Forms

  • Generate complete forms from a description: “Create a registration form with name, email, and phone”
  • Multi-section forms: “Create a hotel booking form with guest info, stay details, and payment method sections”
  • Multi-step wizards: “Create a 3-step onboarding form”
  • Forms with calculations: “Create an order form with a price calculator. Each item costs 150 per unit.”

Query Loops Dynamically populate Checkboxes, Radios, Card Radios, Card Checkboxes, and Select fields from WordPress post types: “Create checkboxes that show the titles of all posts from the post type Courses”

The AI automatically sets up the Bricks query loop with the correct post type, dynamic data tags, ordering, and pagination.

Conditions & Validation

  • “Show the ‘company’ field only when ‘business’ is selected”
  • “Make the email field required with live validation”
  • “Add a min/max validation for the number field”

Actions & Settings

  • “Add a confetti animation on submit”
  • “Send the form data to a webhook at https://…”
  • “Create a post of type ‘booking’ on submit”
  • “Change the success message to ‘Thank you!‘”

Design & Styling

  • “Make the form dark with rounded corners”
  • “Change the labels to white”
  • “Style the submit button with the primary color”
  • Supports CSS Variables from AutomaticCSS, Core Framework, and Bricks Style Manager
  • Applies styles to Global Classes when “Detect Global Classes” is enabled

Modify Existing Forms

  • “Add a phone field after the email”
  • “Change the label of the name field to ‘Full Name’”
  • “Add a date picker for the arrival date”

Smart Intent Detection

The AI automatically classifies your prompt into one of four categories:

  • Structure: Adding/removing fields, changing labels, validation, conditions
  • Design: Visual styling (colors, backgrounds, borders, fonts)
  • Settings: Form actions, email config, success messages, redirects

This ensures only the relevant processing runs — a design change won’t rebuild the form, and a label change won’t trigger a design call.

Smart Context Gathering

The AI analyzes your prompt to determine what additional data it needs:

  • Post Types: When you mention custom post types, query loops, or dynamic content
  • Custom Fields: When you reference ACF, Meta Box, or JetEngine fields
  • Taxonomies: When you mention categories, tags, or custom taxonomies
  • Language: When the form should match the site language

Only relevant data is fetched — simple prompts like “add a phone field” don’t trigger any extra lookups.

Clarification Questions

For vague prompts like “Create a registration form”, the AI may ask 1-2 quick questions before building (e.g., which fields to include, layout preference). These appear as choice chips directly in the panel. Clear, specific prompts skip this step automatically.

AI Settings

Click the gear icon next to the textarea to configure:

  • Detect Global Classes: When enabled, design changes are also applied to Global Classes for consistent styling across elements
  • Auto-create Global Classes (BEM): Automatically creates BEM-named Global Classes for form elements (e.g., form___heading, form___submit)
  • Use CSS Variables: Replaces static values with var() references from your CSS framework
    • Select which sources to use: AutomaticCSS, Core Framework, Bricks Native
    • Only variables from whitelisted frontend sources are used — builder-only variables are excluded

Tips

  • Be specific: “Create a contact form with first name, last name, email, phone, and message” works better than “Create a contact form”
  • Iterate: Start with a basic form, then modify it step by step: “Add validation”, “Make it dark”, “Add a honeypot”
  • Use calculations: Pair calculation fields with live-value fields to display computed results: “Add a calculator that shows the total based on quantity times 50”
  • Query loops: Reference your actual post type names: “Create radio buttons from the ‘course’ post type”

Animations

You can use the Bricksforge Assistant to create one or multiple animations for a timeline. Follow these steps to create an animation:

  1. Open the Bricksforge Panel and switch to the tab “Timelines”.
  2. Create a new timeline or open an existing one.
  3. Click the “AI” button beside the ”+” button.
  4. Enter a prompt and click “Create Animation”.

The prompt should be a description of the animation you want to create. For example, you could use Move the element 200 pixels to the right. The AI will then generate the animation and add it to the timeline. First of all, it will try to use existing controls to create the animation. If for a specific key no control exists, it will use the “Animation Object” field to add the animation data.

If for your desired animation two or more animation tweens are needed, the AI will take care of that. For example, if you want to move an element to the right and then to the bottom, the AI will create two tweens for that.

Tips

Animation Selector

If you don’t use a specific selector in your prompt, the AI will use the trigger selector of your timeline. If you want to use a different selector, you can add it to the prompt. For example, you could use Move the element .header-xy 200 pixels to the right.

Be concrete

Be concrete in your prompt. The more specific you are, the better the AI can understand what you want to do. Include details about animation method (fromTo, from, to), delays, durations, and selectors.