Introduction
Welcome to the Chatbot Kit documentation. This is the place to get started with the Three.js starter kit to build your own 3D AI chatbot, learn about the structure, its features and how to use it.
What is Chatbot Kit?
Chatbot Kit is a fullstack boilerplate that helps you build production-ready 3D AI chatbots for the web. It comes with a set of pre-built components, features, and integrations that speed up development and reduce boilerplate code for your SaaS applications and chatbot projects.
Tech Stack & Architecture
While Chatbot Kit uses a specific tech stack, the real value lies in its implementation patterns and feature logic, which can be extracted and adapted to any framework or technology of your choice (Vue.js, Babylon.js, Angular, etc.).
The codebase demonstrates clear, production-ready implementations of complex features like:
- Lip-sync synchronization - timing and phoneme mapping logic
- Facial expression systems - emotion state management and transitions
- Message queue architecture - handling asynchronous communication flows
- Speech integration - TTS/STT coordination and fallback strategies
- Real-time animation - blending and interpolation techniques
Whether you use our exact stack or not, you can study how these features are architected and apply the same patterns to your preferred tools. The code is intentionally modular and well-documented to make this knowledge transfer straightforward.
Our Implementation Stack:
Three.js
Three.js is a JavaScript library that makes it easy to create 3D graphics for the web. We use it to render the 3D scenes and animated avatars in our chatbots.
React Three Fiber
React Three Fiber is a React renderer for Three.js that makes it easy to build 3D scenes using React components. We use it to speed up development and leverage pre-built components.
A Vanilla Three.js implementation would require more boilerplate code and manual management of the 3D scene graph but is also possible.
Next.js
Next.js is one of the most popular React frameworks for building server-rendered applications. We mainly use it for the overall application structure and routing.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows us to build custom designs without having to leave our HTML. We use it to create the UI components and layout for our chatbots.
Zustand
Zustand is a small, fast, and scalable bearbones state-management solution usable in Vanilla.js or any other framework. We use it for the AI engine responsible for managing the chatbot's state and logic.
Wawa LipSync
Wawa Lipsync a simple and easy-to-use library we developed in TypeScript for real-time lipsyncing with JS and web audio API. We use it to synchronize the avatar's lip movements with the spoken dialogue from any TTS engine.
n8n
n8n is an open-source workflow automation tool that allows you to connect various apps and services through a visual node-based interface. We use it as the core of our backend: API routes for chat, text-to-speech (TTS) integration, and workflows to generate the knowledge bases.
Qdrant
Qdrant is a vector search engine that allows you to store and search through large amounts of high-dimensional data. We use it to power the chatbot's knowledge base and enable fast, semantic search capabilities.
Valkey
Valkey is a free open-source fork from Redis that provides a simple and efficient key-value store for your applications. We use it to manage session memory and rate limiting.
Firecrawl
Firecrawl is a web scraping and data extraction tool that allows you to collect and analyze data from websites. We use it to gather information from various sources and populate the chatbot's knowledge base.
OpenAI
We use OpenAI for the LLM (Large Language Model) and TTS (Text-to-Speech) capabilities in our chatbots. Thanks to n8n, you can easily change to different LLM and TTS providers as needed.