@aleph-alpha/chat-kit
Chat kit for building chat interfaces with Vue. Ships components, handlers (message tree via useMessageHandler, markdown, labels — from the package root or @aleph-alpha/chat-kit/handlers), a composables entry for useChat (under development), and a services layer for backends (under development).
Part of the frontend-hub monorepo.
Installation
pnpm add @aleph-alpha/chat-kit
Architecture
Chat Kit is organised into three layers:
- Components — Pre-built Vue 3 components for chat UIs, split into base (presentational) and composed (opinionated patterns).
- Handlers — Reactive utilities for chat state management:
useMessageHandler(conversation tree),useMarkdownParser(markdown pipeline),useChatKitLabels(i18n). - Services (under development) — Abstract
ChatService/IChatServicefor backend communication and streaming. Not ready for production use.
useChat (under development) lives in composables/ as a planned high-level orchestrator that composes handlers and services into a single API
Usage
Import from specific entry points for tree-shaking:
// Services only
import { ChatService, type IChatService } from '@aleph-alpha/chat-kit/services';
// Handlers only
import { useMessageHandler } from '@aleph-alpha/chat-kit/handlers';
// Composables only
import { useChat } from '@aleph-alpha/chat-kit/composables';
// Components only
import { CkConversation } from '@aleph-alpha/chat-kit/components';
// Everything
import { ChatService, useChat, CkConversation } from '@aleph-alpha/chat-kit';
Development
This package lives in the frontend-hub monorepo. To work on it locally:
git clone [email protected]:Aleph-Alpha/frontend-hub.git
cd frontend-hub
pnpm install
# Run tests
pnpm nx run chat-kit:test
# Lint
pnpm nx run chat-kit:lint
# Storybook
pnpm nx run chat-kit:storybook
Documentation
- Overview — Architecture and features
- Quick Start — Install and minimal chat UI
- Handlers and Services — Message state, markdown, labels, services
- API Reference — Public exports (components, handlers, composables, services, types)
- CI/CD Flow — Release process and PR checks
- Storybook Deployment — Preview and production Storybook
License
MIT.