BlocksChatGPTShell

ChatGPT Shell

ChatGPTShell combines ConversationSidebar and ChatShell behind one API. Use it when you want the familiar left-rail chat layout without assembling the pieces yourself.

ChatGPTShell ships with a full API table, a copyable example, and accessibility notes.

tsx

5:30:00 pm

What is Agent UI?

Sent

5:31:00 pm

A UI library for building AI agent interfaces with React.

Sent

Installation

Install the package once, then import ChatGPTShell from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { ChatGPTShell } from "@agent-ui/react";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { ChatGPTShell } from "@agent-ui/react";
2 
3<ChatGPTShell
4  conversations={conversations}
5  activeId={activeId}
6  messages={messages}
7  isStreaming={isStreaming}
8  onSend={send}
9  onStop={stop}
10  onSelectConversation={select}
11  onNewChat={create}
12/>

API reference

Every prop ChatGPTShell accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
conversations	{ id; title; updatedAt }[]	—	History rail items.
activeId	string	—	Active conversation id.
messages	ChatMessage[]	—	Transcript.
isStreaming	boolean	false	Shows typing and stop states.
error	string \| null	—	Inline error banner.
onSend	(text: string) => void	—	Composer handler.
onStop	() => void	—	Abort handler.
onSelectConversation	(id: string) => void	—	History selection.
onNewChat	() => void	—	New chat action.
className	string	—	Merged onto the shell.

Accessibility

History is a navigation landmark; the transcript is a live region and all controls are labelled.

Use it with the rest of the library

ChatGPTShell composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

12 lines · copy-ready