BoardUI/boardui

React design system for agentic interfaces. Every free BoardUI component as source, with a working AI chat app on your own model key as the homepage.

何を解決するか

BoardUI は、AIエージェントインターフェースの構築に特化した専用の React デザインシステムです。標準的なダッシュボードコンポーネント(テーブルやチャートなど)と AI 特有の UI 要素(思考インジケーターやエージェントログなど)の間のギャップを埋め、AI製品に統一されたビジュアル言語を提供します。

動作方法

従来のコンポーネントライブラリが依存関係としてインストールされるのとは異なり、BoardUI は CLI(npx boardui add)を使用してプロジェクトに直接コピーされるソースファイルとしてコンポーネントを提供します。React Aria Components と Tailwind CSS v4 を基盤としており、アクセシビリティを確保しつつランタイム CSS を一切使用しません。また、MCP サーバーを備えており、AI コーディングエージェント(Claude Code や Cursor など)がカタログを参照してコンポーネントを自動的にインストールできるようにしています。

対象ユーザー

エージェントワークフローと AI ダッシュボードに特化したプロフェッショナルで、アクセシブルかつカスタマイズ可能なデザインシステムを必要とするフロントエンド開発者および AI プロダクトビルダー。

特徴

  • エージェントネイティブコンポーネント: Agent Chat、Agent Log、Agent Thinking インジケーターなどの専用ブロックを含む。
  • ソースベース配布: コンポーネントはソースファイルとして追加され、開発者が完全に制御・カスタマイズ可能。
  • AIエージェント統合: MCP サーバーと特定のエージェントルール(AGENTS.md)を備え、AI コーディングツールがこのシステムで開発を支援。
  • 広範なプロバイダーサポート: OpenAI、Anthropic、Google、OpenRouter、Groq、xAI などを含む複数のプロバイダーをサポートするストリーミングチャットランタイムを搭載。
  • 包括的なライブラリ: 基本的な構成ブロックから複雑なアプリケーションブロックまで、60 以上の無料コンポーネントを提供。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト