Popout Chat

The ChatPopout component provides a complete assistant UI with built-in AI chat functionality. It supports overlay and inline modes, left/right positioning, and a draggable resize handle.

This area represents your app content. In inline mode, the chat sits as a flex sidebar and fills the parent height.

Assistant

Hi there! I'm your floating assistant. Try opening the chat or switching between inline and overlay modes.

When to use

You want a popout version of ChatContainer
You prefer a panel that can overlay the page or live inline in the layout
You need resizable width and easy open/close behavior

Inline vs Overlay

Inline mode inserts a resizable panel in your layout
Overlay mode slides in from left/right and can show a backdrop on mobile


import { ChatPopout } from "ai-chat-bootstrap";
 
export function App() {
  return (
    <>
      {/* Inline mode */}
      <ChatPopout
        transport={{ api: "/api/chat" }}
        messages={{ systemPrompt: "You are a helpful assistant." }}
        header={{ title: "Assistant" }}
        ui={{ placeholder: "Ask me anything..." }}
        popout={{ mode: "inline", position: "right", width: { default: 420 } }}
      />
 
      {/* Overlay mode (left) */}
      <ChatPopout
        transport={{ api: "/api/chat" }}
        messages={{ systemPrompt: "You are a helpful assistant." }}
        header={{ title: "Assistant" }}
        ui={{ placeholder: "Ask me anything..." }}
        popout={{ mode: "overlay", position: "left", width: { default: 480, min: 360, max: 640 }, height: "100%" }}
      />
    </>
  );
}

Props overview

header: title, subtitle, actions, etc.
ui: placeholder, emptyState, classes
popout: mode, position, width, height, className
button: show, label, icon, className
suggestions and commands: enable built-in suggestions and command actions

Demo reference

Landing page popout that switches between overlay and inline modes: packages/ai-chat-bootstrap-demo/src/app/page.tsx
Command-driven mode switcher wired into the popout: packages/ai-chat-bootstrap-demo/src/hooks/use-demo-ai.ts

Continue to Chat with Tools →