AIFlow Web ユーザーガイド

1. はじめに

AIFlow Web は、無料のオンライン Vibe Coding ツールです。複雑な環境設定は不要で、自然言語を使ってデバイス用のコードを素早く生成し、プログラムを配信できます。

AIFlow Web は、UiFlow2 プラットフォームに対応したすべての M5Stack デバイスをサポートしています。このチュートリアルでは、StickS3 デバイスを例に、AIFlow Web 版を使ったオンラインプログラミングの方法を紹介します。

2. ファームウェアの書き込み

AIFlow Web を使用する前に、対応する AIFlow ファームウェアをデバイスに書き込み、Wi-Fi 設定を行う必要があります。

AIFlow Web にアクセスし、ページ上部の Access Code オプションをクリックします。

Flash firmware をクリックして、ファームウェア書き込みページに入ります。

デバイスをダウンロードモードにします：StickS3 をパソコンに接続し、電源ボタンを長押しして、緑色のインジケーターが点滅し始めるまで待ちます。デバイスはダウンロードモードに入ります。

Select firmware セクションで、お使いのデバイスタイプを検索または見つけ、Wi-Fi の SSID とパスワードを入力し、Connect device をクリックします。

該当するデバイスポートを選択し、接続 をクリックします。

Device connected というプロンプトが表示されると、ネットワーク接続が成功しています。

Flash をクリックして、UiFlow2 ファームウェアの書き込みを開始します。

Firmware flashed successfully というプロンプトが表示されたら、ファームウェアの書き込みが完了です。この時点でデバイスをリセットしてください。

3. AIFlow への接続

ファームウェアの書き込みが完了したら、デバイスは Access Code を使用して AIFlow Web とワイヤレス接続を確立する必要があります。これにより、プログラムの配信やデバイス制御が可能になります。

デバイスの Access Code を取得します：StickS3 の起動後、中央のボタンを押します。サーバー接続が成功するのを待つと、デバイスが自動的に Access Code を生成し、画面に表示します。

Pair device をクリックし、ポップアップウィンドウにデバイスの Access Code を入力して、Pair Device をクリックして接続します。

Access code xxx connected というプロンプトが表示されると、デバイスの接続が成功しています。ページの右上隅にデバイスのステータスが表示されます。

4. 使い始める

接続が完了したら、実装したい機能の詳細を自然言語で直接入力できます。AIFlow はタスクの生成進捗をリアルタイムで表示し、推論完了後に対応する MicroPython コードを自動生成し、ネットワーク経由でデバイスにプッシュして実行します。コードプレビューと実行/デバッグ機能を併用することで、迅速な検証と反復が可能です。

注意: AI 推論によって生成されるプログラムは固定されておらず、同じプロンプトでも異なる結果が生成されることがあります。以下の内容は効果デモのみを目的としており、実際の結果は異なる場合があります。

デモ例

プロンプト入力:

Print "Hello World" on screen

実行結果:

5. インターフェースの紹介

AIFlow Web の主な領域は以下の通りです：

ファームウェア書き込み：UiFlow2 ファームウェアの書き込み、および Access Code を使用したデバイスのペアリング
デバイスステータス表示：デバイス名と現在のオンラインステータスを表示；デバイス名のカスタマイズも可能
チャット＆コードプレビュー：チャットボックスに実装したいアイデアを記述すると、AIFlow がチャット内容に基づいてコードを生成し、デバイスに配信します