エージェントの UI 状態: AI の思考、ツールの呼び出し、進行状況を表示する方法

エージェントの実行に独自の状態が必要な理由

従来のリクエストには、読み込み中と完了という 2 つの表示状態があります。 AI エージェントの実行は異なります。数秒または数分かかる場合があり、検索、ファイルの読み取り、API の呼び出しなどのいくつかのステップを経て、結果を伴うアクションを実行する場合があります。 Nielsen Norman Group による応答時間の調査は今も当てはまります。約 0.1 秒は瞬時に感じられ、約 1 秒は思考の流れを維持し、約 10 秒後には何が起こっているか、そしておおよそどれくらい時間がかかるかについてのフィードバックが必要になります。ほとんどのエージェントは最後のグループに属します。

設計する州

これらのそれぞれを、1 つのスピナーとしてではなく、独自の外観と言葉を持つ独自の状態として設計します。

• 受信: スレッドにメッセージを表示するなどして、リクエストを即座に (0.1 秒以内に) 確認します。
• 思考: 答えが現れる場所の近くにある穏やかな指標。偽の進捗率は避けてください。
• ツール呼び出し: ステップにわかりやすい言葉で名前を付けます (「ドキュメントの検索」、「3 つのファイルの読み取り」)。わかっている場合はカウントも付けます。
• 承認待ち: エージェントが行動する前に許可が必要なときの明確な一時停止。
• ストリーミング: 出力を到着時に表示します。テキストが始まるとすぐに思考インジケーターを停止します。
• 完了: 変更内容の短い概要。可能な場合は元に戻します。
• 停止と失敗: 何が起こったのか、何が保持されたのか、そしてどのように再試行するのかを説明します。

生のログではなく計画を表示する

ツール呼び出しの長いログはデバッグには役立ちますが、ほとんどのユーザーにとっては圧倒されます。適切なデフォルトは、現在のステップの 1 行のステータスと、展開できる完了したステップの折りたたまれたリストです。開発者とパワーユーザーは詳細を開くことができます。他の人は皆、進歩を平易な言葉で理解します。エージェントをユーザー向けアプリに接続するためのオープンなイベントベースの標準である AG-UI などのプロトコルは、フロントエンドが一貫した方法でこれらのステップ イベントを受信できるように部分的に存在します。

コントロールと信頼

エージェントがコントロールを維持している場合、人々はエージェントをより信頼します。実行中は停止ボタンを常に表示しておいてください。送信、支払い、削除などの取り消しできないアクションの前に確認を求め、何が起こるかを正確に示します。実行後、最初からやり直すのではなく、単一のステップを簡単に元に戻したり、編集したり、再試行したりできるようにします。

エージェント状態のモーション

動きは「何かが起こっている」という強力なシグナルですが、ループは長時間実行すると疲れます。思考には穏やかでコントラストの低いループを使用し、ツールの呼び出しが開始されると明確な変化が現れ、実行が終了すると明確に落ち着きます。動きを交換して微妙な不透明度を変更することで、動きを減らした設定を尊重します。音声アシスタントは、多くの場合、明らかに異なるアイドル状態、リスニング状態、思考状態、発話状態を備えたアニメーション化されたオーブを使用します。