Sayhi-bzb/Agent-HTML

해결하는 문제

Agent-HTML은 AI 에이전트 출력에 Markdown을 사용할 때의 한계를 해결합니다. Markdown은 텍스트와 코드에는 적합하지만, 대시보드, 인터랙티브한 데이터 뷰, 제품 데모, 테마 기반 보고서와 같은 복잡한 시각적 요구를 처리할 수 없습니다. 이 프로젝트는 단순한 텍스트 문서가 아니라 내구성 있고 인터랙티브한 React 아티팩트를 생성할 수 있도록 합니다.

작동 방식

시스템은 다음과 같은 구성 요소로 이루어진 '캔버스' 아키텍처를 사용합니다:

• agent-html: 에이전트가 React 및 TypeScript 아티팩트를 작성할 수 있는 이식 가능한 작업 공간입니다.
• @agent-html/react: HTML 표면 내에서 안정적이고 주소 지정 가능한 영역을 생성하는 헤드리스 Artifact 및 Block 컴포넌트를 제공하는 프로토콜입니다.
• 캔버스 호스트: Vite 기반 환경으로 아티팩트 렌더링, 검증 진단, 테마 프리셋 관리, 블록 단위 프롬프트 라우팅을 수행합니다.
• 로컬 리소스: 아티팩트와 함께 존재하는 UI 프리미티브, 훅, 스키마 세트로 일관성을 보장합니다.

대상 사용자

운영 대시보드, 칸반 보드, 데이터 리포트와 같은 기능적인 사용자 인터페이스가 필요하지만 단순한 채팅 응답이 아닌 경우에 AI 에이전트 워크플로우를 개발하는 개발자에게 적합합니다.

주요 특징

• 검사 가능한 표면: Block 메타데이터를 사용해 아티팩트의 특정 영역에 대해 타겟 리뷰와 집중 피드백을 가능하게 합니다.
• 풍부한 표현력: 레이아웃, 상태, 상호작용, 차트, 테이블을 지원합니다.
• 지속 가능한 컨텍스트: 규칙, 리소스, 아티팩트를 파일 시스템에 저장하여 채팅 기록에서 사라지는 것을 방지합니다.
• 타겟 리비전: 후속 프롬프트를 HTML 표면의 특정 블록으로 라우팅하여 정밀한 편집을 가능하게 합니다.