AIFlow Web User Guide

1. Introduction

AIFlow Web is a free online Vibe Coding tool that allows you to quickly generate code for devices and deploy programs using natural language, without the need for complex environment setup.

AIFlow Web supports all M5Stack devices compatible with the UiFlow2 platform. This tutorial uses the StickS3 device as an example to demonstrate how to use AIFlow Web for online programming.

2. Flashing Firmware

Before using AIFlow Web, you need to flash the corresponding AIFlow firmware onto the device and configure Wi-Fi settings.

1. Go to the AIFlow Web page and click the Access Code option at the top of the page.

2. Click Flash firmware to enter the firmware flashing page.

3. Put the device into download mode: Connect the StickS3 to your computer, then press and hold the power button until the green indicator starts blinking. The device will enter download mode.

4. In the Select firmware section, search for or find your device type, enter your Wi-Fi SSID and password, then click Connect device.

5. Select the corresponding device port and click Connect.

When the prompt Device connected appears, the network connection is successful.

6. Click Flash to start flashing the UiFlow2 firmware.

When the prompt Firmware flashed successfully appears, the firmware flashing is complete. Please reset the device at this point.

3. Connecting to AIFlow

After the firmware is flashed, the device needs to establish a wireless connection with AIFlow Web using an Access Code, for program delivery and device control.

1. Obtain the device Access Code: After the StickS3 starts up, press the center button. Wait for the server connection to succeed, then the device will automatically generate an Access Code and display it on the screen.

2. Click Pair device, enter the device's Access Code in the pop-up window, then click Pair Device to connect.

When the prompt Access code xxx connected appears, the device connection is successful. The device status will be displayed in the upper-right corner of the page.

4. Getting Started

Once connected, you can directly enter natural language to describe the functionality you want to implement. AIFlow will display the generation progress in real time, automatically generate the corresponding MicroPython code after inference, and push it to the device for execution via the network. You can use the code preview and run/debug features to quickly verify and iterate.

Example Demo

Prompt input:

Print "Hello World" on screen

Result:

5. Interface Overview

The main areas of AIFlow Web include:

• Firmware Flashing: Flash UiFlow2 firmware and pair devices using the Access Code.
• Device Status Display: Shows the device name and current online status; supports custom device naming.
• Chat & Code Preview: Describe your ideas in the chat box; AIFlow generates code based on the chat content and deploys it to the device.

6. More Information

The AIFlow desktop client has also been released. Feel free to try it out. For more details, please refer to the AIFlow Client.