CopilotKit

CopilotPopup

Floating Vue chat launcher that opens an overlay window.

Open your coding agent in your project's folder, or in an empty folder for a new app.This runs in a coding agent on your computer.

What is this?#

<CopilotPopup> is a floating launcher that opens a chat window over the page. It is the compact way to add a copilot without dedicating layout space to an always-visible panel.

When should I use this?#

Use the popup for task-focused chats that users open on demand. Use CopilotSidebar when the chat belongs beside the workspace, or <CopilotChat> when it belongs in the document flow.

Basic setup#

App.vue
<script setup lang="ts">
import { CopilotKitProvider, CopilotPopup } from "@copilotkit/vue/v2";
import "@copilotkit/vue/styles.css";
</script>

<template>
  <CopilotKitProvider runtime-url="/api/copilotkit">
    <main><!-- Your application --></main>
    <CopilotPopup agent-id="my-agent" :default-open="false" />
  </CopilotKitProvider>
</template>

Configuring the popup#

Alongside the shared chat props, CopilotPopup accepts width, height, default-open, and click-outside-to-close. Its header and toggle-button scoped slots receive the popup state and open/close actions. The component also forwards the regular chat interaction events.

Styling#

See CSS customization for token overrides and slots for template-level replacement of popup pieces.

On this page

What is this?When should I use this?Basic setupConfiguring the popupStyling