--- url: https://lettuceai.app/docs/chat-widgets title: "Chat Widgets — LettuceAI" description: "Build a custom side panel next to your conversation from composable widgets like character info, stat trackers, a scratch pad, dice, and more." --- Menu # Chat Widgets Chat Widgets let you build a custom panel beside your conversation. You fill the empty space next to the messages with small blocks you choose and arrange yourself, so the details you care about stay visible while you chat. What most users need to know Widgets are optional and live in a side panel on wider screens. Turn on the widget area, tap Edit, add the blocks you want, and arrange them. Your layout is saved for that character. ## What the widget area is The widget area is a panel that sits to the left or right of the conversation column. It is built from individual widgets, each of which shows one thing or does one job. You decide which widgets appear, what order they are in, and how they look. The widget area appears in the empty space around the message column, so it needs room to fit. It shows up on desktop and other wide screens. On a narrow phone screen there is no spare width for it, so it stays hidden and the conversation uses the full screen. ## The widget types You can mix and match any of these blocks. Most can be given a title and a short description. ### Content widgets - **Character info**: the avatar, name, and description of the current character. In a group chat you can point it at a specific member. - **Persona info**: the avatar, name, and description of the persona you are using. - **Scratch pad**: free Markdown notes that stay with the chat, handy for tracking plot points or reminders. - **Image**: a picture pulled from the character avatar, the persona avatar, your image library, or an upload. - **Stat tracker**: editable numbers such as affection, HP, or gold, each with an optional minimum and maximum. - **Memory**: a quick look at what this chat currently remembers, with a limit on how many entries to show. - **Companion state**: relationship and mood details for companion characters. - **Session info**: at-a-glance stats like message count, tokens, and the current scene. - **Author note**: edit this chat's author note right from the panel. The note is saved to the chat. - **Time**: shows the time the companion sees, and lets you set it. ### Interactive widgets - **Quick snippets**: buttons that drop preset text into the message box, useful for phrases or actions you reuse a lot. - **Dice**: a dice roller using custom notation such as`1d20` or `2d6+3`. - **Selector**: a quick picker for your persona, your model, or the author note. - **Button**: triggers a chat action such as regenerate the last reply, continue, swap places, start a new session, open memories, open search, and more. ### Layout pieces - **Box**: groups other widgets together under an optional title, with a color variant (default, subtle, info, warning, success, or danger). - **Divider**: a line or a blank space to separate widgets. ## Editing your panel The widget area has an in-place edit mode. You arrange everything right where it appears, without leaving the chat. - **Enter edit mode**: use the Edit button in the widget area, or the edit-widgets action in the chat header. A sticky toolbar appears at the top of the panel with Add, Revert, and Done. - **Add a widget**: tap Add to open the widget picker and choose a type. The new widget drops into the panel. - **Reorder**: drag widgets up and down to change their order. - **Configure**: open a widget to edit its title, description, and type-specific settings (for example the stats on a stat tracker or the notation on a dice roller). - **Design variants**: each widget can use one of four looks: default, minimal, solid, or outline. - **Image library picker**: image widgets can pull a picture from your image library, the character or persona avatar, or a file you upload. - **Move between columns**: when both a left and a right panel are showing, you can move a widget from one side to the other. Tap **Done** to save your changes, or **Revert** to discard them and go back to how the panel was. Layouts are saved per character Each character keeps its own widget layout. Setting up a panel for one character does not change anyone else's. Group chats share the same widget settings as the rest of the chat appearance. ## Desktop layout controls Because the widget area depends on having room next to the messages, there are layout controls in chat appearance (on desktop) that decide how that space is used. - **Chat column width**: how wide the message column is. Choose a preset (narrow, normal, wide, or extra wide), a custom pixel width, or full. The space left over is where widgets can go. - **Alignment**: place the message column on the left, in the center, or on the right. This decides which side has spare room for a panel. - **Widget area**: the toggle that turns the panel on. It is available whenever the column is not set to full width. - **Center widget mode**: when the column is centered, you can fill both sides, only the left, or only the right. - **Move header and input**: you can keep the chat header and the message input aligned with the message column instead of stretching across the whole window, so the widget panels sit beside the conversation rather than under a full-width shell. - **Resizable widget area**: with a custom column width, a draggable divider appears between the panel and the conversation so you can fine-tune the split by dragging. Needs room to appear The widget area only shows when the window is wide enough to fit both the message column and a panel. If you set the column to full width, or the window is too narrow, the panel will not appear. ## Tips - Start small. A character info card and a stat tracker already make a useful panel. - Use a box to group related widgets and a divider to give them breathing room. - Keep a consistent design variant across widgets for a tidy look. [ PreviousGroup Chats ](/docs/group-chats)[ NextChat Branching ](/docs/branching)