VuChat (Moscow)

Description

VuChat is a React-based UI component library that provides an embeddable AI chat widget. It is designed to be consumed by other React applications and handles the full conversational interface — including chat sessions, AI responses, data visualizations, and user feedback.

Key features:

• Conversation management — create, browse, and delete chat sessions with paginated history
• AI response rendering — displays rich responses with copy, like/dislike feedback, and PDF export
• Charts — renders bar, line, pie, and single-stat charts powered by Nivo, with light/dark theme support
• Dark mode — full dark mode support toggled via a prop
• Authentication — JWT token-based auth passed through to the backend API

Tech stack: React 18, TypeScript, Tailwind CSS, React Query, Nivo Charts, React Router DOM v5, Rollup

Get Started

Dependencies:

1. Node: >=20.9.0
2. NPM: >=10.2.3
3. Yarn: 3.6.4
4. Yalc

Development

You must have yarn and yalc installed for running. Yalc must be installed globally, information regarding this can be found in this link.

1. yarn dev to create a build and push to yalc store.
2. Navigate to application where you want to use this package. Open terminal on that folder. Install yalc as devDependency.
3. Use this command to add package yalc add vuchat.
4. Add the code related to package in the application and start the application.
5. To update the package for changes, first run yarn dev in package folder to push latest changes to local store.
6. Then in application, where it's used, run yalc update vuchat and restart the application.