Codebase structure
The Chatbot Kit codebase is organized into several key directories, each serving a specific purpose. The framework used is Next.js with the page-based routing system.
Here's a high-level overview of the structure:
/chatbot-kit ├── /backend # Files related to the backend API ├── /public # Static assets ├── /src # Source code of the Next.js application ├── ├── /components # Reusable UI and 3D components │ ├── /pages # Route pages for each scenario/template │ ├── /store # All the code related to the AI engine │ ├── /common # Shared utilities and components │ ├── /styles # Global styles and themes │ └── /utils # Utility functions
Let's navigate through the core directories to understand their purpose.
/backend
Contains all the files for the deployment and n8n workflows. Refer to the getting started guide for more information.
/public
This directory contains static assets such as audios, images, fonts, 3D models, and other files that are served directly to the client. These files are not processed by Webpack and are available at the root URL of the application.
For production consider using a CDN to serve these assets for better performance and scalability. More details can be found in the deployment overview.
/public/models
This directory contains the different royalty-free scenes and avatars you can reuse your projects. We have created a variety of 3D models and environments that can be easily integrated into your applications.
/models ├── /spaces # 3D environments and scenes ├── ├── /space-name │ ├── scene.glb # 3D scene file │ ├── thumbnail.webp # Thumbnail image for the scene ├── /avatars # 3D avatars ├── ├── /avatar-name │ ├── avatar.glb # 3D avatar file │ ├── portrait.webp # Portrait image for the avatar │ ├── profile.webp # Full body image for the avatar ├── /animations # 3D animation files
More details on how they are built in the scene and avatars & animations sections.
If you need specific models, animations, or assets, feel free to reach out to our team for custom requests at contact@wawasensei.dev.
/src
/src/components
This directory contains all the React components used in the application, including both UI components and 3D components built with React Three Fiber.
The structure is as follows:
/src ├── /components ├── ├── /core # Core components used across different templates │ ├── ├── /3d # 3D components │ ├── ├── /ui # UI components ├── ├── /template-name # Components specific to each template/scenario │ ├── ├── /3d # 3D components │ ├── ├── /ui # UI components
/src/pages
This directory contains the route pages for each scenario/template. Each subdirectory corresponds to a specific template and contains the necessary files to render that template.
/src ├── /pages │ ├── /index.js # Main gate to the different templates │ ├── /template-name # Route pages for the specific template │ ├── ├── /index.js # Main page for the template/scenario
You will find more details about the components on the dedicated documentation pages for the different customization features.
/src/store
Contains the state management logic for the application named AI Engine.