Usage
The ChatPrompt component renders a <form> element and extends the Textarea component so you can pass any property such as icon, placeholder, autofocus, etc.
The ChatPrompt handles the following events:
- The form is submitted when the user presses ↵ or when the user clicks on the submit button.
- The textarea is blurred when Esc is pressed and emits a
closeevent.
Variant
Use the variant prop to change the style of the prompt. Defaults to outline.
<template>
<UChatPrompt variant="soft" />
</template>
Examples
Within a page
Use the ChatPrompt component with the useChat composable to display a chat prompt within a page.
Pass the input prop alongside the error prop to disable the textarea when an error occurs.
pages/[id].vue
<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
</script>
<template>
<UDashboardPanel>
<template #body>
<UContainer>
<UChatMessages :messages="messages" :status="status">
<template #content="{ message }">
<MDC :value="message.content" :cache-key="message.id" unwrap="p" />
</template>
</UChatMessages>
</UContainer>
</template>
<template #footer>
<UContainer>
<UChatPrompt v-model="input" :error="error" @submit="handleSubmit">
<UChatPromptSubmit :status="status" @stop="stop" @reload="reload" />
</UChatPrompt>
</UContainer>
</template>
</UDashboardPanel>
</template>
You can also use it as a starting point for a chat interface.
pages/index.vue
<script setup lang="ts">
const input = ref('')
const loading = ref(false)
async function onSubmit() {
loading.value = true
const chat = await $fetch('/api/chats', {
method: 'POST',
body: { input }
})
navigateTo(`/chat/${chat.id}`)
}
</script>
<template>
<UDashboardPanel>
<template #body>
<UContainer>
<h1>How can I help you today?</h1>
<UChatPrompt v-model="input" :status="loading ? 'streaming' : 'ready'" @submit="onSubmit">
<UChatPromptSubmit />
</UChatPrompt>
</UContainer>
</template>
</UDashboardPanel>
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Theme
app.config.ts
export default defineAppConfig({
uiPro: {
chatPrompt: {
slots: {
root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
header: 'flex items-center gap-1.5',
body: 'items-start',
footer: 'flex items-center justify-between gap-1.5',
base: 'text-base/5'
},
variants: {
variant: {
outline: {
root: 'bg-default/75 ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
},
naked: {
root: ''
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
chatPrompt: {
slots: {
root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
header: 'flex items-center gap-1.5',
body: 'items-start',
footer: 'flex items-center justify-between gap-1.5',
base: 'text-base/5'
},
variants: {
variant: {
outline: {
root: 'bg-default/75 ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
},
naked: {
root: ''
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
chatPrompt: {
slots: {
root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
header: 'flex items-center gap-1.5',
body: 'items-start',
footer: 'flex items-center justify-between gap-1.5',
base: 'text-base/5'
},
variants: {
variant: {
outline: {
root: 'bg-default/75 ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
},
naked: {
root: ''
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})