ChatMessage

GitHub
Display a chat message with icon, avatar, and actions.

Usage

The ChatMessage component renders an <article> element for a user or assistant chat message.

Hello! Tell me more about building AI chatbots with Nuxt UI.
Use the ChatMessages component to display a list of chat messages.

Parts

Use the parts prop to display the message content using the AI SDK v5 format.

Hello! Tell me more about building AI chatbots with Nuxt UI.
<template>
  <UChatMessage
    :parts="[
      {
        type: 'text',
        text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
      }
    ]"
  />
</template>
The parts prop is the recommended format for AI SDK v5. Each part has a type (e.g., 'text') and corresponding content. The ChatMessage component also supports the deprecated content prop for backward compatibility.

Side

Use the side prop to display the message on the left or right.

Hello! Tell me more about building AI chatbots with Nuxt UI.
<template>
  <UChatMessage
    side="right"
    :parts="[
      {
        type: 'text',
        text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
      }
    ]"
  />
</template>
When using the ChatMessages component, the side prop is set to left for assistant messages and right for user messages.

Variant

Use the variant prop to change style of the message.

Hello! Tell me more about building AI chatbots with Nuxt UI.
<template>
  <UChatMessage
    variant="soft"
    :parts="[
      {
        type: 'text',
        text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
      }
    ]"
  />
</template>
When using the ChatMessages component, the variant prop is set to naked for assistant messages and soft for user messages.

Icon

Use the icon prop to display an Icon component next to the message.

Hello! Tell me more about building AI chatbots with Nuxt UI.
<template>
  <UChatMessage
    icon="i-lucide-user"
    variant="soft"
    side="right"
    :parts="[
      {
        type: 'text',
        text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
      }
    ]"
  />
</template>

Avatar

Use the avatar prop to display an Avatar component next to the message.

Hello! Tell me more about building AI chatbots with Nuxt UI.
<template>
  <UChatMessage
    :avatar="{
      src: 'https://github.com/benjamincanac.png'
    }"
    variant="soft"
    side="right"
    :parts="[
      {
        type: 'text',
        text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
      }
    ]"
  />
</template>

You can also use the avatar.icon prop to display an icon as the avatar.

Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.
<template>
  <UChatMessage
    :avatar="{
      icon: 'i-lucide-bot'
    }"
    :parts="[
      {
        type: 'text',
        text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
      }
    ]"
  />
</template>

Actions

Use the actions prop to display actions below the message that will be displayed when hovering over the message.

Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.
<script setup lang="ts">
const actions = ref([
  {
    label: 'Copy to clipboard',
    icon: 'i-lucide-copy'
  }
])
</script>

<template>
  <UChatMessage
    :actions="actions"
    :parts="[
      {
        type: 'text',
        text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
      }
    ]"
  />
</template>

API

Props

Prop Default Type
as

'article'

any

The element or component this component should render as.

id

string

A unique identifier for the message.

role

"system" | "user" | "assistant"

The role of the message.

parts

UIMessagePart<UIDataTypes, UITools>[]

The parts of the message. Use this for rendering the message in the UI.

System messages should be avoided (set the system prompt on the server instead). They can have text parts.

User messages can have text parts and file parts.

Assistant messages can have text, reasoning, tool invocation, and file parts.

icon

string | object

avatar

AvatarProps & { [key: string]: any; }

variant

'naked'

"solid" | "outline" | "soft" | "subtle" | "naked"

side

'left'

"left" | "right"

actions

(Omit<ButtonProps, "onClick"> & { onClick?: ((e: MouseEvent, message: UIMessage<unknown, UIDataTypes, UITools>) => void) | undefined; })[]

Display a list of actions under the message. The label will be used in a tooltip. { size: 'xs', color: 'neutral', variant: 'ghost' }

compact

false

boolean

Render the message in a compact style. This is done automatically when used inside a UChatPalette.

content

string

metadata

unknown

The metadata of the message.

ui

{ root?: ClassNameValue; container?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; content?: ClassNameValue; actions?: ClassNameValue; }

Slots

Slot Type
leading

{ avatar: (AvatarProps & { [key: string]: any; }) | undefined; ui: object; }

content

ChatMessageProps

actions

{ actions: (Omit<ButtonProps, "onClick"> & { onClick?: ((e: MouseEvent, message: UIMessage<unknown, UIDataTypes, UITools>) => void) | undefined; })[] | undefined; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    chatMessage: {
      slots: {
        root: 'group/message relative w-full',
        container: 'relative flex items-start group-data-[role=user]/message:max-w-[75%]',
        leading: 'inline-flex items-center justify-center min-h-6',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        content: 'relative text-pretty min-w-0',
        actions: [
          'opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center',
          'transition-opacity'
        ]
      },
      variants: {
        variant: {
          solid: {
            content: 'bg-inverted text-inverted'
          },
          outline: {
            content: 'bg-default ring ring-default'
          },
          soft: {
            content: 'bg-elevated/50'
          },
          subtle: {
            content: 'bg-elevated/50 ring ring-default'
          },
          naked: {
            content: ''
          }
        },
        side: {
          left: {
            container: 'rtl:justify-end'
          },
          right: {
            container: 'ltr:justify-end ms-auto'
          }
        },
        leading: {
          true: ''
        },
        actions: {
          true: ''
        },
        compact: {
          true: {
            root: 'scroll-mt-3',
            container: 'gap-1.5 pb-3',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          false: {
            root: 'scroll-mt-4 sm:scroll-mt-6',
            container: 'gap-3 pb-8',
            leadingIcon: 'size-8',
            leadingAvatarSize: 'md'
          }
        }
      },
      compoundVariants: [
        {
          compact: true,
          actions: true,
          class: {
            container: 'pb-8'
          }
        },
        {
          leading: true,
          compact: false,
          side: 'left',
          class: {
            actions: 'left-11'
          }
        },
        {
          leading: true,
          compact: true,
          side: 'left',
          class: {
            actions: 'left-6.5'
          }
        },
        {
          variant: [
            'solid',
            'outline',
            'soft',
            'subtle'
          ],
          compact: false,
          class: {
            content: 'px-4 py-3 rounded-lg min-h-12',
            leading: 'mt-2'
          }
        },
        {
          variant: [
            'solid',
            'outline',
            'soft',
            'subtle'
          ],
          compact: true,
          class: {
            content: 'px-2 py-1 rounded-lg min-h-8',
            leading: 'mt-1'
          }
        }
      ],
      defaultVariants: {
        variant: 'naked'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        chatMessage: {
          slots: {
            root: 'group/message relative w-full',
            container: 'relative flex items-start group-data-[role=user]/message:max-w-[75%]',
            leading: 'inline-flex items-center justify-center min-h-6',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            content: 'relative text-pretty min-w-0',
            actions: [
              'opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center',
              'transition-opacity'
            ]
          },
          variants: {
            variant: {
              solid: {
                content: 'bg-inverted text-inverted'
              },
              outline: {
                content: 'bg-default ring ring-default'
              },
              soft: {
                content: 'bg-elevated/50'
              },
              subtle: {
                content: 'bg-elevated/50 ring ring-default'
              },
              naked: {
                content: ''
              }
            },
            side: {
              left: {
                container: 'rtl:justify-end'
              },
              right: {
                container: 'ltr:justify-end ms-auto'
              }
            },
            leading: {
              true: ''
            },
            actions: {
              true: ''
            },
            compact: {
              true: {
                root: 'scroll-mt-3',
                container: 'gap-1.5 pb-3',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs'
              },
              false: {
                root: 'scroll-mt-4 sm:scroll-mt-6',
                container: 'gap-3 pb-8',
                leadingIcon: 'size-8',
                leadingAvatarSize: 'md'
              }
            }
          },
          compoundVariants: [
            {
              compact: true,
              actions: true,
              class: {
                container: 'pb-8'
              }
            },
            {
              leading: true,
              compact: false,
              side: 'left',
              class: {
                actions: 'left-11'
              }
            },
            {
              leading: true,
              compact: true,
              side: 'left',
              class: {
                actions: 'left-6.5'
              }
            },
            {
              variant: [
                'solid',
                'outline',
                'soft',
                'subtle'
              ],
              compact: false,
              class: {
                content: 'px-4 py-3 rounded-lg min-h-12',
                leading: 'mt-2'
              }
            },
            {
              variant: [
                'solid',
                'outline',
                'soft',
                'subtle'
              ],
              compact: true,
              class: {
                content: 'px-2 py-1 rounded-lg min-h-8',
                leading: 'mt-1'
              }
            }
          ],
          defaultVariants: {
            variant: 'naked'
          }
        }
      }
    })
  ]
})

Changelog

63c0a — feat: expose ui in slot props where used (#5207)

61b60 — feat: allow passing a component instead of a name (#4766)

de782 — feat!: upgrade ai-sdk to v5 (#4698)

5cb65 — feat: import @nuxt/ui-pro components

DashboardToolbar

A toolbar to display under the navbar in a dashboard.

ChatMessages

Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.