ErrorPrimitive

A component for displaying error messages in the UI.

Anatomy

import { ErrorPrimitive } from "@assistant-ui/react";

const ErrorDisplay = () => (
  <ErrorPrimitive.Root>
    <ErrorPrimitive.Message />
  </ErrorPrimitive.Root>
);

API Reference

Root

Contains all parts of the error display. Renders a <div> element with role="alert".

ErrorPrimitiveRootProps

asChild:

boolean = false

Change the component to the HTML tag or custom component of the only child.

Message

Displays the error message. By default, it shows the error from the message context if available, or you can provide custom content.

ErrorPrimitiveMessageProps

children?:

ReactNode

Optional custom content to display instead of the default error message.

Usage

The ErrorPrimitive is typically used within a MessagePrimitive.Error component to display error states in messages:

import { MessagePrimitive, ErrorPrimitive } from "@assistant-ui/react";

const MessageWithError = () => (
  <MessagePrimitive.Root>
    <MessagePrimitive.Content />
    <MessagePrimitive.Error>
      <ErrorPrimitive.Root>
        <ErrorPrimitive.Message />
      </ErrorPrimitive.Root>
    </MessagePrimitive.Error>
  </MessagePrimitive.Root>
);