エージェントの進捗

多段のAI作業に適した進捗ブロックです。ソフトなステージングで手順を紹介し、円周の進捗を同期し、進捗を最小限に保ちながら、UIを手渡するための完了タイミングをエージェント応答に短縮します。

5 左の手順

プロジェクトファイルを読む

Update light mode tokens

ダークモードトークンの実装

Run lint and production build

インストール

エージェントの進捗はBoardUI Proに含まれています。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

プロアクセス

BoardUI Proライセンスは、このライセンスを解除します。コンポーネントと、そのすべてのソースファイル。ライセンスを有効化すると、CLIでプロジェクトに直接インストールできます。

ライセンスを有効化

Lemon Squeezyの購入メールにあるキーを使ってください。端末ごとに1回設定すれば完了です。

npx boardui@latest login YOUR_LICENSE_KEY

インストールコンポーネント

CLIがソースをコピーし、BoardUIとnpmの依存関係をすべて解決します。

npx boardui@latest add agent-progress

詳しくはこちらコンポーネント BoardUI Proに含まれているもの

今すぐBoardUI Proを入手し、インストールしてください。

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

注文リストを経由して渡す steps. ブロックは、そのリストから拡張された高さ、カウントダウン、アクティブ状態、および全体的な進捗を計算します。

<AgentProgress  steps={[    "Analyze the request",    "Generate the component",    "Run accessibility checks",    "Prepare the response",  ]}/>

タスクごとの時間を設定します。 stepDuration. 最終的なチェックマークの後で、 completionDelay 完了した状態の残量を前に制御して下さい onFinished 火炎。

<AgentProgress  steps={steps}  stepDuration={2400}  completionDelay={1000}  onFinished={() => {    sendAgentResponse();  }}/>