Human Interfaces
Web UI (User Interface)
Build and customize web interfaces for your AI agents
Web UI Overview
The xpander.ai Web UI, powered by ChainLit, allows you to deploy your AI agents with beautiful, customizable web interfaces. This feature makes it easy to create production-ready user interfaces without extensive frontend development.The Web UI is fully managed by xpander.ai, handling all the complexities of user authentication, thread management, and state persistence across sessions.
Key Features
The Web UI provides a rich set of capabilities that make your AI agents accessible through professional interfaces: Instant UI Generation: Create a professional web interface for your agents in minutes without writing frontend code. Thread Management: Create and manage multiple conversation threads for organized discussions and parallel conversations. Conversation Starters: Define presets to guide users on how to interact with your agent and showcase its capabilities. Built-in Authentication: Secure your agent interfaces with xpander.ai’s comprehensive authentication system.
Web UI Example
Getting Started
1
Create your agent
First, create and configure your agent through the xpander.ai platform. Your agent should have all the necessary tools and capabilities defined before setting up the Web UI.
2
Configure Web UI
In the agent configuration panel, navigate to the “Human Interfaces” tab and select “Web UI”.Here you can configure:
- Title and description
- Conversation starters
- Appearance settings
- Authentication options
Web UI Configuration
3
Save and deploy
Once you’ve configured your Web UI settings, save your changes and deploy your agent using the “Deploy” button in the main interface.This will generate a URL where your agent’s web interface is accessible. You can share this URL with intended users or embed it in existing applications.
Access to these web interface links is restricted to users within your organization only.
Authentication Options
The xpander.ai Web UI supports multiple authentication methods to secure your agent interfaces:Platform Authentication
Platform Authentication
Leverage xpander.ai’s built-in user management system for seamless authentication. This option provides:
- User registration and login flows
- Password management and recovery
- Session management across devices
- User profile and preference storage
SSO Integration
SSO Integration
Connect with enterprise identity providers to leverage your existing authentication infrastructure:
- Support for SAML and OAuth 2.0 protocols
- Integrations with popular providers like Okta, Auth0, and Azure AD
- Role mapping from your identity provider to xpander.ai permissions
- Automatic user provisioning based on SSO attributes
Custom Auth Rules (Coming Soon)
Custom Auth Rules (Coming Soon)
Define granular access controls based on user attributes:
- Create rule-based access policies
- Control access based on user roles, groups, or custom attributes
- Implement time-based restrictions (working hours, temporary access)
- Geographical access limitations
Customization Options
UI Configuration
The Web UI can be customized through the configuration panel to match your brand and preferences:Basic Settings
Basic Settings
Configure the fundamental aspects of your web interface:Title: The name displayed in the UI header, browser tab, and search results.Description: A brief explanation of your agent’s purpose that helps users understand its capabilities.Conversation Starters: Suggested prompts that appear when users first access your agent, guiding them to productive interactions.
Embedding in Existing Applications
You can embed your agent’s Web UI in existing applications using a standard iframe:When embedding the Web UI, authentication settings still apply. Users will need to authenticate according to your configured settings before interacting with the embedded interface.
Custom UI Implementation
For teams that need complete control over the user interface, xpander.ai provides access to the underlying thread and state management systems:Thread Management API
Thread Management API
Access conversation threads programmatically to build custom interfaces with these capabilities:Thread Creation: Initiate new conversation threads with specific contexts or parameters.Message History: Retrieve complete or filtered message history for display in custom UIs.Context Tracking: Access and modify conversation context to maintain coherent interactions.Custom Rendering: Implement specialized rendering logic for domain-specific message types.The Thread Management API enables you to maintain the benefits of xpander.ai’s conversation handling while implementing completely custom interfaces.
State Management Integration
State Management Integration
Leverage xpander.ai’s robust state management system in your custom UIs:State Access: Query and modify agent state programmatically through secure APIs.Cross-Client Synchronization: Keep state consistent across multiple clients and devices.Session Persistence: Maintain state between user sessions for continuous experiences.Multi-Step Interactions: Build complex, stateful interactions with clear progression.This integration provides the foundation for creating sophisticated applications that maintain context across user interactions.