Skip to main content
Our docs redesign is live!

ConciergeDrawer

Site-wide slide-in chat panel for Dex, the Contentstack developer experience assistant (built on Contentstack Concierge). Fixed to the right edge, opened from the header "Ask Dex" trigger or the ⌘I / Ctrl+I shortcut. Mounted once in app/layout.tsx inside ConciergeProvider.

Props

None. All chat and open/close state comes from useConcierge().

Usage

import { ConciergeDrawer } from "@/components/organisms/ConciergeDrawer";

// app/layout.tsx, inside <ConciergeProvider>
<ConciergeDrawer />

Open it from anywhere with the context:

const { openDrawer, toggleDrawer } = useConcierge();

Behavior

  • Slides in from the right (translate-x transition, z-[60], above the z-50 header).
  • Mobile: full width with a dimmed backdrop (click to close). Desktop: starts at max-w-md and can expand to max-w-3xl / xl:max-w-4xl without leaving the page.
  • Header bar actions: new conversation, widen/narrow panel, close.
  • Escape closes; focus returns to the previously focused element. Panel is inert while closed.
  • Empty state shows a greeting plus compact SuggestedQuestions; composer auto-focuses on open.
  • Wide mode expands the panel (md:max-w-3xl, xl:max-w-4xl); chat content uses the full panel width.

Notes

  • Dex is drawer-only. There is no standalone Dex route.
  • Set CONCIERGE_ENABLED=false to hide the drawer, header trigger, ⌘I / Ctrl+I shortcut, and disable POST /api/concierge.
  • Requires CONCIERGE_API_KEY on the server via POST /api/concierge. Optionally enrich prompts with site MCP content (default). Set CONCIERGE_SITE_CONTEXT_ENABLED=false for native Digital Concierge only.