Provider composesCopy-paste blockopenai-composeLive stage

ChatGPT Compose

A copy-paste block that recreates the ChatGPT prompt stage with OpenAI's rail, brand mark, prompt surface, model menu, and tool toggles. The block is not a package component: copy the file, or install it with the shadcn CLI, then edit the layout like any other file in your project. It is assembled entirely from Agent UI compose primitives, and every control is keyboard accessible.

Source you own: install the block with the shadcn CLI or copy components/blocks/composes/openai-compose.tsx. The preview below is the real file, and the code tab is the exact source.

components/blocks/composes/openai-compose.tsx

Where should we begin?

ChatGPT is AI. By using it, you agree to our Terms & Privacy Policy.

The code tab contains the full block, ready to copy.

Installation

Add the block with the shadcn CLI. It writes components/blocks/composes/openai-compose.tsx and installs its dependencies.

bash

npx shadcn@latest add https://agent-ui-27t.pages.dev/r/openai-compose.json

Prefer to own the file manually? Install the dependencies, then copy the source from the Files section.

bash

pnpm add @agent-ui/react lucide-react

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

Usage

Import the copied file and render it anywhere. The block accepts onSend, disabled, and className; wire onSend to any backend.

tsx

1import { OpenAICompose } from "@/components/blocks/composes/openai-compose";
2 
3<OpenAICompose onSend={(text) => console.log(text)} />

Files

One file. The same source is served by the shadcn registry endpoint, so the CLI and the docs can never drift.

components/blocks/composes/openai-compose.tsxtsx

tsx

1"use client";
2 
3import * as React from "react";
4import {
5  ArrowUp,
6  ChevronDown,
7  ExternalLink,
8  Image as ImageIcon,
9  Mic,
10  PanelLeft,
11  Plus,
12  Puzzle,
13  Settings,
14  SquarePen,
15  Telescope,
16} from "lucide-react";
17import {
18  ComposeDisclaimer,
19  ComposeSendButton,
20  ComposeTextarea,
21  createCompose,
22  useCompose,
23  type ComposeProps,
24} from "@agent-ui/react";
25 
26const Root = createCompose({
27  id: "openai",
28  maxWidth: "max-w-none",
29  placeholder: "Ask ChatGPT",
30});
31 
32const NAV = [
33  { icon: SquarePen, label: "New chat" },
34  { icon: ImageIcon, label: "Images" },
35  { icon: Puzzle, label: "Plugins" },
36  { icon: Telescope, label: "Deep research" },
37  { icon: Settings, label: "Settings" },
38];
39 
40/** ChatGPT logged-out home: warm grey rail + airy white canvas + capsule composer. */
41function OpenAIComposeLayout() {
42  const { send } = useCompose();
43  return (
44    <div className="flex min-h-[400px] w-full bg-white text-[13px] text-[#0d0d0d]">
45      <aside className="hidden w-[172px] shrink-0 flex-col @[560px]:flex border-r border-black/[0.06] bg-[#f9f9f9] px-2.5 py-3">
46        <div className="flex items-center justify-between px-1">
47          <button
48            type="button"
49            className="flex items-center gap-1 text-[13px] font-semibold tracking-tight"
50          >
51            ChatGPT <ChevronDown className="h-3 w-3 opacity-60" />
52          </button>
53          <PanelLeft className="h-4 w-4 opacity-50" aria-hidden="true" />
54        </div>
55        <nav className="mt-4 flex flex-col gap-0.5">
56          {NAV.map(({ icon: Icon, label }) => (
57            <button
58              key={label}
59              type="button"
60              className="flex items-center gap-2.5 rounded-lg px-2 py-[6px] text-left text-[12px] text-[#202020] transition-colors hover:bg-black/[0.05]"
61            >
62              <Icon className="h-[15px] w-[15px] opacity-80" aria-hidden="true" />
63              {label}
64            </button>
65          ))}
66          <button
67            type="button"
68            className="flex items-center gap-2.5 rounded-lg px-2 py-[6px] text-left text-[12px] text-[#202020] transition-colors hover:bg-black/[0.05]"
69          >
70            <ExternalLink className="h-[15px] w-[15px] opacity-80" aria-hidden="true" />
71            See plans and pricing
72          </button>
73        </nav>
74        <div className="mt-auto rounded-xl px-1 pt-4">
75          <p className="text-[12px] font-semibold leading-snug">Get responses tailored to you</p>
76          <p className="mt-1 text-[10px] leading-snug text-black/50">
77            Log in to get answers based on saved chats, plus create images and upload files.
78          </p>
79          <button
80            type="button"
81            className="mt-2 w-full rounded-full bg-[#ececec] py-1.5 text-[11.5px] font-medium text-[#0d0d0d] transition-colors hover:bg-[#e3e3e3]"
82          >
83            Log in
84          </button>
85        </div>
86      </aside>
87 
88      <div className="relative flex min-w-0 flex-1 flex-col items-center justify-center px-5 pb-8 pt-4">
89        <div className="mb-6 flex items-center gap-2 self-end text-[11px]">
90          <button
91            type="button"
92            className="rounded-full bg-[#0d0d0d] px-3 py-1.5 font-medium text-white"
93          >
94            Log in
95          </button>
96          <button
97            type="button"
98            className="rounded-full border border-black/10 px-3 py-1.5 font-medium"
99          >
100            Sign up for free
101          </button>
102        </div>
103 
104        <h1 className="text-center text-[23px] font-normal tracking-[-0.01em] text-[#0d0d0d]">
105          Where should we begin?
106        </h1>
107 
108        <div
109          data-agent-id="compose-card"
110          className="mt-5 flex w-full max-w-[430px] items-center gap-1 rounded-full border border-black/10 bg-white py-2 pl-3.5 pr-2 shadow-[0_2px_10px_rgba(0,0,0,0.06)] transition-shadow focus-within:shadow-[0_2px_14px_rgba(0,0,0,0.1)]"
111        >
112          <Plus className="h-[18px] w-[18px] shrink-0 text-[#0d0d0d]" aria-hidden="true" />
113          <ComposeTextarea
114            aria-label="Chat with ChatGPT"
115            placeholder="Ask ChatGPT"
116            rows={1}
117            className="min-w-0 flex-1 px-2 py-1 text-[14.5px] leading-5 text-[#0d0d0d] placeholder:text-black/45"
118          />
119          <button
120            type="button"
121            aria-label="Start dictation"
122            className="grid h-8 w-8 shrink-0 place-items-center rounded-full text-[#0d0d0d] transition-colors hover:bg-black/5"
123          >
124            <Mic className="h-[17px] w-[17px]" aria-hidden="true" />
125          </button>
126          <ComposeSendButton
127            aria-label="Send message"
128            className="h-8 w-8 shrink-0 bg-[#a8c6f8] text-white hover:bg-[#8fb6f6] disabled:bg-[#a8c6f8] disabled:text-white disabled:opacity-100"
129            icon={<ArrowUp className="h-[17px] w-[17px]" strokeWidth={2.4} />}
130          />
131        </div>
132 
133        <button
134          type="button"
135          onClick={() => send("What can you do?")}
136          className="mt-3 rounded-full border border-black/10 bg-white px-4 py-1.5 text-[12px] text-[#0d0d0d] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors hover:bg-[#f7f7f7]"
137        >
138          What can you do?
139        </button>
140 
141        <div className="absolute inset-x-0 bottom-2">
142          <ComposeDisclaimer className="mt-0 text-[9.5px] text-black/45">
143            ChatGPT is AI. By using it, you agree to our{" "}
144            <a href="#" className="underline">
145              Terms
146            </a>{" "}
147            &amp;{" "}
148            <a href="#" className="underline">
149              Privacy Policy
150            </a>
151            .
152          </ComposeDisclaimer>
153        </div>
154      </div>
155    </div>
156  );
157}
158 
159export function OpenAICompose(props: ComposeProps) {
160  return (
161    <Root {...props}>
162      <OpenAIComposeLayout />
163    </Root>
164  );
165}
166

Built with

The block imports these Agent UI primitives. Each one is a package export with its own docs page, so you can change the layout without giving up the behaviour.

Accessibility

All controls expose accessible names; the textarea supports Enter to send and Shift+Enter for a new line.

ChatGPT also has a full product page.

Metadata, model list, and the same block in a dedicated route.

Open ChatGPT

Use it with the rest of the library

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

166 lines · copy-ready