showcase/shell-docs/src/content/reference/vue/components/CopilotPopup.mdx
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.
<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";
</script>
<template>
<CopilotPopup
agent-id="my-agent"
:labels="{ modalHeaderTitle: 'Assistant' }"
/>
</template>
CopilotPopup extends CopilotChatProps, so it accepts the same agent-wiring and chat-view props. The most common ones:
All slots are forwarded down to the internal CopilotPopupView. Each slot receives scoped props you can bind to.
CopilotPopup emits the following events (use kebab-case in templates):
| Event | Payload |
|---|---|
submit-message | value: string |
stop | (none) |
input-change | value: string |
select-suggestion | suggestion: Suggestion, index: number |
add-file | (none) |
start-transcribe | (none) |
cancel-transcribe | (none) |
finish-transcribe | (none) |
<script setup lang="ts">
import { CopilotPopup } from "@copilotkit/vue/v2";
</script>
<template>
<CopilotPopup
agent-id="my-agent"
:labels="{ modalHeaderTitle: 'Assistant' }"
/>
</template>
<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>
<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>
<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>
toggle-button slot.defaultOpen; after mount, state changes come from user interaction (toggle button, close button, clicking outside).clickOutsideToClose is true, clicking outside the popup panel closes it. The default is false.CopilotPopupView, which provides a popup-specific welcome screen layout.CopilotChat.CopilotChat -- the base chat component used internallyCopilotKitProvider -- supplies the copilot contextuseAgent -- composable for accessing the agent instance