Skip to content

Updated

Copy page

AI chat app

A chat with a model in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Good morning, Maren with four suggestion chips, a thread whose reply holds a table and two sources, a reply still arriving with a stop button, a file in the composer, a picture reply and a request that timed out.

Copy page

Updated

On this page
  1. Preview
  2. Live components
  3. The pattern
  4. Built from
  5. iOS and Material
  6. Related
  7. Get the file

Preview

New chat, Thread, Generating, Attachment, Image, Error, from the AI page of the Appetite UI Figma file. The theme switch shows the dark frames.

AI chat app, chat393 x 852 each, Light and Dark
AI new chat screen: an Appetite AI model switcher between a sidebar button and a new chat button, a sparkle icon above Good morning, Maren, a line to pick up a thread, four suggestion chips such as Summarize a PDF and Draft an email, and the Ask anything composerAI new chat screen in dark mode: an Appetite AI model switcher between a sidebar button and a new chat button, a sparkle icon above Good morning, Maren, a line to pick up a thread, four suggestion chips such as Summarize a PDF and Draft an email, and the Ask anything composer
New chat
AI thread screen: a message asking to summarize the Q3 report, a reply that churn rose to 4.1 percent with a three row table of Monthly plan, Annual plan and Cancels in week one, two source cards, copy, like, dislike and retry actions, and the composerAI thread screen in dark mode: a message asking to summarize the Q3 report, a reply that churn rose to 4.1 percent with a three row table of Monthly plan, Annual plan and Cancels in week one, two source cards, copy, like, dislike and retry actions, and the composer
Thread
AI generating screen: three exchanges about retention and the Q3 report, the last reply cut off above a typing indicator, and a composer whose send button has become a blue stop buttonAI generating screen in dark mode: three exchanges about retention and the Q3 report, the last reply cut off above a typing indicator, and a composer whose send button has become a blue stop button
Generating
AI attachment screen: a request to summarize renewal risk, a numbered list of three risks, and a composer holding the attached file Board pack Q2.pdf, 2.4 MB, the text Now do the same for the Q2 pack and a blue send buttonAI attachment screen in dark mode: a request to summarize renewal risk, a numbered list of three risks, and a composer holding the attached file Board pack Q2.pdf, 2.4 MB, the text Now do the same for the Q2 pack and a blue send button
Attachment
AI image result screen: a request for a hero image for the launch post, a reply with a photo of a bedroom looking out over a coastline, and Save, Variations and Edit buttons above the composerAI image result screen in dark mode: a request for a hero image for the launch post, a reply with a photo of a bedroom looking out over a coastline, and Save, Variations and Edit buttons above the composer
Image
AI error screen: a red banner reading The request timed out before a full answer came back with a Try again button, below a question, its answer and a follow-up question, and above an empty composerAI error screen in dark mode: a red banner reading The request timed out before a full answer came back with a Try again button, below a question, its answer and a follow-up question, and above an empty composer
Error
Screens, screen, what it shows
ScreenWhat it shows
New chatAn empty prompt with four suggestions
ThreadA question, a reply with a table and sources, and the reply actions
GeneratingA reply that is still arriving, with a stop button
AttachmentA file waiting in the composer, a numbered list in the reply
ImageA picture reply with Save, Variations and Edit
ErrorA failed reply with a retry

Which components carry the chat pattern?

The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.

Chat, live componentsKit geometry, light and dark

AI / Message and AI / Prompt Composer

Summarize the Q3 report and pull out anything about churn.Churn rose to 4.1 percent in Q3, up from 3.2 in Q2.

How does this screen follow the chat pattern?

The rules every chat screen in the kit follows, and what this one does with each.

The pattern, rule, on this screen
RuleOn the ai chat app
The composer stays putThe AI / Prompt Composer stays at the bottom in every state; while a reply streams its send button becomes a blue stop button.
A reply can be more than textReplies are full width AI / Message rows, not bubbles, because they hold a three row table, source cards and Save, Variations and Edit.
Show the state, not a spinnerGenerating shows a typing indicator under the cut off reply, and Error a red banner, The request timed out before a full answer came back, with Try again.

What is it built from?

Every control with a component is an instance of it, so one token change moves these screens with the rest of the file.

Built from, component, screens
ComponentScreens
AI / Prompt ComposerNew chat, Thread, Generating, Attachment
ChipNew chat
ButtonNew chat, Image, Error
AI / MessageThread, Generating, Attachment, Image, Error

What changes between iOS and Material?

The frames are drawn in the ios-md Platform mode. Switch a frame to android and these variables take the Material values; the components below are where the two systems draw the same need differently.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/min-touch-target4448
platform/control/corner8Full (9999)
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
Text fieldiOS / Text FieldM3 / Text Field, Filled or Outlined, 56 highMaterial has Enabled, Focused, Error and Disabled states

Start from these screens.

Every frame on this page is part of the Appetite UI file, drawn from its components and bound to its variables, so one brand edit moves every screen in light and dark.

The file holds 589 variables in 6 collections and exports its token values to SwiftUI, Jetpack Compose, Flutter and CSS. Solo covers one designer and Team up to ten people. You pay once and keep lifetime updates. Price goes up Nov 1

The read-only Figma preview opens the whole file, every screen and every variable, before you buy.

Get lifetime accessOpen the Figma previewSee the plans