ChatGPT Home Page

Overview

This cookbook matches the chatgpt example app: a ChatGPT-like landing page with a left sidebar, a top model selector, and a centered “Ask anything” prompt.

It’s UI-only on purpose (no auth, no chat backend). The goal is to show how to compose an app shell using @repo/design-system primitives.

Where To Look

• App UI: apps/chatgpt/src/app/page.tsx
• Sidebar primitives: packages/design-system/components/ui/sidebar.tsx
• Prompt composer: packages/design-system/components/ui/prompt-input.tsx

Layout Structure

• Left sidebar (collapsed “icon” mode)
  • OpenAI logo button (toggles sidebar)
  • New chat / Search / Library actions
  • Avatar footer (bottom-left)
• Main area
  • Top-left model switcher (e.g. “ChatGPT 5.2”)
  • Centered heading
  • Compact prompt pill

Sidebar: Use The Design-System Sidebar

The example uses the built-in SidebarProvider + Sidebar components.

• collapsible="icon" gives the small icon sidebar look
• SidebarMenu + SidebarMenuButton builds the action list
• Footer uses Avatar (your GitHub image) anchored at the bottom

Prompt: PromptInput As A Compact Pill

The composer is built with PromptInput in a pill shape.

Pattern used:

• Wrap with PromptInputProvider so attachment actions can open a file dialog
• Use PromptInputCard for the rounded container
• Put buttons and textarea inside PromptInputBody

Copy<PromptInputProvider>
  <PromptInputCard className="rounded-full">
    <PromptInput shape="pill" size="sm" variant="none" onSubmit={onSubmit}>
      <PromptInput.Body className="items-center gap-2">
        <PromptInput.Button size="icon-sm">+</PromptInput.Button>
        <PromptInput.Textarea rows={1} placeholder="Ask anything" />
        <PromptInput.Button size="icon-sm">{/* mic */}</PromptInput.Button>
        <PromptInput.Submit size="icon-sm" />
      </PromptInput.Body>
    </PromptInput>
  </PromptInputCard>
</PromptInputProvider>

Notes

• The OpenAI logo in the sidebar is just an inline SVG.
• The model selector is a button (no real dropdown) to keep the demo focused on layout.

Enhancements (Optional)

• Add recent chats list under the sidebar actions
• Add a real model picker using Select
• Add prompt suggestions under the composer
• Wire to your chat API and stream messages