Get started
Vue quick start
Native Vue shell for the same ChatDefinition.
Vue quick start
Install
code
pnpm add @agentskit/chat @agentskit/core @agentskit/vue vueTo inspect a complete application first, generate a repository from the standalone Vue template. The template uses a credential-free streaming adapter, so cancellation and error handling work before you configure a model provider.
Shell
code
<script setup lang="ts">
import { AgentChat } from '@agentskit/chat/vue'
import { createSupportChat } from './support-chat'
import { adapter } from './adapter'
const definition = createSupportChat(adapter)
</script>
<template>
<AgentChat :definition="definition" placeholder="Ask about the product">
<template #message="{ message }">
<article :data-role="message.role">{{ message.content }}</article>
</template>
</AgentChat>
</template>State, streaming, tools, and lifecycle come from useChat in @agentskit/vue. Scoped slots: container, message, input, thinking, confirmation, choiceList.
Shared definition
Keep createSupportChat framework-neutral — see React quick start for the defineChat module.