Skip to content

1.chat.md

Latest commit

 

History

History
73 lines (54 loc) · 2.81 KB

1.chat.md

File metadata and controls

73 lines (54 loc) · 2.81 KB
Raw
title Chat
description Build Nuxt chat interfaces with installable shadcn-vue components you own and compose.
category chat

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.
ReasoningDisclosure Collapsible disclosure for app-owned AI reasoning text.

Install

Install the message list when you want the primary display surface. It also installs ChatMessage because the list composes individual messages.

npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"

Install prompt pieces when you want the input surface.

npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json"
npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt-submit.json"

Install reasoning disclosure when you want to show app-owned reasoning text.

npx shadcn-vue@latest add "https://ui.stackhacker.io/r/reasoning-disclosure.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.