Skip to content
PDF

The Smart Pages Object

Editing a Smart Page: The Smart Pages Editor IDE

The Smart Pages Editor is the privileged IDE for Smart Pages. On the first load of an empty Smart Page, the Editor will initialize it with a default template structure. The page will then be available for further editing.

Layout

The IDE is composed of a set of areas and controls, with different purposes.

  • The Main Working Area shows a preview of the current Smart Page, with the available content elements

  • The Widget Library (on the left) features a set of predefined widgets and components, which can be easily dragged and dropped in the working area

  • The Configurator panel (on the right) is linked to the element currently selected in the main working area

Smart Pages Editor Layout

AI-Based Smart Page Builder

The AI-Based Smart Page Builder is an experimental feature that enables designers to create Smart Pages using natural language prompts. Instead of manually writing code or dragging and dropping widgets, you can simply describe the page requirements, and C.A.R.L. (the AI assistant) will automatically generate the page for you.

AI-Based Smart Page Builder

How It Works

The AI-Based Smart Page Builder uses an agentic workflow architecture that processes your requests through a sophisticated multi-agent system:

  1. Coordinator Agent: When you submit a request, a coordinator agent first analyzes it and creates an execution plan. This plan determines what needs to be done to satisfy your requirements, including:
  2. Identifying which data sources need to be created or configured
  3. Determining which widgets and components are most appropriate

  4. Organizing the page layout and structure

  5. Component Agents: Once the plan is determined, specialized component agents work in parallel to configure each element according to the coordinator's plan. Each component agent is dedicated to a specific component type and handles its configuration independently.

User Confirmation Required

Every change made by the AI requires your explicit confirmation before being applied to the Smart Page. This ensures you maintain full control over the page design and can review all AI-generated modifications before they are implemented.

Key Features

  • Natural Language Page Creation: Simply describe what you want in the page, and the AI will create it automatically
  • UI Guidelines Support: You can provide UI guidelines to guide the AI's design decisions, ensuring the generated pages match your design standards
  • Agent Configuration: Fine-tune the AI's behavior through a dedicated configuration panel that allows you to adjust various agent parameters

Single Component Configuration

In addition to creating entire pages, you can also use the AI feature to configure individual components. When you select a specific component and interact with C.A.R.L., the AI will focus solely on that component's configuration without modifying the rest of the page. This allows you to:

  • Refine individual component settings using natural language
  • Get AI assistance for specific component properties
  • Make targeted improvements without affecting other page elements

Context Support

The AI-Based Smart Page Builder supports adding files and images to the context, enabling the AI to:

  • Understand visual requirements from reference images
  • Process documentation or specifications provided as files
  • Generate pages that match design mockups or examples

This context-aware capability allows for more accurate page generation based on visual and textual references.

C.A.R.L. Required

The AI-Based Smart Page Builder is an experimental feature that requires C.A.R.L. integration to be enabled and properly configured on your system. Without C.A.R.L., this feature will not be available.

Next Steps