import { MessagePrimitiveAttachmentByIndexProps, MessagePrimitiveAttachmentsProps, MessagePrimitiveContentProps, MessagePrimitiveGenerativeUIProps, MessagePrimitiveGroupedPartsProps, MessagePrimitiveIfProps, MessagePrimitivePartByIndexProps, MessagePrimitivePartsProps, MessagePrimitiveQuoteProps, MessagePrimitiveRootProps, MessagePrimitiveUnstable_PartsGroupedByParentIdProps, MessagePrimitiveUnstable_PartsGroupedProps } from "@/generated/typeDocs";
import { MessagePrimitive as MessagePrimitiveDocs } from "@/generated/primitiveDocs";

{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts /}
{/ Do not edit manually. */}

For examples and usage patterns, see Message.

{/* api-manual */}

Anatomy#

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

const UserMessage = () => (
  <MessagePrimitive.Root>
    User: <MessagePrimitive.Parts />
    <BranchPicker />
    <ActionBar />
  </MessagePrimitive.Root>
);

const AssistantMessage = () => (
  <MessagePrimitive.Root>
    Assistant: <MessagePrimitive.Parts />
    <BranchPicker />
    <ActionBar />
  </MessagePrimitive.Root>
);

{/* api-manual */}

{/* api-reference /}
{/ AUTO-GENERATED by scripts/generate-api-reference.mts /}
{/ Do not edit this block manually. */}

API Reference#

Root#

{MessagePrimitiveDocs.Root?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Root.deprecated}

)}

{MessagePrimitiveDocs.Root?.description}

{MessagePrimitiveDocs.Root?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Root?.element}>`} element unless asChild is set.

<MessagePrimitive.Root>
  <MessagePrimitive.Content />
  <ActionBarPrimitive.Root>
    <ActionBarPrimitive.Copy />
    <ActionBarPrimitive.Edit />
  </ActionBarPrimitive.Root>
</MessagePrimitive.Root>

<ParametersTable {...MessagePrimitiveRootProps} />

Parts#

{MessagePrimitiveDocs.Parts?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Parts.deprecated}

)}

{MessagePrimitiveDocs.Parts?.description}

{MessagePrimitiveDocs.Parts?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Parts?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitivePartsProps} />

PartByIndex#

{MessagePrimitiveDocs.PartByIndex?.deprecated && (

Deprecated. {MessagePrimitiveDocs.PartByIndex.deprecated}

)}

{MessagePrimitiveDocs.PartByIndex?.description}

{MessagePrimitiveDocs.PartByIndex?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.PartByIndex?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitivePartByIndexProps} />

Content#

{MessagePrimitiveDocs.Content?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Content.deprecated}

)}

{MessagePrimitiveDocs.Content?.description}

{MessagePrimitiveDocs.Content?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Content?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitiveContentProps} />

If#

{MessagePrimitiveDocs.If?.deprecated && (

Deprecated. {MessagePrimitiveDocs.If.deprecated}

)}

{MessagePrimitiveDocs.If?.description}

{MessagePrimitiveDocs.If?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.If?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitiveIfProps} />

Attachments#

{MessagePrimitiveDocs.Attachments?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Attachments.deprecated}

)}

{MessagePrimitiveDocs.Attachments?.description}

{MessagePrimitiveDocs.Attachments?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Attachments?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitiveAttachmentsProps} />

AttachmentByIndex#

{MessagePrimitiveDocs.AttachmentByIndex?.deprecated && (

Deprecated. {MessagePrimitiveDocs.AttachmentByIndex.deprecated}

)}

{MessagePrimitiveDocs.AttachmentByIndex?.description}

{MessagePrimitiveDocs.AttachmentByIndex?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.AttachmentByIndex?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitiveAttachmentByIndexProps} />

Quote#

{MessagePrimitiveDocs.Quote?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Quote.deprecated}

)}

{MessagePrimitiveDocs.Quote?.description}

{MessagePrimitiveDocs.Quote?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Quote?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitiveQuoteProps} />

Error#

{MessagePrimitiveDocs.Error?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Error.deprecated}

)}

{MessagePrimitiveDocs.Error?.description}

{MessagePrimitiveDocs.Error?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Error?.element}>`} element unless asChild is set.

{MessagePrimitiveDocs.Error?.props && (

)}

GroupedParts#

{MessagePrimitiveDocs.GroupedParts?.deprecated && (

Deprecated. {MessagePrimitiveDocs.GroupedParts.deprecated}

)}

{MessagePrimitiveDocs.GroupedParts?.description}

{MessagePrimitiveDocs.GroupedParts?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.GroupedParts?.element}>`} element unless asChild is set.

<MessagePrimitive.GroupedParts
  groupBy={groupPartByType({
    reasoning: ["group-thought", "group-reasoning"],
    "tool-call": ["group-thought", "group-tool"],
  })}
  {({ part, children }) => {
    switch (part.type) {
      case "group-thought": return <Thought>{children}</Thought>;
      case "group-reasoning": return <Reasoning>{children}</Reasoning>;
      case "group-tool": return <ToolStack>{children}</ToolStack>;
      case "text": return <MarkdownText />;
      case "tool-call": return part.toolUI ?? <ToolFallback {...part} />;
      case "indicator": return <LoadingDots />;
      default: return null;
    }
  }}
</MessagePrimitive.GroupedParts>

<ParametersTable {...MessagePrimitiveGroupedPartsProps} />

GenerativeUI#

{MessagePrimitiveDocs.GenerativeUI?.deprecated && (

Deprecated. {MessagePrimitiveDocs.GenerativeUI.deprecated}

)}

{MessagePrimitiveDocs.GenerativeUI?.description}

{MessagePrimitiveDocs.GenerativeUI?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.GenerativeUI?.element}>`} element unless asChild is set.

<MessagePrimitive.GenerativeUI
  components={{ Card: MyCard, Button: MyButton }}
/>

<ParametersTable {...MessagePrimitiveGenerativeUIProps} />

Unstable_PartsGrouped#

{MessagePrimitiveDocs.Unstable_PartsGrouped?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Unstable_PartsGrouped.deprecated}

)}

{MessagePrimitiveDocs.Unstable_PartsGrouped?.description}

{MessagePrimitiveDocs.Unstable_PartsGrouped?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Unstable_PartsGrouped?.element}>`} element unless asChild is set.

// Group by parent ID (default behavior)
<MessagePrimitive.Unstable_PartsGrouped
  components={{
    Text: ({ text }) => <p className="message-text">{text}</p>,
    Image: ({ image }) => <img src={image} alt="Message image" />,
    Group: ({ groupKey, indices, children }) => {
      if (!groupKey) return <>{children}</>;
      return (
        <div className="parent-group border rounded p-4">
          <h4>Parent ID: {groupKey}</h4>
          {children}
        </div>
      );
    }
  }}
/>

<ParametersTable {...MessagePrimitiveUnstable_PartsGroupedProps} />

Unstable_PartsGroupedByParentId#

{MessagePrimitiveDocs.Unstable_PartsGroupedByParentId?.deprecated && (

Deprecated. {MessagePrimitiveDocs.Unstable_PartsGroupedByParentId.deprecated}

)}

{MessagePrimitiveDocs.Unstable_PartsGroupedByParentId?.description}

{MessagePrimitiveDocs.Unstable_PartsGroupedByParentId?.element && (

This primitive renders a {`<${MessagePrimitiveDocs.Unstable_PartsGroupedByParentId?.element}>`} element unless asChild is set.

<ParametersTable {...MessagePrimitiveUnstable_PartsGroupedByParentIdProps} />

groupPartByType#

Build a groupBy from a part.type → group-key path lookup.
Parts whose type isn't in the map are left ungrouped. The returned
function carries a stable GROUPBY_MEMO_KEY fingerprint so
<MessagePrimitive.GroupedParts> can memoize its tree across renders.

The synthetic "standalone-tool-call" key matches tool calls that should
render outside the chain-of-thought grouping. MCP-app calls are detected from
the part alone; the registry-driven cases (human tools, the generative-UI
tool, display: "standalone" opt-ins) are resolved from the
GroupByContext that <MessagePrimitive.GroupedParts> passes to the
groupBy function — the helper needs nothing threaded into it.

<MessagePrimitive.GroupedParts
  groupBy={groupPartByType({
    reasoning: ["group-thought", "group-reasoning"],
    "tool-call": ["group-thought", "group-tool"],
    "standalone-tool-call": [],
  })}
  {({ part, children }) => { ... }}
</MessagePrimitive.GroupedParts>

const groupPartByType: <TKey extends `group-${string}`>(map: Partial<Readonly<Record<GroupPartType, readonly TKey[]>>>) => ((part: PartState, context?: GroupByContext) => readonly TKey[]);

{/* api-reference */}