CopilotPopup

CopilotPopup renders a floating chat popup with a toggle button. It wraps CopilotChat and provides popup-specific layout, sizing, and open/close behavior. The popup includes a header with a title and close button, and can optionally be dismissed by clicking outside.

The "popup" feature requires a license. When it is not licensed, the component renders an inline warning and logs a console warning; see copilotkit.ai/pricing.

Example

<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";
</script>

<template>
  <CopilotPopup
    agent-id="my-agent"
    :labels="{ modalHeaderTitle: 'Assistant' }"
  />
</template>

Props

Own props

Inherited CopilotChat props

CopilotPopup extends CopilotChatProps, so it accepts the same agent-wiring and chat-view props. The most common ones:

Slots

All slots are forwarded down to the internal CopilotPopupView. Each slot receives scoped props you can bind to.

Events

CopilotPopup emits the following events (use kebab-case in templates):

Usage

Basic usage

<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";
</script>

<template>
  <CopilotPopup
    agent-id="my-agent"
    :labels="{ modalHeaderTitle: 'Assistant' }"
  />
</template>

Custom size and click-outside-to-close

<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";
</script>

<template>
  <CopilotPopup
    agent-id="my-agent"
    :default-open="false"
    :width="450"
    height="80vh"
    :click-outside-to-close="true"
  />
</template>

Custom header slot

<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";
</script>

<template>
  <CopilotPopup agent-id="my-agent">
    <template #header="{ title, onClose }">
      <div class="flex items-center justify-between bg-blue-600 px-4 py-2 text-white">
        <span>{{ title }}</span>
        <button type="button" @click="onClose">Close</button>
      </div>
    </template>
  </CopilotPopup>
</template>

Handling events

<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";

function onSubmit(value: string) {
  console.log("submitted:", value);
}
</script>

<template>
  <CopilotPopup agent-id="my-agent" @submit-message="onSubmit" />
</template>

Behavior

• Toggle button: Renders a floating toggle button that opens and closes the popup. Override it with the toggle-button slot.
• Modal state: The initial state is set by defaultOpen; after mount, state changes come from user interaction (toggle button, close button, clicking outside).
• Click outside: When clickOutsideToClose is true, clicking outside the popup panel closes it. The default is false.
• Layout: Internally uses CopilotPopupView, which provides a popup-specific welcome screen layout.
• Agent connection: All agent wiring (messages, running state, suggestions) is handled by the inner CopilotChat.

Related

• CopilotChat -- the base chat component used internally
• CopilotKitProvider -- supplies the copilot context
• useAgent -- composable for accessing the agent instance