Welcome to the LobeChat technical development getting started guide. LobeChat is an AI conversation application built on the Next.js framework, which integrates a series of technology stacks to achieve diverse functions and features. This guide will provide a detailed introduction to the main technical components of LobeChat and how to configure and use these technologies in your development environment.
The core technology stack of LobeChat includes:
- Framework: We have chosen Next.js, a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler for our project.
- Component Library: We use Ant Design (antd) as the basic component library, and also introduce lobe-ui as our business component library.
- State Management: We have opted for zustand, a lightweight and easy-to-use state management library.
- Network Requests: We use swr, a React Hooks library for data fetching.
- Routing: For routing management, we directly use the solution provided by Next.js itself.
- Internationalization: We use i18next to implement multi-language support for the application.
- Styling: We use antd-style, a CSS-in-JS library that complements Ant Design.
- Unit Testing: We use vitest for unit testing.
The folder directory structure of LobeChat is as follows:
src
├── app # Main logic of the application and code related to state management
├── components # Reusable UI components
├── config # Application configuration files, including client-side environment variables and server-side environment variables
├── const # Used to define constants, such as action types, route names, etc.
├── features # Function modules related to business features, such as Agent settings, plugin development pop-ups, etc.
├── hooks # Custom utility hooks reused throughout the application
├── layout # Application layout components, such as navigation bars, sidebars, etc.
├── locales # Language files for internationalization
├── services # Encapsulated backend service interfaces, such as HTTP requests
├── store # Zustand store for state management
├── types # TypeScript type definition files
└── utils # Common utility functionsFor a detailed introduction to the directory structure, please refer to: Folder Directory Structure