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

# UI

## Options

<ParamField path="name" type="str" default="'Assistant'">
  The name of both the application and the chatbot.
</ParamField>

<ParamField path="description" type="str" optional>
  The content of the `<meta name="description">` of the application.
</ParamField>

<ParamField path="cot" type="Literal['hidden', 'tool_call', 'full']" default="full">
  The chain of thought (COT) is a feature that shows the user the steps the
  chatbot took to reach a conclusion. You can hide the COT, only show the tool
  calls, or show it in full.
</ParamField>

<ParamField path="default_theme" type="Literal['light', 'dark']" default="'dark'">
  Name of the theme used by default
</ParamField>

<ParamField path="layout" type="Literal['default', 'wide']" default="'open'">
  Name of the layout used by default
</ParamField>

<ParamField path="github" type="str" optional>
  Passing this option will display a Github-shaped link. If not passed we will
  display the link to Chainlit repo.
</ParamField>

<ParamField path="custom_css" type="str" optional>
  Custom CSS file that allows you to customize the UI
</ParamField>

<ParamField path="custom_css_attributes" type="str" optional>
  Custom CSS file tag attributes, i.e. `<stylesheet src="public/custom.css" ... ></stylesheet>`
</ParamField>

<ParamField path="custom_js" type="str" optional>
  Custom JavaScript file that allows you to customize the UI
</ParamField>

<ParamField path="custom_js_attributes" type="str" default="defer">
  Custom JavaScript file tag attributes, i.e. `<script src="public/custom.js" ... ></script>`
</ParamField>

<ParamField path="alert_style" type="Literal['classic', 'modern']" default="'classic'">
  Switch between two available alert styles:

  * `'classic'`: Traditional left-border style
  * `'modern'`: Rounded corners with softer borders and transparent background
</ParamField>

<ParamField path="login_page_image" type="str" optional>
  Custom image displayed as the background on the login page
</ParamField>

<ParamField path="login_page_image_filter" type="str" optional>
  Filter applied to the custom background image on the login page
</ParamField>

<ParamField path="login_page_image_dark_filter" type="str" optional>
  Filter applied to the custom background image on the login page when the dark theme is selected
</ParamField>

<ParamField path="custom_meta_url" type="str" optional>
  Content of the `<meta property="og:url">` tag. Used in link previews (e.g. iMessage, Twitter). Defaults to the Chainlit GitHub repository URL if not set.
</ParamField>

<ParamField path="custom_meta_image_url" type="str" optional>
  Content of the `<meta property="og:image">` tag used for site preview
</ParamField>

<ParamField path="logo_file_url" type="str" optional>
  URL of the image used as the application logo on the welcome screen and during login/logout
</ParamField>

<ParamField path="default_avatar_file_url" type="str" optional>
  URL of the image used as the avatar for messages sent by the assistant
</ParamField>

<ParamField path="custom_build" type="str" optional>
  Directory containing custom frontend production build files, if applicable
</ParamField>

<ParamField path="language" type="str" optional>
  Force a specific UI language for all users, overriding the browser's language preference.
  Accepts any locale code present in `.chainlit/translations/` (e.g. `en-US`, `fr-FR`, `he-IL`).
  When unset (default), the language is detected from the user's browser.

  <Note>
    Since version **2.9.3**.
  </Note>
</ParamField>

<ParamField path="header_links" type="List[HeaderLink]" optional>
  Additional links displayed in the header next to (or replacing, if not provided) the GitHub link.
  Each link supports an optional `target` field to control how the link opens: `_blank` (default), `_self`, `_parent`, or `_top`.

  <Note>
    The `target` field is available since version **2.8.3**.
  </Note>
</ParamField>

<ParamField path="confirm_new_chat" type="bool" default={true}>
  Whether to show a confirmation dialog when the user clicks "New Chat".
  Set to `false` to skip the dialog and immediately clear the chat.

  <Note>
    Since version **2.9.6**.
  </Note>
</ParamField>

<ParamField path="chat_settings_location" type="Literal['message_composer', 'sidebar']" default="'message_composer'">
  Where to display chat settings. `"message_composer"` shows them in a modal triggered from the composer.
  `"sidebar"` moves them to a resizable right sidebar with a gear icon toggle in the header.

  <Note>
    Since version **2.9.6**.
  </Note>
</ParamField>

<ParamField path="default_chat_settings_open" type="bool" default={false}>
  Whether the chat settings sidebar is open when the page loads. Only applies when
  `chat_settings_location` is set to `"sidebar"`.

  <Note>
    Since version **2.9.6**.
  </Note>
</ParamField>

## Default configuration

```toml theme={null}
[UI]
# Name of the assistant.
name = "Assistant"

# default_theme = "dark"

# layout = "wide"

# default_sidebar_state = "open"

# Show confirmation dialog when creating a new chat
# confirm_new_chat = true

# Where to display chat settings: "message_composer" (default modal) or "sidebar"
# chat_settings_location = "message_composer"

# Whether the chat settings sidebar is open on page load (sidebar mode only)
# default_chat_settings_open = false

# Description of the assistant. This is used for HTML tags.
# description = ""

# Chain of Thought (CoT) display mode. Can be "hidden", "tool_call" or "full".
cot = "full"

# Force a specific UI language for all users (overrides browser detection).
# Accepts any locale available under .chainlit/translations/
# language = "en-US"

# Specify a CSS file that can be used to customize the user interface.
# The CSS file can be served from the public directory or via an external link.
# custom_css = "/public/test.css"

# Specify additional attributes for a custom CSS file
# custom_css_attributes = "media=\\\"print\\\""

# Specify a JavaScript file that can be used to customize the user interface.
# The JavaScript file can be served from the public directory.
# custom_js = "/public/test.js"

# The style of alert boxes. Can be "classic" or "modern".
alert_style = "classic"

# Specify additional attributes for custom JS file
# custom_js_attributes = "async type = \\\"module\\\""

# Custom login page image, relative to public directory or external URL
# login_page_image = "/public/custom-background.jpg"

# Custom login page image filter (Tailwind internal filters, no dark/light variants)
# login_page_image_filter = "brightness-50 grayscale"
# login_page_image_dark_filter = "contrast-200 blur-sm"


# Specify a custom meta url for link previews (og:url).
# custom_meta_url = "https://example.com"

# Specify a custom meta image url.
# custom_meta_image_url = "https://chainlit-cloud.s3.eu-west-3.amazonaws.com/logo/chainlit_banner.png"

# Load assistant logo directly from URL.
logo_file_url = ""

# Load assistant avatar image directly from URL.
default_avatar_file_url = ""

# Specify a custom build directory for the frontend.
# This can be used to customize the frontend code.
# Be careful: If this is a relative path, it should not start with a slash.
# custom_build = "./public/build"

# Specify optional one or more custom links in the header.
# [[UI.header_links]]
#     name = "Issues"
#     display_name = "Report Issue"
#     icon_url = "https://avatars.githubusercontent.com/u/128686189?s=200&v=4"
#     url = "https://github.com/Chainlit/chainlit/issues"
#     target = "_self"  # Optional: _blank (default), _self, _parent, _top
```