theswerd/brainless

해결하는 문제

AI 코딩 에이전트(Claude Code, OpenAI Codex, Grok)의 터미널 인터페이스처럼 보이는 고충실도, 접근 가능한 React 컴포넌트를 웹사이트, 문서 및 마케팅 페이지에 삽입할 수 있는 방법을 제공합니다. 이를 통해 에이전트 상호작용을 보여주기 위해 정적 스크린샷이나 iframe을 사용할 필요가 없습니다.

작동 방식

이 프로젝트는 shadcn/ui 레지스트리입니다. 캡처 하네스(tmux 경유)를 사용하여 AI 에이전트의 실제 터미널 출력을 기록하고, 이를 사용하여 터미널 UI를 충실하게 재현하는 React 컴포넌트를 구축합니다. 이러한 컴포넌트는 shadcn CLI를 통해 프로젝트에 추가할 수 있는 복사-붙여넣기 가능한 레지스트리 항목으로 제공됩니다.

대상 사용자

이미지가 아닌 깔끔하고 접근 가능한 코드를 사용하여 웹 애플리케이션이나 문서에서 AI 에이전트 터미널 세션을 보여주고자 하는 개발자 및 디자이너.

주요 특징

• 멀티 에이전트 지원: Claude Code, OpenAI Codex, Grok의 인터페이스를 재현합니다.
• 고충실도: tmux 하네스에서 캡처한 실제 터미널 데이터를 기반으로 합니다.
• shadcn/ui 통합: 컴포넌트는 레지스트리로 제공되며 bunx shadcn add를 통해 쉽게 설치할 수 있습니다.
• 세분화된 컴포넌트: 사고 블록, 도구 호출, diff, 슬래시 메뉴와 같은 특정 요소뿐만 아니라 전체 세션 블록도 포함합니다.