ContentPart

Anatomy

import { ContentPartPrimitive } from "@assistant-ui/react";
 
const TextContentPart = () => {
  return <ContentPartPrimitive.Text />;
};
 
const ImageContentPart = () => {
  return <ContentPartPrimitive.Image />;
};
 
const UIContentPart = () => {
  return <ContentPartPrimitive.Display />;
};

API Reference

Text

Renders the text content of a text content part.

This primitive renders a <span> element.

`useContentPartText`

import { useContentPartText } from "@assistant-ui/react";
 
const Text = () => {
  const text = useContentPartText();
 
  return <span>{text}</span>;
};

Image

Renders the image content of an image content part.

This primitive renders an <img> element.

`useContentPartImage`

import { useContentPartImage } from "@assistant-ui/react";
 
const Image = () => {
  const image = useContentPartImage();
 
  return <img src={image} alt="AI" />;
};

Display

Renders the display content of a UI content part. This feature is used by the Vercel RSC runtime.

`useContentPartDisplay`

import { useContentPartDisplay } from "@assistant-ui/react";
 
const Display = () => {
  const display = useContentPartDisplay();
 
  return <div>{display}</div>;
};

InProgress

Renders children only if the content part is in progress. While a message is in progress, the very last content part is considered to be in progress.

ContentPart

On this page