# AI chat app

> An AI chat app for Figma: a new chat with suggestions, threads with tables and sources, streaming, files, images and a failed reply, light and dark.

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.

Page: https://www.appetiteui.com/screens/ai-chat/chat. Every screen of the app: https://www.appetiteui.com/docs/screens-ai.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| New chat | An empty prompt with four suggestions | AI / Prompt Composer, Chip, Button |
| Thread | A question, a reply with a table and sources, and the reply actions | AI / Message, AI / Prompt Composer |
| Generating | A reply that is still arriving, with a stop button | AI / Message, AI / Prompt Composer |
| Attachment | A file waiting in the composer, a numbered list in the reply | AI / Message, AI / Prompt Composer |
| Image | A picture reply with Save, Variations and Edit | AI / Message, Button |
| Error | A failed reply with a retry | AI / Message, Button |

- New chat, light: 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 composer
  Picture: https://www.appetiteui.com/images/au_ai_new_chat_light.webp (dark: https://www.appetiteui.com/images/au_ai_new_chat_dark.webp)
- Thread, light: 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 composer
  Picture: https://www.appetiteui.com/images/au_ai_thread_light.webp (dark: https://www.appetiteui.com/images/au_ai_thread_dark.webp)
- Generating, light: 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 button
  Picture: https://www.appetiteui.com/images/au_ai_generating_light.webp (dark: https://www.appetiteui.com/images/au_ai_generating_dark.webp)
- Attachment, light: 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 button
  Picture: https://www.appetiteui.com/images/au_ai_attachment_light.webp (dark: https://www.appetiteui.com/images/au_ai_attachment_dark.webp)
- Image, light: 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 composer
  Picture: https://www.appetiteui.com/images/au_ai_image_light.webp (dark: https://www.appetiteui.com/images/au_ai_image_dark.webp)
- Error, light: 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 composer
  Picture: https://www.appetiteui.com/images/au_ai_error_light.webp (dark: https://www.appetiteui.com/images/au_ai_error_dark.webp)

## How the screen follows the chat pattern

| Rule | On this screen |
| --- | --- |
| The composer stays put | The 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 text | Replies 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 spinner | Generating 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. |

## Built from

| Component | Screens |
| --- | --- |
| AI / Prompt Composer | New chat, Thread, Generating, Attachment |
| Chip | New chat |
| Button | New chat, Image, Error |
| AI / Message | Thread, Generating, Attachment, Image, Error |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Control corner | 8 pt | Fully round | `platform/control/corner` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Text field | iOS / Text Field | M3 / Text Field, Filled or Outlined, 56 high | Material has Enabled, Focused, Error and Disabled states |

## Related

- Docs: [AI app screens, every screen and token](https://www.appetiteui.com/docs/screens-ai)
- Pattern: [Chat screens](https://www.appetiteui.com/screens/patterns/chat)
- Social media app: [Social media app chat](https://www.appetiteui.com/screens/social/chat)
- Docs: [AI](https://www.appetiteui.com/docs/ai-component)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Article: [Figma MCP for mobile: make your agent build with your components](https://www.appetiteui.com/blog/figma-mcp-for-mobile-apps)