CopilotChat

Overview

CopilotChat is a high-level chat container that wires an agent into CopilotChatView while providing configuration context. It resolves the agent via useAgent, subscribes to the agent's messages and running state, manages suggestions, handles input value and audio transcription, wires file attachments, and auto-clears the input after a message is submitted.

You typically only need to specify which agent to connect and, optionally, customize labels or override one of the named slots.

Import

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

Props

All reactive props are declared with defineProps. CopilotChat extends CopilotChatView props but omits the ones it manages internally (messages, isRunning, suggestions, suggestionLoadingIndexes, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop).

Own props

Inherited CopilotChatView props

Events

CopilotChat emits the following events (listen with @event-name in templates). These fire in addition to the component's internal handling, so you can observe interactions without disabling default behavior.

Slots

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 chat. Each slot receives scoped props you can destructure with v-slot. Any slot not listed below is forwarded down through CopilotChatView to the message view.

Usage

Basic usage

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

<template>
  <CopilotChat
    agent-id="my-agent"
    :labels="{ chatInputPlaceholder: 'Ask me anything...' }"
  />
</template>

Custom welcome screen

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

<template>
  <CopilotChat agent-id="my-agent">
    <template #welcome-screen="{ onSubmitMessage, suggestions, onSelectSuggestion }">
      <div class="flex h-full flex-col items-center justify-center gap-4">
        <h2>Welcome to the assistant</h2>
        <button
          v-for="(suggestion, index) in suggestions"
          :key="index"
          @click="onSelectSuggestion(suggestion, index)"
        >
          {{ suggestion.title }}
        </button>
      </div>
    </template>
  </CopilotChat>
</template>

Observing events

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

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

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

Using the layout directly

CopilotChat.View is the layout component without agent wiring. Use it when you manage messages and handlers yourself.

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

// Vue SFC templates cannot resolve dotted tags like `<CopilotChat.View>`,
// so alias the layout to a local component first.
const ChatView = CopilotChat.View;

const messages = ref([]);

function handleSubmit(value: string) {
  // manage your own message state
}
</script>

<template>
  <ChatView :messages="messages" @submit-message="handleSubmit" />
</template>

Related

• CopilotChatView - the layout component used internally (also exposed as CopilotChat.View)
• useAgent - composable used internally to resolve the agent
• useSuggestions - composable that powers the suggestion pills
• useCopilotChatConfiguration - reads the labels, agent id, and thread id provided by CopilotChat