> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mindset.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Agent flexible UI

> Enabling the flexible UI mode for an embedded agent

With **Flexible UI** mode, agents are no longer limited to a fixed chat window. Your agent can collapse into a button, minimized to its original state, and expand into full screen.

Please see the [Embed agent with flexible UI demo](/sdk-api/sdk/agent-demo-flexibleui)

Here's a guide that describes how to enable the flexible UI mode for an embedded agent, along with the various possible parameters.

## Embedded agent default UI

By default, an embedded agent is displayed in an HTML container of your choice.

Please see the [Embed agent demo](/sdk-api/sdk/agent-demo)

## Enable the flexible UI mode

<Frame caption="Embed agent in flexible UI mode">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui.gif?s=9d6d6f2e4b12c81f7455767c673ba059" alt="" width="1000" height="641" data-path="images/agent-flexible-ui.gif" />
</Frame>

### How to enable the flexible UI mode ?

To enable flexible UI, the `<mindset-agent>` tag needs to be wrapped in `<mindset-container>`

```javascript theme={null}
<mindset-container>  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

### Configurable attributes for the `<mindset-container>` tag

#### 1. agent-title

**agent-title** is the itle that will be visible as the button title, or header title.
if a string is not passed, default will be `Mindset Chat`.

```javascript theme={null}
<mindset-container agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="background-color: rgb(255, 255, 255); display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-title='My agent title'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-agentitle.png?fit=max&auto=format&n=ygyU2AV1-CPSv7K8&q=85&s=57a844615ddba0d18518f68677a7e821" alt="" width="704" height="494" data-path="images/agent-flexible-ui-agentitle.png" />
</Frame>

#### 2. agent-icon

**agent-icon** is the icon visible on the button or header with title. If the icon’s URL is not passed, the agent will not display any icon

```javascript theme={null}
<mindset-container agent-icon="https://mindset-int.web.app/mindset-icon.png" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-icon='https://mindset-int.web.app/mindset-icon.png'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-agenicon.png?fit=max&auto=format&n=ygyU2AV1-CPSv7K8&q=85&s=0b89ca3708b43c0cc13d09411286217b" alt="" width="704" height="494" data-path="images/agent-flexible-ui-agenicon.png" />
</Frame>

#### 3. agent-view-mode

This dictates the availability of agent view modes. **agent-view-mode** can be one of the following values:

<Icon icon="circle" iconType="solid" /> **chat-only**

This mode will display the agent in a chat-only view, without any full-screen mode.

```javascript theme={null}
<mindset-container agent-view-mode="chat-only" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-view-mode='chat-only'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-viewmode-chat-only.gif?s=a3273c8127bf34498c24d5705818597b" alt="" width="999" height="668" data-path="images/agent-flexible-ui-viewmode-chat-only.gif" />
</Frame>

<Icon icon="circle" iconType="solid" /> **tray-only**

This mode displays the agent in full-screen view, without any chat mode.

```javascript theme={null}
<mindset-container agent-view-mode="tray-only" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-view-mode='tray-only'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-viewmode-tray-only.gif?s=668667865c36e0fc589b8f3fe0ef8b3b" alt="" width="1000" height="636" data-path="images/agent-flexible-ui-viewmode-tray-only.gif" />
</Frame>

<Icon icon="circle" iconType="solid" /> **no-tray**

This mode disables the tray's full-screen view, hence when minimizing the agent in full-screen mode , it returns to the 'button' state.

```javascript theme={null}
<mindset-container agent-view-mode="no-tray" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-view-mode='no-tray'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-viewmode-no-tray.gif?s=2261489fd30150b2b141dac589beba9e" alt="" width="1000" height="637" data-path="images/agent-flexible-ui-viewmode-no-tray.gif" />
</Frame>

<Icon icon="circle" iconType="solid" /> **all**

That is the default mode, which will display the agent in both chat and tray modes, allowing users to switch between them.

```javascript theme={null}
<mindset-container agent-view-mode="all" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-view-mode='all'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui.gif?s=9d6d6f2e4b12c81f7455767c673ba059" alt="" width="1000" height="641" data-path="images/agent-flexible-ui.gif" />
</Frame>

#### 4. agent-header-color-override

This parameter can accept text color or hex code. can be used to force override the background color of button, tray and header. This parameter takes priority over theme color.

```javascript theme={null}
<mindset-container agent-header-color-override="blue" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-header-color-override='blue'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-agent-header-color-override.gif?s=798cb0f916e71f5ed74609c9ff4d7aca" alt="" width="1000" height="717" data-path="images/agent-flexible-ui-agent-header-color-override.gif" />
</Frame>

#### 5. agent-text-color-override

This parameter can accept text color or hex code. can be used to force override the text color of button, tray and header. This parameter takes priority over theme color.

```javascript theme={null}
<mindset-container agent-text-color-override="yellow" agent-title="My agent title">  
    <mindset-agent 
        agentUid="AGENT-UID"
        style="display: block;">
    </mindset-agent>
</mindset-container>  
```

<Frame caption="agent-text-color-override='yellow'">
  <img src="https://mintcdn.com/mindsetai/ygyU2AV1-CPSv7K8/images/agent-flexible-ui-agent-text-color-override.png?fit=max&auto=format&n=ygyU2AV1-CPSv7K8&q=85&s=7e7daa76bedc67e49f538b733e0bdc43" alt="" width="1436" height="847" data-path="images/agent-flexible-ui-agent-text-color-override.png" />
</Frame>