# AI chat UI

> An AI chat UI is a thread of messages and a prompt input where the answer arrives while it is written. Neither iOS nor Material 3 ships a component for it, so the message row and the composer are drawn by the app.

Page: https://www.appetiteui.com/glossary/ai-chat-ui. AI chat UI: message row, prompt composer and streaming. Also called Chat interface, Prompt composer, Message row, Streaming response.

## Why it matters

The answer arrives over seconds and can fail, so the design needs a state for the unfinished answer and one for the error, not only for the finished one.

Apple asks to keep people in control: let them dismiss or retry output, and say clearly when and where AI is used.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Generative AI guidance, no chat component | No chat component | Message and Prompt composer |
| User message in the file | 280 bubble pushed right | Same message | See below |
| Assistant message in the file | No container, full 361 | Same message | See below |

## In Appetite UI

Message has two roles and three states. Streaming hangs a 28 by 6 row of three dots under the answer, and Error swaps the answer for a 12 radius panel with a reason and a Retry button. The Prompt composer has five states: Empty, Typing, Generating, Disabled and Attachment.

Suggestion chips, source cards, the tools menu and the model picker are the kit’s existing Chip, Card, Context Menu and Dropdown.

## Example

A person asks a question. The assistant row shows three dots, then the text grows into the row; if the request fails, the row becomes an error panel with Retry and the composer stays editable.

## Common mistakes

- Showing nothing between the send and the first words.
- An error that discards what was typed. Keep the prompt.
- Presenting AI output as if a person wrote it. Apple says never to trick someone into thinking so.
- No way to stop a long answer.

## Questions

### Do iOS and Android have a chat component?

No. Neither ships a conversation or a prompt component, so apps draw their own.

### What states does an AI message need?

At least the finished answer, the streaming answer and the error, and for the composer: empty, typing, generating and disabled.

## Sources

1. [Apple Human Interface Guidelines: Generative AI](https://developer.apple.com/design/human-interface-guidelines/generative-ai)

## Related

- Docs: [AI](https://www.appetiteui.com/docs/ai-component)
- Docs: [Chip](https://www.appetiteui.com/docs/chip)
- Article: [Figma MCP for mobile: make your agent build with your components](https://www.appetiteui.com/blog/figma-mcp-for-mobile-apps)
- Glossary: [Text field](https://www.appetiteui.com/glossary/text-field)
- Glossary: [Chip](https://www.appetiteui.com/glossary/chip)
- Glossary: [Skeleton screen](https://www.appetiteui.com/glossary/skeleton-screen)