theswerd/brainless

解決する課題

AIコーディングエージェント（Claude Code、OpenAI Codex、Grok）のターミナルインターフェースを模した、高忠実度でアクセシブルなReactコンポーネントを、Webサイト、ドキュメント、マーケティングページに埋め込む方法を提供します。これにより、エージェントのインタラクションを紹介するために静的なスクリーンショットやiframeを使用する必要がなくなります。

仕組み

このプロジェクトはshadcn/uiレジストリです。キャプチャハーネス（tmux経由）を使用してAIエージェントからの実際のターミナル出力を記録し、それを使用してターミナルUIを忠実に再現するReactコンポーネントを構築します。これらのコンポーネントは、shadcn CLIを通じてプロジェクトに追加できる、コピー＆ペースト可能なレジストリアイテムとして提供されます。

対象ユーザー

画像ではなく、クリーンでアクセシブルなコードを使用して、WebアプリケーションやドキュメントでAIエージェントのターミナルセッションを紹介したい開発者やデザイナー。

ハイライト

• マルチエージェントサポート: Claude Code、OpenAI Codex、Grokのインターフェースを再現。
• 高忠実度: tmuxハーネスからの実際のターミナルキャプチャに基づいています。
• shadcn/ui統合: コンポーネントはレジストリとして提供され、bunx shadcn add で簡単にインストール可能。
• 粒度の細かいコンポーネント: 思考ブロック、ツール呼び出し、diff、スラッシュメニューなどの特定のパーツに加え、完全なセッションブロックも含まれています。