New Semantics

English

Deutsch

English

Deutsch

Theme

Generate a widget with Vibe Code AI ​

The Vibe Code AI widget builds a custom Pagebuilder widget from a plain-language description. You describe what you want in a chat — a banner, an image slider, a feature grid — and the AI generates the layout, the editable fields, and the styling for you. You then fill in the real content in the Settings tab, exactly like any other widget — no coding required.

This page walks you through generating a widget, refining it, and editing its content.

Prerequisite: An admin must assign an AI connection to the Vibe Code AI feature first (see step 1). You also need a page open in the Pagebuilder with at least one Row and Column. If you do not have one, start with Create your first page.

How it works ​

Vibe Code AI splits the work into two places:

  • The chat (the Vibe Code tab) generates and changes the structure — the HTML layout, which fields exist, and the styling.
  • The Settings tab is where you edit the actual content — text, images, and repeatable items — just like with any standard widget.

Keep that split in mind: you describe the shape in the chat, then you fill the shape with content in Settings.

1. Assign an AI connection (admin, one-time) ​

Vibe Code AI needs a connected AI provider before it can generate anything. An administrator sets this up once under Search & AI → AI settings (/admin/ai):

  1. Open the AI settings panel.
  2. Find the Vibe Code AI feature in the feature list.
  3. Assign an AI connection to it.

Use a strong model

Vibe Code AI writes complete layouts, fields, and CSS in one pass. A strong model (for example Opus or GPT-4o) gives noticeably better results than a small/fast model. Assign the strongest connection you have to this feature.

If no connection is assigned, generation fails with an error message in the chat. See Common issues.

2. Add the Vibe Code AI widget ​

In the Pagebuilder, click the +-icon inside the Column where you want the widget. The Widget Picker opens. Find Vibe Code AI and click it.

The widget is placed in the Column. Because it has no content yet, it shows an empty placeholder until you generate one.

3. Describe the widget in the chat ​

Select the widget. The Properties Panel on the right opens directly on the Vibe Code tab — a chat box.

Type what you want in plain language, then click Generate (or press Ctrl+Enter / Cmd+Enter). For example:

  • "a banner with a background image, title, text and a button"
  • "an image slider with 3 visible slides, autoplay and arrows"
  • "a 3-column feature grid, each column with an icon, a headline and a short text"
  • "a pricing card with a title, a price, a list of features and a call-to-action button"

The button shows Generating… while the AI works. When it finishes, the widget is built and appears immediately in the Live Preview — with its layout, its editable fields, and its styling in place.

Generation runs in the background

Generation can take up to a few minutes for a complex widget. It runs as a background job, so you can keep working elsewhere in the Pagebuilder while it finishes. The result appears in the chat and the preview when it is ready.

4. Refine with more messages ​

The chat keeps the conversation. To change the widget, just send another message describing the change. For example:

  • "make the accent color green"
  • "show 4 slides instead of 3"
  • "add a subtitle under the title"
  • "turn off autoplay and add navigation dots"

Each refinement updates the structure and re-renders the preview.

Refinements apply to all languages

A refinement changes the widget structure (layout, fields, styling) across all languages at once. Your already-entered content is preserved — text and images you typed in the Settings tab stay intact. Only the shape changes, not your words.

To start over, click the Reset icon next to the chat box (the circular arrow). This clears the conversation so your next message starts a fresh description.

5. Edit the content in the Settings tab ​

Once the structure exists, switch to the Settings tab in the Properties Panel. Here you edit the real content of the widget — exactly like any other Pagebuilder widget:

  • Text fields — titles, subtitles, button labels.
  • Rich text (CKEditor) — formatted paragraphs with headings, lists, and links.
  • Images — click an image field to open the Media Manager and pick or upload an image.
  • Items (repeater) — for sliders, grids, or lists: add, sort by dragging, and delete entries. Each item has its own fields (for example slide image, title, and link).
  • Plus number, color, and select fields, depending on what you described.

After editing, click Save at the top of the Properties Panel. The widget re-renders on the page.

Generate first, fill later

The AI seeds the widget with sensible example content so the preview looks complete right away. Replace that placeholder text and the example images with your own in the Settings tab.

6. Translate per language ​

Vibe Code AI widgets are fully multi-language. Use the language tabs in the Settings tab to switch language and translate the content per language.

The structure (layout and fields) is shared across all languages — you only translate the values. Images and icons carry over from the first language as a starting point, so you do not have to re-pick them in every language; swap them only where a language needs a different image.

7. Save and check the page ​

Click Save in the Properties Panel, then Publish the page when you are happy with the result. The widget renders on the live page like any other widget.

What you can generate ​

Vibe Code AI can produce a wide range of content widgets:

  • Sliders and carousels — 1, 2, 3, or more visible slides, autoplay, loop, arrows, and dots.
  • Rich text blocks — formatted text edited through CKEditor.
  • Images — picked and managed through the Media Manager.
  • Font Awesome icons — for feature lists, cards, and buttons.
  • Multi-language content — translated per language with shared structure.
  • Scoped styling — the generated CSS only affects this widget, so it cannot leak into the rest of the page.

Common issues ​

Generation fails or the chat shows an error. The most common cause is that no AI connection is assigned to the Vibe Code AI feature. Ask an admin to assign one under Search & AI → AI settings (/admin/ai). See step 1.

Items appear in the editor but are empty on the page. Generated items are starting points. Open each item in the Settings tab and fill in its fields, then click Save. Also make sure you have translated the items in every language you publish — items added in one language still need their text in the others.

A refinement changed the layout but my text is gone. Your text is not deleted — refinements preserve content. If a field looks empty after a refinement, the field may have been renamed or restructured by the AI. Re-enter the affected field in the Settings tab. If you want the old structure back, describe it again in the chat.

The widget looks empty after I add it. That is expected before the first generation. Select the widget, open the Vibe Code tab, describe what you want, and click Generate.

See also ​