CopilotPopup

What is this?#

<CopilotPopup> is a prebuilt floating launcher that opens an overlay chat window on top of your page content. It's the lightest-weight way to add a copilot to an existing app. Drop it in once and a bubble appears in the corner ready to chat.

When should I use this?#

Use the popup when you want:

• A minimal-footprint copilot that overlays existing content on demand
• A launcher you can place on top of any page without reflowing the layout
• A quick assistant bubble that users open for short, task-focused chats

If you need chat to live alongside your content rather than on top of it, use CopilotSidebar. For a fully embedded chat pane, use <CopilotChat> directly.

Here's the popup in action. Click the launcher button to open the chat:

The gif below shows the popup launcher toggling open over page content:

Basic setup#

Wrap your app in <CopilotKit> once (the provider wires the runtime, session, and agent registry) and render <CopilotPopup> as a sibling of your main content. The example below opens the popup by default and customizes the input placeholder via labels:

    <CopilotKitProvider runtimeUrl="/api/copilotkit" useSingleEndpoint>
      <MainContent />
      <CopilotPopup
        agentId="default"
        defaultOpen={true}
        labels={{
          chatInputPlaceholder: "Ask the popup anything...",
        }}
      />
      <Suggestions />
    </CopilotKitProvider>

Configuring the popup#

<CopilotPopup> accepts the same props as <CopilotChat> plus a few of its own. Commonly used options:

Styling#

CopilotPopup participates in the slot system, so every piece of its UI is customizable, from Tailwind classes on the message view to a full component swap for the header or toggle button. See custom look and feel for the full slot reference.