​
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:

Authentication settings can be configured in the “Security” section of the Web UI configuration panel.

​
Customization Options

​
UI Configuration

The Web UI can be customized through the configuration panel to match your brand and preferences:

​
Embedding in Existing Applications

You can embed your agent’s Web UI in existing applications using a standard iframe:

<iframe 
  src="https://your-agent-url.xpander.ai" 
  width="100%" 
  height="600px"
  frameborder="0">
</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:

These APIs enable development teams to create completely custom interfaces while leveraging xpander.ai’s production-grade backend infrastructure.