AI patterns library

/

Chat bubbles

Chat bubbles

User bubbles:

User messages are styled like you’d see in Messenger, iMessage, WhatsApp, etc. This instantly feels intuitive – no need to learn a new interaction model.
Using a bubble helps visually separate your input from the system’s response. You always know what you typed, and where the conversation turned from there.

AI responses:

AI replies aren’t in bubbles, they often have wider spacing, embedded elements, and more open format. This reinforces that the AI isn’t just another person – it’s a tool, generating structured content.
As responses grow (multi-paragraph explanations, images, tables, code blocks), bubbles would supports readability and makes scanning and finding “conversation anchors” way easier.

pattern-image

DeepSeek displays the user's message in a bubble, while the AI's response is “flat” and nested into the page with DeepSeek logo.

DeepSeek

pattern-image

Grok displays the user's message in a bubble, while the AI's response is “flat” and nested into the page.

Grok

pattern-image

GitHub Copilot displays the user's message in a bubble, while the AI's response is “flat” and nested into the page with GitHub Copilot logo.

GitHub Copilot

pattern-image

Microsoft Copilot displays the user's message in a bubble, while the AI's response is “flat” and nested into the page.

Microsoft Copilot

pattern-image

Gemini displays the user's message in a bubble, while the AI's response is “flat” and nested into the page with AI symbol.

Gemini

pattern-image

ChatGPT displays the user's message in a bubble, while the AI's response is “flat” and nested into the page.

ChatGPT

AI patterns checklist

PDF, 220 MB

AI patterns checklist

cookie

We use cookies to personalize content and ads, to provide social media features and to analyze our traffic. Check our privacy policy to learn more about how we process your personal data.