Pages
Create dynamic user interfaces by assembling blocks into complete pages in AI Builder
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.
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.
AI Builder supports several page types for different purposes:
- Standard Pages: General-purpose interfaces
- _doc Pages: Documentation pages with special formatting
- index Pages: Home/landing pages for workspaces
- 401/404 Pages: Custom error and authentication pages
- Template Pages: Reusable page structures
Different page types have specific behaviors and optimizations.
Pages in AI Builder are built on modern web technologies:
- Next.js: For server-side rendering and optimal performance
- React: For component-based UI development
- Event System: For communication between components
- Responsive Design: For cross-device compatibility
This architecture ensures fast loading, SEO-friendly content, and interactive experiences.
Working with Pages
Creating Pages
Start a new page through the AI Builder interface:
To create a page:
- Navigate to the “Pages” folder in your workspace
- Click the ”+” button to add a new page
- Choose a page type (standard, _doc, etc.)
- Enter a unique slug for the page URL
- Provide a name and description
The page slug becomes part of the URL: https://[workspace-slug].pages.prisme.ai/[language]/[page-slug]
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
Adding Blocks
Populate your page with blocks to create the user interface:
The process involves:
- Select from available blocks in the sidebar
- Drag blocks onto the page canvas
- Arrange blocks in the desired layout
- Configure block properties for this specific instance
- Create event connections between blocks
Blocks can be nested, grouped, and arranged to create complex layouts.
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.
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.
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:
Event Triggers
Page components can trigger automations.
Common triggers include:
- Button clicks
- Form submissions
- Data selection
- Page loading
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
Response Handling
Pages react to automation results
Response handling patterns:
- Update UI components with returned data
- Display success/error messages
- Navigate to new views based on results
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