Choosing UI

There are two routes for integrating the UI components:

• Styled Components (import styled components from @assistant-ui/react)
• Primitives + shadcn-ui CLI (paste a thread.tsx file in your repository)

Styled Components

Import styled components from @assistant-ui/react. The is recommended for most use cases.

Primitives + shadcn-ui CLI

shadcn-ui CLI pastes a thread.tsx file (> 250 lines of code) in your repository.

This makes use of assistant-ui's Primitives. These provide the functionality, but contain no styling. Styling lives entirely in your repository, while functionality is handled by the @assistant-ui/react library.

Example excerpt from the thread.tsx template:

...
<MessagePrimitive.Root className="grid w-full max-w-2xl auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 py-4">
  <ActionBarPrimitive.Root
    hideWhenRunning
    autohide="not-last"
    className="col-start-1 mr-3 mt-2.5 flex flex-col items-end"
  >
    <ActionBarPrimitive.Edit asChild>
      ...
    </ActionBarPrimitive.Edit>
  </ActionBarPrimitive.Root>
 
  <div className="bg-muted text-foreground col-start-2 row-start-1 max-w-xl break-words rounded-3xl px-5 py-2.5">
    <MessagePrimitive.Content />
  </div>
...

How to decide

If you want to start with the default assistant-ui look and feel, use Styled Components. If you want to completely change the UI from the get-go, use shadcn-ui.

The Styled Components method receives automatic CSS style updates/bug fixes. The shadcn-ui method requires you to manually update the CSS styles.

Both methods receive functionality updates and bug fixes via the Primitives. Both methods are fully customizable. As you customize the Styled Components through a process called Decomposition, your file will slowly look very similar to thread.tsx from the shadcn-ui CLI template.