Stackhacker UI Chat is a starter kit for adding chat UI pieces to a shadcn-vue Nuxt project.
Unlike an integrated UI module, these registry items are installed as source code in your app. You can read them, change them, and compose them with your own AI SDK state, server endpoints, markdown rendering, files, tools, and auth.
Components
| Component | Description |
|---|---|
| ChatMessages | Message list component with loading state, optional auto-scroll, and assistant actions. |
| ChatMessage | Individual message bubble component with content slots, leading content, and action buttons. |
| ChatPrompt | Prompt input wrapper for composing text areas, errors, and footer controls. |
| ChatPromptSubmit | Status-aware submit, stop, and retry button for prompt workflows. |
Install
Install the message list when you want the primary display surface. It also installs ChatMessage because the list composes individual messages.
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
Install prompt pieces when you want the input surface.
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json" pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt-submit.json"
Basic Composition
<script setup lang="ts">
import { ChatMessages } from '@/components/chat-messages'
import { ChatPrompt } from '@/components/chat-prompt'
import { ChatPromptSubmit } from '@/components/chat-prompt-submit'
</script>
<template>
<div class="flex min-h-0 flex-1 flex-col gap-4">
<ChatMessages :messages="messages" :status="status" should-auto-scroll />
<ChatPrompt v-model="input" @submit="sendMessage">
<template #footer>
<ChatPromptSubmit :status="status" @stop="stop" @reload="reload" />
</template>
</ChatPrompt>
</div>
</template>App Responsibilities
The registry items handle the UI boundaries. Your Nuxt app still owns the chat runtime:
- AI SDK client state and message sending.
- Server API endpoints and model provider setup.
- Markdown, reasoning, tool, and file rendering.
- Auth, persistence, layout, and deployment behavior.
Use the component slots to connect those app-level concerns without turning the registry components into a full chat framework.