Topics

Magic Box

Magic Box turns a written description into a self-contained widget on your page. Use it for a calculator, a quiz, a small game, a chart or a visual effect.

The generated widget runs inside the box on the canvas and on the published page. Its individual controls are part of the widget; they are not separate Sitely text boxes or buttons.

Describe, generate, refine

Add Magic Box from the element menu, choose a provider in the Style inspector and enter a prompt. Generate creates a new interpretation of that description. After generation, use the generated Settings to refine the result, or Edit Prompt to return to the description.

1 · Describe

Task, controls and style

2 · Generate

Provider creates the widget

3 · Refine

Adjust exposed Settings

A typical workflow: describe the result, generate the widget, then refine the settings it exposes.

Choose a provider and generate

The Provider menu offers OpenAI, Claude, Gemini and Grok (xAI). Enter your own provider API key in Sitely’s secure field. The key is stored locally on the Mac in the system Keychain; it is not part of the published widget. Sitely shows the model used for generation in the inspector.

Write the prompt, then choose Generate. You can stop a generation that is still running. Wait for the widget to appear, then try its controls in Preview before adding it to the final page.

Write a useful prompt

Describe the task, the controls, the initial values and the expected result. Include the visual treatment, how it should adapt to the box width and which options you want to adjust later in the inspector. Ask for labels and keyboard operation when the widget is interactive.

Example prompt:

Create a compact distance converter with a labeled kilometers input and a miles result. Start at 10 km and use 1 mile = 1.609344 km. Update the result when the input changes. Use a light background and blue accent, fit the available width, support keyboard input, and expose the accent color and initial distance in Settings. Keep all resources self-contained.

This is an example description to enter in Magic Box. The exact appearance and available settings depend on the generated result.

Refine the generated Settings

When the result exposes adjustable options, Magic Box presents them as native inspector controls: color wells, numbers, text fields, checkboxes or menus. Change these to update the widget without generating it again. If no options were generated, the inspector says so.

Use Edit Prompt when the widget’s structure or behavior needs to change, then Generate again. Regeneration produces a new result from the prompt; do not expect it to preserve every detail of the previous version.

Choose when an animation plays

If the generated result includes animation, the inspector adds When to Play. Always runs it automatically; On Hover waits for the pointer over the widget or its group; On Click starts or toggles it with a click. In an on-demand popup, the automatic option is When Popup Opens and playback follows the popup’s open state.

The canvas plays the animation while you edit. Use Preview to check the selected trigger. Keep the widget understandable when motion is reduced and make essential actions available without hovering.

Size and test the widget

Magic Box isolates the widget’s styling from the surrounding page. The widget fills its box; how well its contents adapt depends on what was generated. Resize it in each layout and check for clipped labels, scrollbars or controls that become too small.

Try realistic inputs, empty values and keyboard navigation. Check that results and labels are clear and that a visual effect does not obscure nearby content. Purely decorative widgets can let pointer clicks pass through, while interactive ones need reachable controls.

Publish the generated result

The AI provider is contacted when you request generation in the editor. The saved widget runs without another AI generation request when a visitor opens the page. Ask for self-contained resources in the prompt and check any external resources or services used by the result before publishing.

See Devices and Assisted Layout for layout review, Accessibility for usable controls, and Popups when the widget belongs in an on-demand panel.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sitely 8