UI - Chainlit

Options

str

default:"'Assistant'"

The name of both the application and the chatbot.

str

The content of the <meta name="description"> of the application.

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.

Literal['light', 'dark']

default:"'dark'"

Name of the theme used by default

Literal['default', 'wide']

default:"'open'"

Name of the layout used by default

str

Passing this option will display a Github-shaped link. If not passed we will display the link to Chainlit repo.

str

Custom CSS file that allows you to customize the UI

str

Custom CSS file tag attributes, i.e. <stylesheet src="public/custom.css" ... ></stylesheet>

str

Custom JavaScript file that allows you to customize the UI

str

default:"defer"

Custom JavaScript file tag attributes, i.e. <script src="public/custom.js" ... ></script>

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

Custom image displayed as the background on the login page

Filter applied to the custom background image on the login page

Filter applied to the custom background image on the login page when the dark theme is selected

str

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.

str

Content of the <meta property="og:image"> tag used for site preview

str

URL of the image used as the application logo on the welcome screen and during login/logout

str

URL of the image used as the avatar for messages sent by the assistant

str

Directory containing custom frontend production build files, if applicable

str

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.

Since version 2.9.3.

List[HeaderLink]

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.

The target field is available since version 2.8.3.

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.

Since version 2.9.6.

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.

Since version 2.9.6.

bool

default:false

Whether the chat settings sidebar is open when the page loads. Only applies when chat_settings_location is set to "sidebar".

Since version 2.9.6.

Default configuration

[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

Get Started

Deploy

Basic Concepts

Advanced Features

Data Persistence

Authentication

Customisation

Backend

Guides

Migration Guides

UI

Options

Default configuration

​Options

​Default configuration

Options

Default configuration