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
Rounded Composer: ChatGPT-style pill-shaped input with bg-white/5
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

Quick Start

npx assistant-ui add thread

Code

The ChatGPT clone uses a dark theme with custom styling:

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

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

        <ThreadPrimitive.Messages
          components={{ UserMessage, EditComposer, AssistantMessage }}
        />
      </ThreadPrimitive.Viewport>

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

      <p className="p-2 text-center text-[#cdcdcd] text-xs">
        ChatGPT can make mistakes. Check important info.
      </p>
    </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-screen-md centered layout
User messages: Right-aligned with bg-white/5 bubble

Source

View full source on GitHub