AI Builder Pages Interface
Pages in AI Builder are the containers where blocks come together to create complete user interfaces. They define the structure, layout, and navigation of your application, providing the environments where users interact with your AI solutions.

​
Understanding Pages

Pages are complete views composed of blocks and define:
  • Structure: The organization and hierarchy of content
  • Layout: How blocks are arranged visually
  • Navigation: How users move between different views
  • Interaction Model: How users engage with the interface
  • Access Control: Who can view and interact with the page
Each page has a unique URL within your workspace and can be configured for various use cases.

​
Working with Pages

1

Creating Pages

Start a new page through the AI Builder interface:To create a page:
  1. Navigate to the “Pages” folder in your workspace
  2. Click the ”+” button to add a new page
  3. Choose a page type (standard, _doc, etc.)
  4. Enter a unique slug for the page URL
  5. Provide a name and description
The page slug becomes part of the URL: https://[workspace-slug].pages.prisme.ai/[language]/[page-slug]
2

Page Properties

Configure the basic properties of your page:Key properties include:
  • Slug: Unique identifier in the URL (technical name)
  • Name: Human-readable title displayed to users
  • Description: Short explanation of the page’s purpose
  • Access Control: Public, private, or specific user access
  • Language: Default language for localization
  • SEO Settings: Title, description, and metadata for search engines
3

Adding Blocks

Populate your page with blocks to create the user interface:The process involves:
  1. Select from available blocks in the sidebar
  2. Drag blocks onto the page canvas
  3. Arrange blocks in the desired layout
  4. Configure block properties for this specific instance
  5. Create event connections between blocks
Blocks can be nested, grouped, and arranged to create complex layouts.
4

Page Styling

Customize the visual appearance of your page:Styling options include:
  • CSS Editor: Write custom CSS for precise control
  • Style Presets: Apply predefined style combinations
  • Dark/Light Mode: Support different color schemes
  • Typography Settings: Control text appearance
Proper styling creates a professional, branded appearance.
5

Event Configuration

Set up communication between blocks on the page:Event configuration includes:
  • Creating event flows between blocks
  • Setting up page-level events
  • Connecting blocks to backend automations
  • Handling user interactions
  • Managing data flow through the interface
The event system creates interactive, dynamic experiences.
6

Testing & Preview

Validate your page before publishing:Testing options include:
  • Live Preview: See changes in real-time
  • Device Preview: Test on different screen sizes
  • Event Monitoring: Verify event flows work correctly
  • User Testing: Observe real users interacting with the page
  • Accessibility Checking: Ensure the page works for all users
Thorough testing ensures a quality user experience.

​
Page Features and Capabilities

​
Page Integration with Automations

Pages connect with backend processes through the event system:
1

Event Triggers

Page components can trigger automations.Common triggers include:
  • Button clicks
  • Form submissions
  • Data selection
  • Page loading
2

Data Passing

Information flows between pages and automations.Data passing methods:
  • Event payloads with structured data
  • State variables and context
  • URL parameters and query strings
  • Session and user storage
3

Response Handling

Pages react to automation resultsResponse handling patterns:
  • Update UI components with returned data
  • Display success/error messages
  • Navigate to new views based on results
4

Asynchronous Processing

Handle long-running operations gracefully. Asynchronous patterns:
  • Loading states during processing
  • Progress indicators for lengthy operations
  • Background processing with notifications

​
Page Best Practices

Responsive Design

Ensure pages work on all devices:

  • Test on multiple screen sizes
  • Use flexible layouts
  • Prioritize content for mobile
  • Consider touch vs. mouse interactions

Performance Focus

Optimize for speed and responsiveness:

  • Minimize the number of blocks
  • Use lazy loading where appropriate
  • Optimize images and media
  • Monitor and improve loading times

Accessibility

Create inclusive experiences for all users:

  • Use semantic HTML structure
  • Ensure keyboard navigation
  • Maintain sufficient color contrast
  • Add appropriate ARIA attributes

Error Handling

Design for when things go wrong:

  • Provide clear error messages
  • Offer recovery paths
  • Preserve user input during errors
  • Test error scenarios thoroughly

​
Next Steps

Blocks

Learn more about the components that make up pages

Automations

Explore backend processes that power page functionality

Testing & Debugging

Learn how to validate and troubleshoot pages

Use Cases

See examples of pages in real-world applications