showcase/shell-docs/src/content/reference/vue/components/CopilotSidebar.mdx
CopilotSidebar renders a fixed sidebar panel for chat interaction. It wraps CopilotChat and provides sidebar-specific layout and open/close behavior. The sidebar includes a header with a title and a close button, and can be toggled via a floating toggle button.
Because it builds on CopilotChat, it resolves the agent, subscribes to messages and running state, manages suggestions, and wires input and transcription for you. You typically only need to pick the agent and, optionally, set the initial open state, width, or override one of the named slots.
<script setup lang="ts">
import { CopilotSidebar } from "@copilotkit/vue/v2";
import "@copilotkit/vue/styles.css";
</script>
All reactive props are declared with defineProps. CopilotSidebar extends the CopilotChat props (and through them the inherited CopilotChatView props) and adds two of its own.
CopilotSidebar re-emits the chat events from CopilotChat (listen with @event-name in templates). These fire in addition to the component's internal handling.
| Event | Payload | Fired when |
|---|---|---|
submit-message | value: string | A message is submitted |
stop | none | The stop button is pressed |
input-change | value: string | The input value changes |
select-suggestion | suggestion: Suggestion, index: number | A suggestion pill is selected |
add-file | none | The add-file action is triggered |
start-transcribe | none | Audio transcription starts |
cancel-transcribe | none | Audio transcription is cancelled |
finish-transcribe | none | Audio transcription finishes |
Vue uses named slots in place of React's render props and sub-component props. Provide a slot to replace the corresponding piece of the sidebar. Each slot receives scoped props you can destructure with v-slot.
<script setup lang="ts">
import { CopilotSidebar } from "@copilotkit/vue/v2";
import "@copilotkit/vue/styles.css";
</script>
<template>
<CopilotSidebar
agent-id="my-agent"
:labels="{ chatInputPlaceholder: 'Ask me anything...' }"
/>
</template>
<script setup lang="ts">
import { CopilotSidebar } from "@copilotkit/vue/v2";
</script>
<template>
<CopilotSidebar agent-id="my-agent" :default-open="false" :width="500" />
</template>
<script setup lang="ts">
import { CopilotSidebar } from "@copilotkit/vue/v2";
</script>
<template>
<CopilotSidebar agent-id="my-agent">
<template #header="{ title, onClose }">
<div class="flex items-center justify-between bg-indigo-700 px-4 py-3 text-white">
<span>{{ title }}</span>
<button @click="onClose">Close</button>
</div>
</template>
</CopilotSidebar>
</template>
<script setup lang="ts">
import { CopilotSidebar } from "@copilotkit/vue/v2";
</script>
<template>
<CopilotSidebar agent-id="my-agent">
<template #toggle-button="{ isOpen, toggle }">
<button class="fixed bottom-6 right-6" @click="toggle">
{{ isOpen ? "Close chat" : "Open chat" }}
</button>
</template>
</CopilotSidebar>
</template>
<script setup lang="ts">
import { CopilotSidebar } from "@copilotkit/vue/v2";
function onSubmit(value: string) {
console.log("user submitted:", value);
}
</script>
<template>
<CopilotSidebar agent-id="my-agent" @submit-message="onSubmit" />
</template>
CopilotChat - the base chat component used internallyCopilotKitProvider - provides the agent configuration CopilotSidebar connects touseAgent - composable used internally to resolve the agent