Sayhi-bzb/Agent-HTML

解決する課題

Agent-HTML は、AIエージェントの出力に Markdown を使用する際の制限を克服します。Markdown はテキストやコードには適していますが、ダッシュボード、インタラクティブなデータビュー、プロダクトのマックアップ、テーマ付きレポートなどの複雑な視覚的要件を扱うことはできません。このプロジェクトでは、単なるテキスト文書ではなく、耐久性がありインタラクティブな React アーティファクトを生成できるようにします。

動作方法

このシステムは「Canvas」アーキテクチャを採用しており、以下の構成要素から構成されています：

• agent-html: エージェントが React と TypeScript のアーティファクトを記述できるポータブルなワークスペース。
• @agent-html/react: ヘッドレスな Artifact と Block コンポーネントを提供するプロトコルで、HTML サーフェス内に安定した、アドレス指定可能な領域を構築します。
• Canvas Host: Vite で構築された環境で、アーティファクトのレンダリング、検証診断、テーマプリセットの管理、ブロックレベルのプロンプトルーティングを実行します。
• ローカルリソース: アーティファクトと併せて存在する UI プリミティブ、フック、スキーマのセットで、一貫性を確保します。

対象ユーザー

操作ダッシュボード、Kanban ボード、データレポートなどの機能的なユーザーインターフェースが必要な AI エージェントワークフローを開発している開発者向けに設計されています。単なるチャット応答ではなく、実用的な UI を出力する必要がある場面に最適です。

特徴

• 検査可能なサーフェス: Block のメタデータを使用して、アーティファクトの特定領域に対してターゲットレビューと集中フィードバックを可能にします。
• 豊かな表現力: レイアウト、状態、インタラクション、チャート、テーブルをサポートします。
• 耐久性のあるコンテキスト: ルール、リソース、アーティファクトをファイルシステムに保存することで、チャット履歴に消失するリスクを回避します。
• ターゲットリビジョン: フォローアッププロンプトを HTML サーフェスの特定ブロックにルーティングし、正確な編集を可能にします。