# ErrorPrimitive
URL: /docs/api-reference/primitives/error

Components for displaying error messages in the chat interface.

A component for displaying error messages in the UI.

Anatomy \[#anatomy]

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

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

API Reference \[#api-reference]

Root \[#root]

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

<ParametersTable
  type="ErrorPrimitiveRootProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
type: &#x22;boolean&#x22;,
description:
&#x22;Change the component to the HTML tag or custom component of the only child.&#x22;,
},
]"
/>

Message \[#message]

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

<ParametersTable
  type="ErrorPrimitiveMessageProps"
  parameters="[
{
name: &#x22;children&#x22;,
type: &#x22;ReactNode&#x22;,
description:
&#x22;Optional custom content to display instead of the default error message.&#x22;,
},
]"
/>

Usage \[#usage]

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

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

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