Artifact previews

How to display AI-generated artifacts in generative AI chat.

On this page

About this page

Published: December 18, 2025

Key UX concepts

Artifacts generated by AI

Artifacts are AI-generated outputs such as documents, images, code, workflows. These artifacts are rendered as previews that typically contain a label and description, with metadata and related actions.

Types of artifact previews

You can display generated artifacts in two ways within the chat experience, each serving different user needs and interaction models:

  • Inline previews: These previews emphasize quick understanding and enable contextual interactions such as download or copy within the chat interface.

  • Canvas previews: These previews display in the chat and expand to show the full artifact in an adjacent area where users can view and interact with the content.

Criteria

Inline previews

Canvas previews

Artifact complexity

Simple, self-contained content. For example, a .csv generated by AI that can be downloaded.

Complex, interactive content that a user can modulate. For example, canvases generated by AI containing forms or wizards.

Content length

Short. For example, a code snippet for a CLI command.

Long. For example, a dense document written by AI.

Primary user intent

Quick recognition and basic actions.

Detailed review, editing, or interaction.

Key actions

Quick actions. For example, download, copy, share.

Complex actions. For example, edit, annotate, or completing a task or workflow.

Interaction depth

Minimal. Users can act on the artifact without opening it.

Complex. Users need to explore or work within the content.

Conversation flow

Maintaining flow of the conversation is critical.

Artifact becomes the primary focus.

Inline previews

Code snippets

Short blocks displayed directly in the conversation using item card with syntax highlighting, language indicator, and copy action. Ideal for quick reference, examples, or snippets users can immediately copy and paste.

Generative AI assistant

Show me the simplest Lambda function to log S3 uploads
Here is a snippet of the simplest Lambda function to log S3 uploads.
Python
Use of this service is subject to the AWS Responsible AI Policy 

Media

Generated media such as images, charts, diagrams, or videos display with inline previews using item card. These cab include file names, metadata, and actions for downloading or expanding. This allows users to immediately view and assess visual content without requiring them to be opened in a separate viewer. For expanding a generated artifact such as an image, follow the guidance for image magnifier.

Generative AI assistant

Create an image of a happy corgi dog.
Here you go – an image of a happy corgi dog.
dog-portrait.jpg
886 × 408 – 487 KB
A portrait of a happy corgi dog
Use of this service is subject to the AWS Responsible AI Policy 

Download-only files

Documents and generated files display as downloadable artifacts using item card with file names, size metadata, and download actions. This format works for well any files that users need to save locally without opening or viewing them first.

Generative AI assistant

Please create a .csv of my monthly budget with categories and expenses
Here is a .csv with your monthly budget and expenses. Let me know if you need any changes to the format or categories.
jd-budget.csv
1.82 MB
Use of this service is subject to the AWS Responsible AI Policy 

Canvas previews

Selectable preview

Artifact previews allow users to interact with generated content and progressively render the full artifact in an adjacent panel using an action card. For example, when a user selects an AI-generated document artifact preview, its contents display in the side panel. Use when users need to preview or read through content as the primary action without requiring secondary actions such as download or share.

Generative AI assistant

Write an architecture overview for our multi-region deployment strategy
I've drafted an architecture overview covering multi-region topology, data replication, failover strategy, and observability for your deployment.
18.7 KB
Use of this service is subject to the AWS Responsible AI Policy 

General guidelines

Do

  • Maintain a clear separation between actions that belong to the artifacts generated by AI and the conversation. For example, group actions related to the artifact preview within its card and the actions related to the chat bubble in a button group.
  • When an inline artifact preview has multiple actions, consolidate them into a single button dropdown with a ellipsis icon to reduce visual clutter and maintain a clean interface.

Don't

  • Don’t nest artifacts into a chat bubble. Stack each artifact to ensure clarity and improve readability. For more detailed guidance on message structure and stacking patterns, refer to the generative AI chat pattern.

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

Artifact metadata

  • Express the file size using standard units such as KB, MB, or GB.

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.