XiaoZhi AI Code

Visual Studio Code

Windows

First, download Visual Studio Code by visiting https://code.visualstudio.com/Download. Choose the appropriate version for your operating system, then download and install it.

../../../_images/xiaozhi00.png

Double-click the downloaded .exe file to run it.

Check the box for “I accept the agreement.”

Then click Next.

../../../_images/xiaozhi01.png

The installation location can be left as the default or changed to a desired path. After that, proceed by clicking Next repeatedly.

../../../_images/xiaozhi02.png

On this screen, verify that “Add to PATH” is selected. If unchecked, enable it. Proceed by clicking Next repeatedly to finish the installation.

../../../_images/xiaozhi03.png

The installation is now complete, as shown in the image below.

../../../_images/xiaozhi04.png

Mac

Typically, MacOS comes with Visual Studio Code pre-installed. If your computer does not have it, please install it first.

Visit https://code.visualstudio.com and click “Download for macOS”.

../../../_images/xiaozhi05.png

Double click to run the program.

../../../_images/xiaozhi06.png

Linux

If your computer does not have Visual Studio Code, please install it first.

Visit https://code.visualstudio.com and click “.deb”.

../../../_images/xiaozhi07.png

Open the downloaded“code_xxx.deb” file.

../../../_images/xiaozhi08.png

Click “Install” to install Visual Studio Code.

../../../_images/xiaozhi09.png

Wait for the installation to complete. Once finished, it should look like the image below.

../../../_images/xiaozhi10.png

Click Show Apps and you can see the Visual Studio Code is in the system.

../../../_images/xiaozhi11.png

Installing ESP-IDF V5.3.2

Visual Studio Code is a versatile code editor. To program with the ESP-IDF SDK, we need to install the ESP-IDF extension for it.

Open Visual Studio Code.

Click on the menu bar: File -> Preferences -> Extensions.

../../../_images/xiaozhi12.png

Mac OS: Click “Code” -> ”Preferences” -> ”Extensions” on the menu bar.

../../../_images/xiaozhi13.png

Search for “ESP-IDF” in the extension bar, select the correct result from the list, then click the Install button to proceed.

../../../_images/xiaozhi14.png

The ESP-IDF extension icon will now appear in the left sidebar - click it to continue.

../../../_images/xiaozhi15.png

Scroll down with your mouse, locate and click on the “Advanced” option.

../../../_images/xiaozhi16.png

Click the first option: “Configure ESP-IDF Extension”.

../../../_images/xiaozhi17.png

Select “EXPRESS” on the right.

../../../_images/xiaozhi18.png

Note

If you’re using macOS or Ubuntu, please complete the necessary preparations as prompted before proceeding with installation.

../../../_images/xiaozhi19.png
  1. Check the box for “Show all ESP-IDF tags”

  2. Select “v5.3.2 (release version)” from the dropdown

  3. Choose your desired installation path for the ESP-IDF environment

  4. Click “Install” to begin the setup

../../../_images/xiaozhi20.png

The process will complete automatically.

If it failed, locate your chosen ESP-IDF directory, remove the failed installation folder and install it again.

../../../_images/xiaozhi21.png

This step may take a while, so please ensure you have a stable and fast internet connection.

The complete installation is as shown below.

../../../_images/xiaozhi22.png

For more about ESP-IDF, please refer to

https://docs.espressif.com/projects/vscode-esp-idf-extension/en/latest/installation.html

Code Downloading

Windows

Open a browser on your computer and enter “https://github.com/Freenove/xiaozhi-esp32”.

../../../_images/xiaozhi23.png

Click “Code” -> “Download ZIP” to download the code to your computer.

../../../_images/xiaozhi24.png

Extract the downloaded zip file to your computer. Rename the decompressed folder to “xiaozhi-esp32”.

../../../_images/xiaozhi25.png

Mac

Open the terminal and download the code with the git command.

git clone https://github.com/Freenove/xiaozhi-esp32.git
../../../_images/xiaozhi26.png

Linux

Open the terminal and download the code with the git command.

git clone https://github.com/Freenove/xiaozhi-esp32.git

../../../_images/xiaozhi27.png

Configure Code Environment

Extract the downloaded ZIP file.

On Visual Studio Code, click “File” -> “Open Folder…”.

../../../_images/xiaozhi28.png

Select the xiaozhi-esp32 folder. Here, the interface of the Windows system is taken as an example. The operation of the mac system is similar to that of Linux.

../../../_images/xiaozhi29.png

Check the box “Trust the authors of all files in the parent folder “Downloads” and select “Yes, I trust the authors”.

../../../_images/xiaozhi30.png

Please note: A pop-up notification will appear in the lower-right corner. Click ‘Generate comple_commands.json’, and it will download the corresponding component module code based on the file.”

../../../_images/xiaozhi31.png

Component installation may take some time. Please wait and avoid other operations. A completion notification will appear in the lower-right corner once finished.

../../../_images/xiaozhi32.png

Connect the Freenove ESP32-S3 Display to your computer using a USB cable.

Click on ‘COMx’ in the bottom-left corner to display all available COM ports on your computer. Locate and select the entry labeled ‘ESP32-S3’.

../../../_images/xiaozhi33.png

Click the ‘ESP32’ button in the bottom-left corner to display all available ESP32 models, then select ‘ESP32-S3’ from the list.”

../../../_images/xiaozhi34.png

From the new selection menu, choose ‘ESP32-S3 Chip (via ESP-PROG) - ESP32-S3 debugging via ESP-PROG Board…’

../../../_images/xiaozhi35.png

Wait until it shows “Target ESP32S3 Set Successfully” at the bottom right.

../../../_images/xiaozhi36.png

Click “SDK Configuration Editor (menuconfig)” at the bottom.

../../../_images/xiaozhi37.png

On the new interface, click ‘Serial flasher config’ and verify that the settings match the configuration shown in the image below.

../../../_images/xiaozhi38.png

Click “Partition Table” and verify that the settings match the configuration shown in the image below.

../../../_images/xiaozhi39.png

Click “Xiao Assistant” and verify that the settings match the configuration shown in the image below.

../../../_images/xiaozhi40.png

Click “Load Multiple Wake Words” and check the boxes for ‘Hi, ESP’ and ‘Hi, Lily’ (and other desired options).

../../../_images/xiaozhi41.png

Finally, click “Save” to store your configuration. A success message will appear at the bottom upon completion.

../../../_images/xiaozhi42.png

Code Compilation

Before compiling, make sure all aforementioned configurations are correct. Click the ‘Full Clean’ button (bottom toolbar) to reset build cache.

../../../_images/xiaozhi43.png

Click ‘Build Project’ at the bottom to start compiling the entire project. The first compilation may take longer - please wait patiently until the success message appears in the output panel.

../../../_images/xiaozhi44.png

Click ‘Flash Device’ at the bottom to start uploading the code to your Freenove ESP32-S3 Display.

../../../_images/xiaozhi45.png

From the new options menu, select ‘UART’ and wait for the code upload to complete.

../../../_images/xiaozhi46.png

Upon seeing the message ‘Flash has finished. You can monitor your device with “ESP-IDF: Monitor command”’, this indicates you have successfully uploaded XiaoZhi AI’s firmware to the Freenove ESP32-S3 Display.

../../../_images/xiaozhi47.png

At this point, the compilation is complete and you’re ready for secondary development.