Chat components.

Build the conversation: prompt inputs, messages, reasoning, citations and thread navigation. Explore the live previews and choose a layout for your app.

33 components

Composer

9
Prompt input6 variants

The box people type into. Grows with the text, sends on Enter, and turns into a stop button while a reply streams.

A composer where typing / opens a filterable list of commands, and the pick becomes a chip in front of the message.

Type @ to pull a file, person or doc into the message as an inline pill, grouped by kind.

Model picker4 variants

Lets people choose which model answers and how hard it thinks: an effort slider with a model list, a searchable list grouped by provider with a separate effort menu, a detailed list, or a quick three-way switch.

Ready-made prompts for an empty chat or follow-up questions under an answer.

Context meter2 variants

Shows how much of the context window a conversation has used, and what is taking up the space.

Files on their way into a chat: a tray above the input with progress and retry, a drop zone that checks what it accepts, a grid of images to reorder, files weighed against the context limit, and how they look once sent.

A prompt box for image generation. Add reference images and say what each is for, pick shape, style and count from small menus, list what to leave out, and have the prompt rewritten in more detail.

Point and ask2 variants

Click a spot on an image or a page to pin a question to it, so the model answers about that exact place.

Messages

7
Message3 variants

A single chat message from the person or the assistant, in three layouts.

The row under an assistant reply: copy, regenerate, thumbs up or down with a short feedback form, and share.

Steps between alternative versions of a reply, like 2 / 3, with a crossfade.

Streaming text5 variants

Text arriving as it's written: words fading in, markdown that forms cleanly mid-stream, a soft-focus edge, a caret with stop and skip controls, and a table filling row by row.

Turns a sent message back into an editor so people can fix it and resend.

Message error3 variants

What to show in place of a reply that failed, hit a usage limit or was stopped partway.

Report output2 variants

A long answer laid out as a report: sections with a contents list, figures and numbered sources, with a short version that opens into the full one.

Thinking & status

4
Text shimmer3 variants

A status line that shows the model is working, like “Thinking” or “Searching the web”.

Reasoning2 variants

Shows the model's reasoning as it streams, then folds it away behind a short “Thought for 12s” line.

Thinking laid out as steps: a status list, a one-line summary that opens up, a research trail of searches and pages read, options weighed and ruled out, and steps woven into the answer as it writes.

Loader4 variants

Small loading indicators for when a reply hasn't started yet, each with an optional label.

Sources & citations

5
Inline citation5 variants

Markers inside an answer that show where a claim came from: numbers, superscripts, a site chip, the quoted passage itself, or notes in the margin of a long report.

Sources list6 variants

The full set of sources behind an answer: behind one button, as cards or a scrolling row, as numbered footnotes, in a side panel, or as the log of what a research run read and used.

Link preview4 variants

Links shown with their content: a card with a loading skeleton, a hover card on a link in a reply, a pasted link in the composer, and rich embeds for videos, repos and posts.

Source viewer2 variants

Opens a cited source beside the answer with the quoted passage highlighted, and steps between every place the answer used it.

The files and connected apps a project's answers can draw on, and a quick way to narrow them for one question.

Thread & layout

8
Empty state7 variants

What a new chat shows before the first message: a greeting, a centred prompt, a project's home with its files and recent chats, a gallery of task templates, a return screen with unfinished work, an agent's own landing page, and a blank image studio.

Conversation5 variants

The message area of a chat: one that follows new text down, one with edited prompts that branch, two models answering side by side, a side thread for a follow-up, and an agent transcript with tool calls folded in.

A column of ticks beside a long chat, one per prompt. Hover one to preview that turn, click to jump to it, and bookmark the ones you'll want again.

Thread list5 variants

Where past chats live: a dated sidebar, chats filed into projects, a search palette that matches inside messages, a full page for managing chats in bulk, and a slim rail that opens on hover.

A round button in the corner of a page that opens a small chat panel, for help or support widgets.

Thread header4 variants

The bar above a chat: title and model with a share and options menu, a project breadcrumb with who can see it, a status bar for an agent working on a task, and a header that tucks away as you read.

Session tabs2 variants

Several chats open at once as tabs, with the ones still running marked, so you can switch without losing your place.

Panel dock2 variants

A resizable panel docked beside or under the chat for files, previews and sources, which collapses out of the way.