Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt

Use this file to discover all available pages before exploring further.

The Chatbot component displays conversational messages with support for text, images, audio, video, and interactive elements.

​
Basic usage

import gradio as gr

def respond(message, history):
    return f"You said: {message}"

gr.ChatInterface(fn=respond).launch()

​
Constructor

​
value
list[MessageDict | Message] | Callable | None
default:"None"
Default messages in format [{"role": "user", "content": "Hello"}, ...]
​
height
int | str | None
default:"400"
Component height in pixels or CSS units
​
layout
Literal['panel', 'bubble'] | None
default:"None"
  • "panel" - LLM-style layout
  • "bubble" - Message bubbles
Defaults to “bubble”
​
latex_delimiters
list[dict] | None
default:"None"
Delimiters for LaTeX rendering. Defaults to $$ for display math
​
render_markdown
bool
default:"True"
Whether to render markdown in messages
​
line_breaks
bool
default:"True"
Whether to enable GitHub-flavored line breaks
​
autoscroll
bool
default:"True"
Whether to auto-scroll to bottom on new messages
​
avatar_images
tuple[str | Path | None, str | Path | None] | None
default:"None"
Tuple of (user_avatar, bot_avatar) image paths or URLs
​
feedback_options
list[str] | tuple[str, ...] | None
default:"('Like', 'Dislike')"
Feedback options to display. “Like”/“Dislike” show as thumb icons
​
placeholder
str | None
default:"None"
Placeholder message when chatbot is empty. Supports Markdown/HTML
​
editable
Literal['user', 'all'] | None
default:"None"
  • "user" - Allow editing user messages
  • "all" - Allow editing all messages

​
Events

  • change - Triggered when messages change
  • select - Triggered when message is selected
  • like - Triggered when message is liked/disliked
  • retry - Triggered when retry is clicked
  • undo - Triggered when undo is clicked
  • clear - Triggered when cleared
  • copy - Triggered when message is copied

​
Examples

​
With multimodal messages

import gradio as gr

def chat(message, history):
    return {
        "role": "assistant",
        "content": ["Here's an image:", gr.Image("cat.jpg")]
    }

gr.ChatInterface(fn=chat).launch()

​
With custom avatars

import gradio as gr

chatbot = gr.Chatbot(
    avatar_images=(
        "user_avatar.png",
        "bot_avatar.png"
    )
)

​
With thoughts/reasoning

import gradio as gr

messages = [
    {
        "role": "assistant",
        "content": "Let me think about this...",
        "metadata": {"title": "Reasoning", "status": "done"}
    },
    {
        "role": "assistant",
        "content": "Here's my answer!"
    }
]

chatbot = gr.Chatbot(value=messages)

Build docs developers (and LLMs) love

Get started for freeTalk to us