Prompt composer

The prompt composer is where you build context-aware prompts for your AI coding tools. It lives in two places: the PromptWorkshop in the context panel (right side), and the CommandPalette overlay (Cmd+P). Both share the same @mention system and compose logic.

The @mention system

Type @ in the prompt input and an autocomplete dropdown appears. First, pick a type:

Type	What it references
@page	Pages on your Bricks site
@section	Sections within pages
@element	Individual Bricks elements
@class	Global CSS classes
@color	Theme colors
@variable	CSS custom properties
@component	Reusable components
@media	Media library items
@template	Saved templates
@form	Form elements
@loop	Query loop builders
@query	Any Bricks element with query metadata
@product	WooCommerce products
@product-category	WooCommerce product categories
@product-tag	WooCommerce product tags
@condition	Conditional display rules

After selecting a type, the dropdown switches to a search mode. Start typing to filter results. These are fetched live from your connected WordPress site through the REST API. Select a result and it becomes a mention pill attached to your prompt.

Two-step selection for @section and @element. These types use a page-first flow: pick a page, then browse sections or elements within it. A back button lets you return to the page list. This keeps results focused instead of searching globally.

Query and WooCommerce support for @query, @product, @product-category, and @product-tag. Query mentions search the site’s existing Bricks loops and query-enabled elements. Woo mentions read the live WooCommerce catalog metadata exposed by the plugin, so agents can reference actual products and taxonomies instead of guessing slugs.

CSS framework support for @color and @variable. Colors and variables are pulled from multiple sources: Bricks Builder’s built-in palette, theme styles, and CSS files generated by frameworks like Automatic.css (ACSS) or Cwicly. If your site uses a CSS framework, its custom properties and colors will appear automatically.

You can also trigger autocomplete by typing the category directly, like @page followed by a space. Once you have typed at least two characters of a type name, the app matches it and jumps straight to search. Click anywhere outside the dropdown to dismiss it.

How autocomplete navigation works

• Arrow Up / Arrow Down. Move through the dropdown list. For @media results, the image preview updates as you navigate so you can preview without switching to the mouse.
• Tab or Enter. Select the highlighted item
• Escape. Close the dropdown without selecting

Color results show inline swatches next to each entry so you can visually compare colors without memorizing hex values.

What happens behind the scenes

When you send a prompt, the app resolves each mention. It calls the site’s REST API to fetch the actual data for that page, section, class, or whatever you referenced. That data gets formatted into a structured context block and prepended to your prompt text. The AI tool receives the full composed prompt with all the context it needs.

Smart site context. The site URL and name header is only sent with your first prompt in a session. Subsequent prompts skip the redundant header to keep things clean. If you need to re-send the connection context (for example, after reconnecting to a different site), click the Reconnect button in the prompt toolbar.

For example, if you write:

Restyle the hero section on @page Homepage to use a dark background

The app resolves the @page Homepage mention, pulls the page’s element tree, and sends the AI tool something like:

--- Site Context ---
Page: Homepage (ID 42)
Elements: [section, heading, paragraph, button, ...]
...
--- End Context ---

Restyle the hero section on Homepage to use a dark background

Abilities discovery

If your WordPress site runs version 6.9 or later, the session pre-prompt automatically includes abilities from all installed plugins. This means when you launch Claude Code or Codex through the GUI, the AI already knows what Yoast, WooCommerce, Gravity Forms, or any other abilities-enabled plugin can do.

The abilities are discovered from the WordPress Abilities API and formatted as a list of available actions with their HTTP methods and names.

See the WordPress Abilities guide for more details.

Variable pills

The prompt input uses a VariableEditor, a contentEditable div that renders {variables} and @mentions as inline colored pills. These are not plain text. They are non-editable spans styled to stand out:

• Curly brace variables like {description} or {site_url}, shown with the accent color
• @mention references, colored by type (blue for pages, purple for sections, green for elements, amber for classes, pink for colors, cyan for variables, orange for components, lime for media, gold for query/commerce objects). Hover over a mention pill to see a preview — color swatches for @color, image thumbnails for @media, and labels for @query and @product
• Double-curly variables like {{template}}, shown in cyan

Click any pill to open a popover that shows its resolved value (if available) and lets you edit it inline. This is especially useful in the LaunchDialog’s system prompt editor, where pills like {site_url} resolve to your actual site URL.

Presets

The PromptWorkshop includes a preset library organized into four categories:

Build

• Generate Section: Create a new section from a description
• Generate Full Page: Build an entire page layout
• Full Page Build: Multi-step snapshot, pull, generate, push

Edit

• Modify Elements: Change existing elements on a page
• Restyle Section: Update section styling
• Convert HTML: Transform an HTML file into Bricks elements

Manage

• Pull Page: Download page elements from your site
• Push Page: Upload local changes back
• Snapshot Page: Backup current page state
• Rollback Page: Restore from a previous snapshot

Inspect

• Inspect Page: View all elements on a page
• Check Styles: View theme styles, colors, and CSS variables

Click a preset to load its prompt template into the editor. The template usually includes @page or @section mentions and {description} placeholders that you fill in.

You can also save your own presets. Write a prompt, click “Save”, name it, and it appears alongside the built-in ones. Custom presets persist in your config file.

PromptWorkshop vs CommandPalette

Both provide the same mention input and compose pipeline. The difference is where they live and how you access them.

PromptWorkshop (context panel):

• Always visible when the context panel is open
• Shows presets and history below the input
• Has Send, Save, and Copy buttons
• Best for longer, more involved prompts

CommandPalette (Cmd+P):

• Overlay that appears on top of everything
• Quick-access mention chips (@page, @section, @query, @product, @class, etc.) below the input
• Shows a preview step before sending; hit Send once to preview the composed prompt, then again to pipe it to the terminal
• Also handles app commands: add a site, switch sites, change theme, save presets
• Recent prompt history shows when the input is empty
• Best for fast, in-the-flow prompting

Tips for effective prompts

Be specific about what you want changed. “Make the hero section look better” gives the AI little to work with. “Change the hero section background to a dark gradient, increase heading font size to 48px, and add 80px of vertical padding” gives it something concrete.

Reference real site objects. A prompt with @page Homepage and @section hero gives the agent actual element data. Without mentions, the agent has to guess at your site structure.

Use the pull-edit-push pattern. Many presets follow this: pull current state, make changes, push back. It is the safest workflow because the agent starts from what actually exists on the site.

Combine mentions. You can reference multiple objects in one prompt: “On @page Shop, restyle @query Featured Products to use @product-category Hoodies and match the @color primary token.” Each mention adds its own resolved context.

Save prompts you repeat. If you find yourself writing the same kind of prompt often, save it as a preset. Next time, one click loads the template and you just fill in the specifics.