CopilotKit

CopilotChatView

Vue 3 layout component that combines a scrollable transcript with the input area

Overview

CopilotChatView is a Vue 3 component that combines a scrollable message transcript with the chat input area, suggestion pills, a scroll-to-bottom button, an attachment queue, and an optional welcome screen. It is the visual core of the chat interface and is used internally by the higher-level chat components in @copilotkit/vue.

Every visual piece of CopilotChatView is exposed as a named slot, so you can replace, style, or extend any part of the layout (this is the Vue equivalent of React's render-prop sub-component customization). The component drives its own behavior (auto-scroll, mobile keyboard handling, resize observation) and emits events for the actions a parent needs to handle.

Import

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

CopilotChatView is a controlled, presentational component. It does not own the messages, agent state, or input value. When you use it standalone you must supply messages, react to its emitted events, and (optionally) drive the input value yourself.

Example

<script setup lang="ts">
import { ref } from "vue";
import { CopilotChatView } from "@copilotkit/vue/v2";
import type { Message } from "@ag-ui/core";

const messages = ref<Message[]>([]);
const isRunning = ref(false);

function handleSubmit(value: string) {
  // append the user message, kick off your agent run, etc.
}
</script>

<template>
  <CopilotChatView
    :messages="messages"
    :is-running="isRunning"
    auto-scroll="pin-to-bottom"
    @submit-message="handleSubmit"
  />
</template>

Props

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Events

CopilotChatView emits the following events. Listen with @event-name in the template.

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Slots

Each named slot has a sensible default. Override a slot to replace, restyle, or extend that part of the layout. Slots receive scoped props (data and handlers) that the default implementation also consumes, so a replacement can reuse them.

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Usage

Standalone Usage

<script setup lang="ts">
import { ref } from "vue";
import { CopilotChatView } from "@copilotkit/vue/v2";
import type { Message } from "@ag-ui/core";

const messages = ref<Message[]>([]);
const isRunning = ref(false);
</script>

<template>
  <CopilotChatView :messages="messages" :is-running="isRunning" />
</template>

Controlling the Input Value

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

const inputValue = ref("");

function handleInputChange(value: string) {
  inputValue.value = value;
}

function handleSubmit(value: string) {
  // send the message, then clear the input
  inputValue.value = "";
}
</script>

<template>
  <CopilotChatView
    :input-value="inputValue"
    @input-change="handleInputChange"
    @submit-message="handleSubmit"
  />
</template>

Replacing a Slot

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

<template>
  <CopilotChatView :messages="messages" :is-running="isRunning">
    <template #welcome-message>
      <h1 class="text-2xl font-semibold">How can I help you today?</h1>
    </template>

    <template #scroll-to-bottom-button="{ onClick }">
      <button type="button" @click="onClick">Jump to latest</button>
    </template>
  </CopilotChatView>
</template>

Custom Input via the input Slot

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

<template>
  <CopilotChatView :messages="messages" :is-running="isRunning">
    <template #input="{ modelValue, onUpdateModelValue, onSubmitMessage }">
      <form @submit.prevent="onSubmitMessage(modelValue)">
        <input
          :value="modelValue"
          @input="onUpdateModelValue(($event.target as HTMLInputElement).value)"
        />
        <button type="submit">Send</button>
      </form>
    </template>
  </CopilotChatView>
</template>

Behavior

  • Auto-scroll: pin-to-bottom keeps the latest message visible while the user is at the bottom; pin-to-send anchors the latest user message near the top while the assistant streams. A scroll-to-bottom button appears when the user scrolls up.
  • Welcome screen: Rendered when messages is empty and the welcome screen is not suppressed by welcomeScreen="false", isConnecting, or hasExplicitThreadId. The welcome screen embeds the input and suggestion slots.
  • Input overlay positioning: The input is rendered in an absolutely positioned overlay at the bottom of the chat, and the scroll content is padded to avoid overlap. The component measures the overlay height with a ResizeObserver and keeps the padding in sync.
  • Mobile keyboard: The view tracks the on-screen keyboard height so the input can translate above the keyboard on mobile devices.

Related

  • useAgent -- access and subscribe to an AG-UI agent to drive the chat view
  • useSuggestions -- generate the suggestion pills shown by this view
  • useCopilotChatConfiguration -- read the labels (including the welcome message text) consumed by the default slots