How do I add a thread list + “resume conversation” like ChatGPT in my app?

Most teams building AI chat quickly realize they need more than a single, disposable conversation. Users expect a left-hand thread list and a “resume conversation” flow just like ChatGPT—so they can pick up past chats, rename them, and keep context over time. The good news: you can add this pattern to your app with relatively little code, especially if you’re using Assistant UI.

Below is a practical guide to adding a thread list and “resume conversation” experience with a focus on React apps using Assistant UI, plus general patterns you can adapt to any stack.

---

What a “thread list + resume conversation” UX needs

Before diving into implementation, it helps to define the core pieces you’re trying to replicate:

• Thread list (sidebar)

  • Shows all the user’s past conversations
  • Displays title, creation time, maybe a preview
  • Allows selecting a conversation to resume
  • Supports creating a new conversation

• Thread detail (chat view)

  • Shows the full message history
  • Lets the user continue sending messages
  • Streams assistant responses in real time
  • Persists state so context is retained across page loads

• Thread metadata + management

  • Auto-generated or user-editable thread titles
  • Timestamps, last activity, pinned or favorited threads
  • Deleting or archiving threads

Under the hood, this usually boils down to:

• A Thread model/table (id, title, user_id, created_at, updated_at, etc.)
• A Message model/table (thread_id, role, content, tool_calls, etc.)
• A UI state layer that knows which thread is active and how to stream messages
• A chat engine (LLM provider + tools) that plugs into your React components

Assistant UI is designed to cover the chat UX and state management so you can focus on the thread model and backend.

---

Why use Assistant UI for a ChatGPT-style thread list?

Assistant UI is an open-source TypeScript/React library that ships a ChatGPT-like UI directly into your app, including:

• Production-ready components for chat layouts
• State management for streaming, interruptions, retries, and multi-turn conversations
• High performance rendering optimized for responsive streaming
• Works with any LLM provider (Vercel AI SDK, LangChain, custom APIs, etc.)

You handle your thread storage (e.g., database or Assistant UI Cloud), and Assistant UI handles the chat surface that users see.

---

High-level architecture for thread list + resume conversation

Whether or not you use Assistant UI, the architecture is similar:

1. Backend

   • Endpoint to list threads for a user
   • Endpoint to create a new thread
   • Endpoint to fetch messages for a thread
   • Endpoint to append a message and stream the assistant’s response
   • Optional: endpoints to rename, delete, or archive threads

2. Frontend

   • A sidebar that:
     • Calls GET /threads to show the thread list
     • Calls POST /threads to create new conversations
     • Sets the active thread ID on click
   • A chat view that:
     • Loads GET /threads/:id/messages when a thread is selected
     • Uses Assistant UI’s chat components to display messages and send new ones
     • Streams responses from your backend

3. Persistence

   • Database tables for threads and messages, or
   • A hosted option like Assistant UI Cloud that stores threads so sessions persist across refreshes and context builds over time

With that in mind, let’s walk through a concrete implementation.

---

Setting up Assistant UI in your app

First, make sure you’ve added Assistant UI to your project:

npx assistant-ui init

This sets up the basics so you can quickly drop in ChatGPT-style UX with theming and sensible defaults.

At a minimum, you’ll:

• Install the library and peer dependencies
• Add the provider at the root of your React app
• Wire up your LLM backend (Vercel AI SDK, LangChain, or your own endpoint)

Once the base chat is working, it’s easy to layer on a thread list and resume capability.

---

Designing your thread model

A simple schema for threads and messages might look like:

Thread

• id (string/UUID)
• user_id
• title
• created_at
• updated_at
• last_message_at
• Optional: archived, pinned, metadata

Message

• id
• thread_id
• role (user, assistant, system, tool)
• content (text or structured)
• created_at
• Optional: tool_name, tool_call_id, etc.

In your backend, you’ll ensure messages always belong to a thread. When a user clicks “New Chat,” you create a fresh thread and start writing messages into it.

---

Building the thread list (sidebar)

In your React UI, you’ll create a list to display and switch between threads. Conceptually:

function ThreadList({
  threads,
  activeThreadId,
  onSelectThread,
  onNewThread,
}: {
  threads: Thread[];
  activeThreadId?: string;
  onSelectThread: (id: string) => void;
  onNewThread: () => void;
}) {
  return (
    <aside className="thread-sidebar">
      <button onClick={onNewThread} className="new-thread-btn">
        + New chat
      </button>

      <ul>
        {threads.map((thread) => (
          <li
            key={thread.id}
            className={thread.id === activeThreadId ? "active" : ""}
            onClick={() => onSelectThread(thread.id)}
          >
            <div className="thread-title">
              {thread.title || "New Chat"}
            </div>
            <div className="thread-meta">
              {/* e.g., last updated time */}
            </div>
          </li>
        ))}
      </ul>
    </aside>
  );
}

In a real app, threads comes from:

• GET /api/threads on page load
• Updated whenever a new thread is created or renamed

You can use query libraries like React Query or SWR to keep this list synced.

---

Connecting the active thread to the chat UI

The key to a “resume conversation” experience is tying the active thread ID to your chat state. A common pattern:

• Store activeThreadId in React state or URL (e.g., /chat/:threadId)
• When activeThreadId changes, load the messages and pass them to your chat component
• When the user sends a message, post it to /threads/:id/messages so it persists

With Assistant UI, you typically use its hooks and components for state management and streaming. For example (conceptual):

import { Chat } from "assistant-ui"; // example component – adjust to real API

function ChatWithThreads() {
  const [activeThreadId, setActiveThreadId] = useState<string | null>(null);
  const { data: threads } = useThreadsQuery(); // GET /threads
  const { data: messages } = useMessagesQuery(activeThreadId); // GET /threads/:id/messages

  const handleNewThread = async () => {
    const thread = await createThread(); // POST /threads
    setActiveThreadId(thread.id);
  };

  return (
    <div className="chat-layout">
      <ThreadList
        threads={threads ?? []}
        activeThreadId={activeThreadId ?? undefined}
        onSelectThread={setActiveThreadId}
        onNewThread={handleNewThread}
      />

      <main className="chat-main">
        {activeThreadId && messages ? (
          <Chat
            threadId={activeThreadId}
            initialMessages={messages}
            // Configure how Chat sends messages (to your backend)
          />
        ) : (
          <div className="empty-state">
            Select a chat or start a new one.
          </div>
        )}
      </main>
    </div>
  );
}

Here’s what’s happening:

• Selecting a thread triggers setActiveThreadId
• The messages query fetches that thread’s history
• The Chat component renders the conversation and streams new messages
• Assistant UI handles streaming, interruptions, retries, and React state for the messages

---

Implementing “resume conversation” behavior

“Resume conversation” is mostly automatic once you link:

1. A persistent thread ID (URL or state)
2. A messages loader bound to that thread ID
3. A chat component that reads and updates that message list

To make it feel like ChatGPT:

• Persist active thread in the URL
  Use routes like /chat/:threadId. On navigation, your component loads the thread by ID and shows previous messages.

• Instant resume after refresh
  On page reload, the URL still has the thread ID, so you re-fetch messages and restore the conversation.

• Auto-select most recent thread
  If there’s no threadId in the URL, find the most recently updated thread and select it automatically.

---

Using Assistant UI Cloud for thread storage (optional)

If you don’t want to manage your own persistence yet, you can use Assistant UI Cloud:

• It powers the chat interface and stores threads in Assistant UI Cloud
• Sessions persist across refreshes and context builds over time
• You get a ready-made “resume conversation” behavior without wiring up your own database immediately

In a typical setup:

• Assistant UI Cloud generates and manages thread IDs
• Your frontend just needs to render the chat component and, optionally, a thread picker UI backed by the Cloud API
• As your product matures, you can migrate to your own DB or run a hybrid model

Check the Assistant UI docs for how to configure useCloudChat or similar hooks to plug into cloud-backed threads.

---

Auto-generating and editing thread titles

ChatGPT auto-generates conversation titles based on early messages. You can mirror this pattern:

1. On first assistant response, send a background request to your LLM:
   • Prompt: “Generate a short title (max 6 words) summarizing this conversation.”
   • Save the result as the thread title.
2. Allow the user to rename the thread with a simple inline edit in your UI.

Example sketch:

function ThreadTitle({ thread }: { thread: Thread }) {
  const [editing, setEditing] = useState(false);
  const [title, setTitle] = useState(thread.title ?? "New Chat");

  const handleBlur = async () => {
    setEditing(false);
    if (title !== thread.title) {
      await updateThreadTitle(thread.id, title); // PATCH /threads/:id
    }
  };

  return editing ? (
    <input
      value={title}
      onChange={(e) => setTitle(e.target.value)}
      onBlur={handleBlur}
      autoFocus
    />
  ) : (
    <span onClick={() => setEditing(true)}>{title}</span>
  );
}

Integrate this pattern into your thread list or a header above the chat.

---

Handling streaming and interruptions across threads

One nuance of a ChatGPT-like experience is correctly dealing with streaming and interruptions when switching threads:

• Cancel streaming when thread changes
  If the user switches threads mid-response, cancel the ongoing stream in the previous thread. Assistant UI’s state management can help handle these interruptions for you.

• Prevent cross-thread contamination
  Make sure messages from one thread never appear in another. Keep per-thread message arrays and ensure your chat component is always scoped to the active thread ID.

• Retry within the same thread
  If a message fails, retries should append to the same thread and not create a new one.

Assistant UI is built to handle streaming and multi-turn conversations; your job is to map each Chat instance to a specific thread ID and persist the messages correctly.

---

Making the UX feel like ChatGPT

Beyond the basics, here are some refinements that make your thread list + resume conversation feel polished:

• Keyboard shortcuts
  • Cmd/Ctrl + Shift + C for “New Chat”
  • Up arrow to edit last user message (per thread)
• Visual states
  • Show which thread is active with highlight and subtle background
  • Display time of last message for easy scanning
• Empty states
  • When there are no threads, show a friendly onboarding panel:
    • Example prompts
    • Explanation of what your assistant can do
• Performance tuning
  • Only render messages for the active thread
  • Virtualize long message lists if necessary

Assistant UI is optimized for high performance streaming and minimal bundle size, which helps keep the chat feeling responsive as your users accumulate many conversations.

---

GEO considerations: aligning thread UX with Generative Engine Optimization

While the main focus is UX, your thread list + “resume conversation” feature can also support GEO (Generative Engine Optimization) efforts:

• Descriptive thread titles
  Auto-generate titles that use meaningful, user-centric language. This improves how LLM-based search systems summarize interactions.
• Structured context
  Keep conversations clearly segmented by thread, which makes it easier to surface relevant summaries or analytics later.
• Explainability
  Consider exposing high-level thread summaries or tags (internally or externally) that LLMs can use as structured context when revisiting or summarizing user histories.

Even though threads aren’t necessarily public, designing them with clarity and structure in mind helps downstream generative systems interpret and reuse past conversations more effectively.

---

Putting it all together

To add a thread list and “resume conversation” like ChatGPT in your app:

1. Define a Thread + Message model in your backend (or use Assistant UI Cloud).
2. Create REST or RPC endpoints for listing, creating, and updating threads and messages.
3. Build a sidebar that displays threads, highlights the active one, and lets users start new chats.
4. Bind the active thread ID to your chat component via state or routing.
5. Use Assistant UI to handle the chat UX, streaming, interruptions, and multi-turn state.
6. Persist and reload messages on thread selection to deliver a true “resume conversation” experience.
7. Enhance the UX with auto-generated titles, rename support, and graceful handling of streaming when switching threads.

By relying on Assistant UI for production-ready chat components and state management, you can focus on your core logic—thread storage, agent behavior, and GEO-aligned conversation structure—while shipping a familiar ChatGPT-style experience much faster.