ChatGPT Clone

Customized colors and styles for a ChatGPT look and feel

How can I help you today?

ChatGPT can make mistakes. Check important info.

Overview

The ChatGPT Clone demonstrates how to customize assistant-ui to match OpenAI's ChatGPT interface. This example recreates the characteristic dark theme, rounded input design, and interaction patterns familiar to ChatGPT users.

Features

Dark Theme: Authentic #212121 background with subtle white overlays
Light Mode: Full light mode support out of the box
Rounded Composer: ChatGPT-style pill-shaped input with bg-white/5
Attachments: Image and file attachment support with preview thumbnails
Message Layout: User messages right-aligned, assistant messages with avatar
Action Bar: Edit, copy, and regenerate buttons on hover
Branch Picker: Navigate between message variations
Scroll to Bottom: Auto-hiding button when scrolled up

Quick Start

npx assistant-ui add thread

Code

The ChatGPT clone uses a dark theme with custom styling:

import {
  AuiIf,
  ThreadPrimitive,
  ComposerPrimitive,
  MessagePrimitive,
  ActionBarPrimitive,
} from "@assistant-ui/react";
import { Avatar } from "radix-ui";

export const ChatGPT = () => {
  return (
    <ThreadPrimitive.Root className="dark flex h-full flex-col items-stretch bg-[#212121] px-4 text-foreground">
      <ThreadPrimitive.Viewport className="flex grow flex-col gap-8 overflow-y-scroll pt-16">
        <AuiIf condition={(s) => s.thread.isEmpty}>
          <div className="flex grow flex-col items-center justify-center">
            <Avatar.Root className="flex h-12 w-12 items-center justify-center rounded-3xl border border-white/15 shadow">
              <Avatar.AvatarFallback>C</Avatar.AvatarFallback>
            </Avatar.Root>
            <p className="mt-4 text-white text-xl">How can I help you today?</p>
          </div>
        </AuiIf>

        <ThreadPrimitive.Messages>
          {({ message }) => {
            if (message.role === "user") return <UserMessage />;
            return <AssistantMessage />;
          }}
        </ThreadPrimitive.Messages>

        <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mt-auto flex flex-col gap-4 bg-[#212121] pb-2">
          <ThreadPrimitive.ScrollToBottom className="..." />

          <ComposerPrimitive.Root className="mx-auto flex w-full max-w-3xl items-end rounded-3xl bg-white/5 pl-2">
            <ComposerPrimitive.Input
              placeholder="Message ChatGPT"
              className="h-12 max-h-40 grow resize-none bg-transparent p-3.5 text-sm text-white outline-none placeholder:text-white/50"
            />
            <ComposerPrimitive.Send className="m-2 flex size-8 items-center justify-center rounded-full bg-white transition-opacity disabled:opacity-10">
              <ArrowUpIcon className="size-5 text-black [&_path]:stroke-1 [&_path]:stroke-black" />
            </ComposerPrimitive.Send>
          </ComposerPrimitive.Root>

          <p className="text-center text-[#cdcdcd] text-xs">
            ChatGPT can make mistakes. Check important info.
          </p>
        </ThreadPrimitive.ViewportFooter>
      </ThreadPrimitive.Viewport>
    </ThreadPrimitive.Root>
  );
};

Color Palette

Element	Color
Background	`#212121`
Input background	`white/5` (5% white overlay)
Text	`#eee`
Muted text	`#cdcdcd`, `#b4b4b4`
Send button	White with black icon
Avatar border	`white/15`

Styling Details

Input: rounded-3xl for pill shape, max-h-40 for auto-expand
Send button: Circular with disabled:opacity-10 for inactive state
Messages: max-w-3xl centered layout
User messages: Right-aligned with bg-white/5 bubble

Source

View full source on GitHub