Generative AI chat

Generative AI chat is a conversation between a user and a generative AI assistant.

Get design library
View demo

On this page

Key UX concepts

Distinguish between message authors

It’s important to provide visual affordance that helps users distinguish between authors of messages involved in a conversation. Avatars in chat bubbles help distinguish between messages sent by the user and generative AI by offering a different visual representation for the author of each message.

Maintain the flow of a conversation

Conversations can be exchange of multiple messages between a user and generative AI. Use support prompts to display suggested prompts from generative AI. This will help keep the conversation going and make the conversation more engaging.

Earn trust with users

List the sources of content, or cite the sources inline of the generative AI response. This enhances credibility and allows users to verify the information. Allow users to provide feedback on generative AI responses and use the feedback to improve the responses produced by generative AI moving forward.

Provide transparency

Users may feel uncertain or lose confidence during a generative chat if they’re unaware of the system's processing status, especially when a generative AI response takes time or encounters an error. Display error and loading states to keep users informed about the generative AI's activity and help set clear expectations.

Set user expectations around generative AI usage

Communicate the overall role of AI and risks involved with its usage in accordance by referencing any AI policies that are relevant to your product.

Building blocks

A.
Chat bubble

Display the outgoing chat bubble for messages sent by the user, and incoming chat bubble for messages received by the user from generative AI in a conversation.

B.
Avatar

Represents the user and the generative AI with an avatar.

C.
Citation popover - optional

Provide the inline citation to a unique source of content referenced by generative AI in a popover. Follow the writing guidelines for inline citations.

D.
Sources expandable section - optional

List all links to sources referenced by the generative AI to generate the response. Follow the writing guidelines for sources to format the sources correctly.

E.
Inline actions button group - optional

A collection of contextual and persistent actions that users can perform on generative AI responses:

  • Thumbs up and thumbs down feedback: users can provide feedback on whether the generated response was helpful or unhelpful. Follow the guidelines for generative AI feedback.

  • Copy to clipboard: use the copy to clipboard component icon button to copy the content of the generative AI response to the user’s clipboard.

  • Other actions: For a large number of actions, display relevant and most used actions as standalone icon buttons in the button group component, and group less relevant ones in the icon button dropdown. Follow the guidelines for in-context actions.

F.
Stacked chat bubbles - optional

When displaying complex UI elements such as lists or code blocks in generative AI response, stack each element in separate chat bubbles to ensure clarity and improve readability. Only one avatar should be shown at the first bubble, and for the content displayed in the following bubbles, the avatar should be hidden to maintain a cleaner, more streamlined interface.

G.
Prompt input

Enable users to enter and send text prompts in a generative AI chat. Display optional placeholder text suggesting an action. Once the user sends the prompt, it will be displayed as a conversational bubble.

H.
Disclaimer - optional

A textual disclaimer displayed by services to inform users of any legal or other important information as needed. Use constraint text in the form field to provide this information.

Other chat features

Feedback on generative AI responses

Follow the guidelines for generative AI feedback.

States

Generating a response

Follow the guidelines for generative AI loading states.

Error state
When users encounter an error display an error alert and include an action to recover, for example, try again. Types of error that can occur are, for example, access denied, server side error, connection error. Follow the guidelines for error messages.

Support prompt

Support prompts are messages suggested by generative AI to the user. They can help guide users to their next question in a conversation. Follow the guidelines for support prompt.

Shortcuts menu

The shortcut menu is displayed when a user types “/” in the prompt input field. It can be used to show a set of application-specific actions that users can perform while interacting with the generative AI.


General guidelines

Do

  • Display sources and citations in responses if supported by the generative AI to help build trust and transparency with users over time.
  • Display the appropriate loading states to inform users that their input is received and being processed.
  • Leverage the feedback provided by users on a generative AI response to improve the quality of future responses.
  • Place the inline action button groups directly in the context of the corresponding chat bubble.
  • Ensure the inline action button groups are always visible without requiring additional interaction, such as hover.
  • Use stacked bubbles when you need to display complex UI elements, such as list of resources, table, or code block, or to display contextual inline actions for these elements.
  • For languages that read left-to-right, align chat bubbles to the left of its container. This will help enhance readability, support natural eye movement, and create a cohesive visual hierarchy. In languages that read right-to-left, revert this alignment to the right.
  • Align with your product team to determine the need for a disclaimer regarding generative AI usage in your product.

Don't

  • Avoid displaying all actions a user can perform to interact with generative AI in the shortcuts menu. Instead, display frequently performed actions as secondary actions in the prompt input to improve discoverability. For example, file upload.
  • Limit the number of inline actions displayed at once to avoid overwhelming users. For example, display up to five frequently used buttons and move the rest into an icon button dropdown in a button group.
  • While a new generative AI output message is loading, don’t auto-scroll the user to the new message when the user is interacting with (scrolling, reading, copying) older messages.

Writing guidelines

General writing guidelines

  • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

  • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

  • Use present-tense verbs and active voice.

  • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

  • Avoid directional language.

    • For example: use previous not above, use following not below.

  • Use device-independent language.

    • For example: use choose or select not click.

Component-specific guidelines

Terminology

  • Introducing the AI: use generative AI assistant for introducing and referring to the AI, and generative AI to refer to the experience.

  • User queries: use submit as the label or reference term when a user is making a choice, query, or request.

  • AI replies: refer to AI replies as responses, not answers.

Chat bubble

Error

Inline citations

  • Use [1], [2], [3], and so on in progressing order for the inline text.

  • When inline text triggers the popover, include the title of the source with a dismiss button.

Sources

  • As the title of the expandable section, use this text: Sources

  • Inside the expandable section, list each of the sources link. If available, add the title of source, description, and date of publish using description text size.

Inline actions

Placeholder text - optional

  • Don’t use terminal punctuation in the placeholder.

  • Keep the placeholder brief, and avoid truncation (all of the text should be immediately visible in the field).

  • For the user input field, use this text: Ask a question

  • When enabling application-specific actions in the shortcuts menu, use this text: Ask a question or type "/" for more actions

  • Follow the writing guidelines for placeholder text.

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

Component specific guidelines

  • Use role="region"with a meaningful aria-label in the element that contains the chat bubbles.

    • For example: <div role="region" aria-label="Chat"><Chat /></div>

  • Ensure any new message is announced using visually hidden LiveRegion component.

    • For example: <LiveRegion hidden={true}>{latestMessage}</LiveRegion>