CopilotPopup

# Agent implementation for Prebuilt Popup# The LlamaIndex agent is defined in src/agents/agent.py# The prebuilt_popup agent name is registered in src/app/api/copilotkit/route.ts.

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.

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:

    <CopilotKit runtimeUrl="/api/copilotkit" agent="prebuilt_popup">      <MainContent />      <CopilotPopup        agentId="prebuilt_popup"        defaultOpen={true}        labels={{ chatInputPlaceholder: "Ask the popup anything..." }}      />      <Suggestions />    </CopilotKit>

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.