CopilotPopup

Floating chat bubble that toggles open an overlay chat window.

Not available for Claude Agent SDK (TypeScript) yet

This feature (prebuilt-popup) hasn't been tagged in any Claude Agent SDK (TypeScript) cell yet. Try LangGraph (Python) instead, or browse the framework-agnostic version.

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.

Live Demo: LangGraph (Python) — prebuilt-popupOpen full demo →

Basic setup

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

Missing snippet

No demo found for claude-sdk-typescript::prebuilt-popup. Known demos are bundled from manifest demos[i]; check the cell id and framework slug.

Configuring the popup

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

Prop	Description
`defaultOpen`	Whether the popup starts open on first render.
`agentId`	Agent slug the popup should talk to (must match an agent configured on the runtime).
`labels`	User-facing copy for the header, placeholder, and disclaimer.
`header`	Slot for the popup header bar — see the slot system.
`toggleButton`	Slot for the floating launcher button.

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.

<CopilotPopup
  agentId="my-agent"
  defaultOpen={false}
  labels={{
    modalHeaderTitle: "Popup Assistant",
    welcomeMessageText: "Need any help?",
    chatInputPlaceholder: "Ask the popup anything...",
  }}
/>