vue-ai-chat-kit

A modern, lightweight, framework-agnostic Vue 3 AI Chatbot & Conversation Kit.

Features streaming messages, session history sidebar, prompt suggestions, code block highlighting with one-click copy, and minimal required-key contracts.

npm i vue-ai-chat-kit vue

import { AiChatContainer, useAiChat } from 'vue-ai-chat-kit'
import 'vue-ai-chat-kit/style.css'

GitHub Package: @mferasatali/vue-ai-chat-kit

npm i @mferasatali/vue-ai-chat-kit --registry=https://npm.pkg.github.com

Preview

Required Keys

| Surface | Required Keys | Optional Keys | | --- | --- | --- | | Message | id, role, content | createdAt, name, avatar, thinking, isStreaming, error, meta | | Session | id, title | createdAt, updatedAt, messageCount, lastMessage | | Suggestion | id, label, prompt | icon, category |

Quick Example

<template>
  <AiChatContainer
    :messages="messages"
    :sessions="sessions"
    :active-session-id="activeSessionId"
    :suggestions="suggestions"
    :is-generating="isGenerating"
    :persona="{ name: 'Copilot', roleDescription: 'LLM Agent' }"
    @send="send"
    @stop="stopGeneration"
    @new-session="createNewSession('New Chat')"
    @select-session="activeSessionId = $event.id"
    @delete-session="deleteSession($event.id)"
  />
</template>

<script setup lang="ts">
import { AiChatContainer, useAiChat } from 'vue-ai-chat-kit'

const {
  messages,
  sessions,
  activeSessionId,
  isGenerating,
  send,
  stopGeneration,
  createNewSession,
  deleteSession,
} = useAiChat({
  onSendMessage: async (userMessage) => {
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ prompt: userMessage.content }),
    })
    const data = await res.json()
    return data.reply
  },
})
</script>

Included Components & Composables

• <AiChatContainer />: Complete layout with header, feed, auto-scroll, sidebar, and textarea.
• <AiMessageBubble />: Individual message bubble with markdown formatting, thinking block, code block copy, and timestamps.
• <AiSessionSidebar />: History sessions sidebar with search, select, create, and delete actions.
• <AiPromptSuggestions />: Quick starter prompt cards.
• <AiTypingIndicator />: Animated typing pulse for streaming state.
• useAiChat(options): Composable to manage messages, sessions, streaming chunks, and abort controllers.

Local Playground & Development

npm install
npm run dev

Build & Test

npm test
npm run build

License

MIT © Muhammad Ferasat Ali