# ThreadPrimitive
URL: /docs/api-reference/primitives/Thread

Primitives for the message list, viewport, and welcome screen.

***

title: ThreadPrimitive
description: Primitives for the message list, viewport, and welcome screen.
---------------------------------------------------------------------------

A conversation between a user and an assistant.

import { ParametersTable } from "@/components/docs/tables/ParametersTable";

## Anatomy

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

const Thread = () => (
  <ThreadPrimitive.Root>
    <ThreadPrimitive.Viewport>
      <ThreadPrimitive.Empty>...</ThreadPrimitive.Empty>
      <ThreadPrimitive.Messages components={...} />
    </ThreadPrimitive.Viewport>
    <Composer />
  </ThreadPrimitive.Root>
);
```

## API Reference

### Root

Containts all parts of the thread.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="ThreadPrimitiveRootProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>

### Viewport

The scrollable area containing all messages. Anchors scroll to the bottom as new messages are added.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="ThreadPrimitiveViewportProps"
  parameters={[
  {
    name: "asChild",
  },
  {
    name: "autoScroll",
    type: "boolean",
    default: "true",
    description:
      "Whether to automatically scroll to the bottom of the viewport when new messages are added while the viewport is was previously scrolled to the bottom.",
  },
]}
/>

### Messages

Renders all messages. This primitive renders a separate component for each message.

<ParametersTable
  type="ThreadPrimitiveMessagesProps"
  parameters={[
  {
    name: "components",
    type: "MessageComponents",
    description: "The component to render for each message.",
    children: [
      {
        type: "MessageComponents",
        parameters: [
          {
            name: "Message",
            type: "ComponentType",
            description: "The component to render for each message.",
          },
          {
            name: "UserMessage",
            type: "ComponentType",
            description: "The component to render for user messages.",
          },
          {
            name: "EditComposer",
            type: "ComponentType",
            description:
              "The component to render for user messages that are being edited.",
          },
          {
            name: "AssistantMessage",
            type: "ComponentType",
            description: "The component to render for assistant messages.",
          },
        ],
      },
    ],
  },
]}
/>

### MessageByIndex

Renders a single message at the specified index in the current thread.

```tsx
<ThreadPrimitive.MessageByIndex
  index={0}
  components={{
    UserMessage: MyUserMessage,
    AssistantMessage: MyAssistantMessage
  }}
/>
```

<ParametersTable
  type="ThreadPrimitive.MessageByIndex.Props"
  parameters={[
  {
    name: "index",
    type: "number",
    required: true,
    description: "The index of the message to render.",
  },
  {
    name: "components",
    type: "MessageComponents",
    description: "The component configuration for rendering the message.",
    children: [
      {
        type: "MessageComponents",
        parameters: [
          {
            name: "Message",
            type: "ComponentType",
            description: "The component to render for each message.",
          },
          {
            name: "UserMessage",
            type: "ComponentType",
            description: "The component to render for user messages.",
          },
          {
            name: "EditComposer",
            type: "ComponentType",
            description:
              "The component to render for user messages that are being edited.",
          },
          {
            name: "AssistantMessage",
            type: "ComponentType",
            description: "The component to render for assistant messages.",
          },
        ],
      },
    ],
  },
]}
/>

### Empty

Renders children only when there are no messages.

### ScrollToBottom

A button to scroll the viewport to the bottom. Disabled when the viewport is already at bottom.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ThreadPrimitiveScrollToBottomProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>

### `ThreadPrimitive.Suggestion`

Shows a suggestion to the user. When the user clicks on the suggestion, the composer's value is set to the suggestion's prompt.

This primitive renders a `<button>` element unless `asChild` is set.

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

const Suggestion = () => {
  return (
    <ThreadPrimitive.Suggestion
      prompt="I need help with product search"
      send
    />
  );
};
```

<ParametersTable
  type="ThreadPrimitiveSuggestionProps"
  parameters={[
  {
    name: "prompt",
    type: "string",
    description: "The suggestion's prompt.",
  },
  {
    name: "send",
    type: "boolean",
    description:
      "When true, automatically sends the message. When false, replaces or appends the composer text with the suggestion - depending on the value of `clearComposer`",
  },
  {
    name: "clearComposer",
    type: "boolean",
    default: "true",
    description:
      "Whether to clear the composer after sending. When send is set to false, determines if composer text is replaced with suggestion (true, default), or if the suggestion's prompt is appended to the composer text (false).",
  },
  {
    name: "autoSend",
    type: "boolean",
    deprecated: true,
    description: "Deprecated. Use 'send' instead.",
  },
  {
    name: "method",
    type: "'replace'",
    deprecated: true,
    description: "Deprecated. This parameter is no longer used.",
  },
]}
/>