Agent Editor

Easily drop a customized agent into any site.

Theme Colors

Primary

Main text color, buttons, and icons

Accent

User message bubbles and send button

Call to Action

Launcher call to action icon color

Call to Action Background Color

Launcher call to action background color

Surface

Panel, input area, and assistant message bubble backgrounds

Container

Message container background

Border

Panel outer border

Divider

Header and footer dividers

Message Border

Message bubble borders

Input Background

Message input area background

Muted

Secondary text, subtitles, and timestamps

Send Button Background

Send button background color

Send Button Text/Icon

Send button text and icon color

Send Button Border

Send button border color

Close Button Color

Close button icon color

Close Button Background

Close button background color

Close Button Border

Close button border color

Clear Chat Icon

Clear chat button icon color

Clear Chat Background

Clear chat button background color

Clear Chat Border

Clear chat button border color

Mic Icon

Microphone icon color

Mic Background

Microphone button background color

Mic Border

Microphone button border color

Recording Icon

Icon color when actively recording

Recording Background

Background color when actively recording

Recording Border

Border color when actively recording

Panel Styling

Panel Border

Border style for the chat panel (e.g., "1px solid #e5e7eb" or "none")

Panel Shadow

Box shadow for the chat panel

Panel Border Radius

Border radius for the chat panel

Typography

Input Font Family

Font family for the message input field

Input Font Weight

Font weight for the message input field (100-900)

Border Radius

Small

Text inputs and header icon

Medium

Forms and tool debugging info

Large

Main widget panel, message bubbles, and input area

Launcher

Launcher button

Button

Send button and suggestion chips

Launch Button

Enable Launcher

Title

Subtitle

Hide Launcher Text

Agent Icon Text

Fallback text/emoji if Lucide icon name is not provided

Agent Icon Lucide Icon Name

Leave empty to use icon text or image. See Lucide Icons for available icons.

Hide Agent Icon

Position

Width (CSS)

Auto Expand on Load

Full Height Mode

Widget fills the full height of its container

Sidebar Mode

Position panel as a sidebar flush with screen edges

Sidebar Width (CSS)

Width of the sidebar panel when sidebar mode is enabled

Call to Action Text

Fallback text/emoji if Lucide icon name is not provided

Call to Action Lucide Icon Name

Leave empty to use icon text. See Lucide Icons for available icons.

Hide Call to Action

Agent Icon Size (CSS)

Call to Action Size (CSS)

Call to Action Padding (CSS)

Border

Border style for the launcher button

Shadow

Box shadow for the launcher button

Panel

Welcome Title

Welcome Subtitle

Input Placeholder

Send Button Label

Send Button Border Width (CSS)

Send Button Padding X (CSS)

Send Button Padding Y (CSS)

Use Icon Instead of Text

Send Button Icon Text

Fallback text/emoji if Lucide icon name is not provided

Send Button Lucide Icon Name

Leave empty to use icon text. See Lucide Icons for available icons.

Send Button Size (CSS)

Show Tooltip

Tooltip Text

Header Icon Size (CSS)

Header Icon Lucide Icon Name

Leave empty to use icon text or image. See Lucide Icons for available icons.

Hide Header Icon

Clear Chat Button

Enable Clear Chat Button

Clear Chat Button Placement

Clear Chat Icon Name (Lucide)

See Lucide Icons for available icons.

Clear Chat Border Width (CSS)

Clear Chat Border Radius (CSS)

Clear Chat Button Size (CSS)

Show Tooltip

Clear Chat Tooltip Text

Clear Chat Padding X (CSS)

Clear Chat Padding Y (CSS)

Close Button

Close Button Size (CSS)

Close Button Placement

Close Button Border Width (CSS)

Close Button Border Radius (CSS)

Close Button Icon Name (Lucide)

See Lucide Icons for available icons.

Close Button Icon Text (Fallback)

Fallback text/emoji if Lucide icon name is not provided or fails to render.

Close Button Tooltip Text

Show Close Button Tooltip

Close Button Padding X (CSS)

Close Button Padding Y (CSS)

Status Indicator

Show Status Indicator

Idle Text

Connecting Text

Connected Text

Error Text

Features

Show Reasoning Bubbles

Display the AI's reasoning process in separate message bubbles

Show Tool Call Bubbles

Display tool/function calls made by the AI in separate message bubbles

Debug Mode

Log debug information to the browser console

Enable Voice Recognition

Show microphone icon for browser native voice recognition

Pause Duration (ms)

How long to wait after speech stops before auto-submitting (default: 2000ms)

Mic Icon Lucide Icon Name

Leave empty to use default "mic". See Lucide Icons for available icons.

Mic Icon Size (CSS)

Size of the microphone icon button (default: matches send button size)

Mic Button Border Width (CSS)

Mic Button Padding X (CSS)

Mic Button Padding Y (CSS)

Show Mic Button Tooltip

Show tooltip on hover for the microphone button

Mic Button Tooltip Text

Text to display in the tooltip when hovering over the mic button

Test Messages

Inject test tool call and reasoning messages to preview styling

Tool Call Styles

Bubble Background Color

Bubble Border Color

Bubble Border Width (CSS)

Bubble Border Radius (CSS)

Header Background Color

Header Text Color

Header Padding X (CSS)

Header Padding Y (CSS)

Content Background Color

Content Text Color

Content Padding X (CSS)

Content Padding Y (CSS)

Code Block Background Color

Code Block Border Color

Code Block Text Color

Toggle Text Color

Label Text Color

Message Actions

Configure copy, upvote, and downvote buttons that appear on assistant messages.

Enable Message Actions

Show action buttons on assistant messages

Show Copy Button

Show Upvote Button

Requires backend support for feedback

Show Downvote Button

Requires backend support for feedback

Visibility

When to show the action buttons

Alignment

Layout Style

How the action buttons are displayed

Attachments

Allow users to attach files to their messages.

Enable File Attachments

Show attachment button in the composer

Allowed File Types

Images (PNG, JPEG, GIF, WebP) PDF Documents Text Files (TXT, Markdown, CSV, JSON) Office Documents (DOC, DOCX, XLS, XLSX)

Select which file types users can upload

Maximum Files

Maximum number of files per message

Maximum File Size

Maximum size per file

Supported formats: PNG, JPEG, GIF, WebP

Markdown Options

Configure how markdown is parsed and rendered in chat messages.

GitHub Flavored Markdown (GFM)

Enable tables, strikethrough, and autolinks

Line Breaks

Convert \n in paragraphs into <br>

Header IDs

Add id attributes to headings

Header ID Prefix

Prefix for heading id attributes (requires Header IDs enabled)

Pedantic Mode

Conform to original markdown.pl behavior

Mangle Emails

Obfuscate email addresses for spam protection

Silent Mode

Don't throw on parse errors

Disable Default Styles

Don't apply default CSS to markdown elements (use your own styles)

Layout Configuration

Configure header and message layout options.

Header

Header Layout

Overall header layout style

Show Header Icon

Show Title

Show Subtitle

Show Close Button

Show Clear Chat Button

Messages

Message Layout

Overall message display style

Group Consecutive Messages

Group messages from the same sender

Avatars

Show Avatars

Avatar Position

User Avatar

URL or emoji for user avatar

Assistant Avatar

URL or emoji for assistant avatar

Timestamps

Show Timestamps

Timestamp Position

Form Styling

Customize the appearance of dynamic forms rendered by the DynamicForm component.

Container

Margin

Border Radius

Border Width

Border Color

Padding

Max Width

Box Shadow

Typography

Title Font Size

Title Font Weight

Description Font Size

Label Font Size

Label Font Weight

Inputs

Input Font Size

Input Padding

Input Border Radius

Submit Button

Button Padding

Button Border Radius

Button Font Size

Button Font Weight

Initial Suggestion Chips

Font Family

Font family for suggestion chips

Font Weight

Font weight for suggestion chips (100-900)

Padding X (CSS)

Padding Y (CSS)

Other Options

Test Flow

Select a flow to test different widget capabilities. Dynamic Forms renders AI-generated forms, Custom Components renders registered components.

API URL

Flow ID (optional)

Stream Parser

Live Preview

Interact with the preview below to test your configuration. Changes update in real-time.