BoardUI/boardui

해결하는 문제

BoardUI는 AI 기반 인터페이스 구축을 위해 특별히 설계된 응집력 있는 디자인 시스템을 제공합니다. 표준 대시보드 컴포넌트(테이블, 폼 등)와 에이전트 특화 UI 요소(채팅 스트림, 사고 표시기, 에이전트 로그 등) 사이의 간극을 메워 전체 AI 제품에서 일관된 시각적 언어를 보장합니다.

작동 방식

BoardUI는 Tailwind CSS v4와 React Aria를 기반으로 구축된 React 컴포넌트 모음입니다. 표준 라이브러리 의존성으로 설치하는 대신, CLI (npx boardui@latest add)를 사용하여 소스 코드를 프로젝트에 직접 복사합니다. 이를 통해 특정 요구 사항에 맞게 컴포넌트를 수정할 수 있습니다. 또한 MCP (Model Context Protocol) 서버가 포함되어 있어, Cursor나 Claude Code와 같은 AI 코딩 에이전트가 미리 정의된 디자인 규칙을 따르면서 컴포넌트를 자동으로 탐색, 설치 및 연결할 수 있습니다.

대상 사용자

AI 네이티브 애플리케이션을 구축하면서, 일반적인 에이전트 특화 UI 패턴을 처음부터 만들지 않고도 전문적인 수준의 인터페이스를 빠르게 프로토타이핑하거나 출시하려는 개발자를 위한 것입니다.

주요 특징

• 에이전트 네이티브 컴포넌트: 스트리밍 채팅 인터페이스, 에이전트 사고 표시기, 실행 로그 등 AI 제품을 위한 특화된 UI를 포함합니다.
• 소스 우선 통합: 컴포넌트가 소스 파일로 프로젝트에 추가되므로 코드에 대한 완전한 제어권을 가집니다.
• 에이전트 준비 완료: MCP 서버와 전용 규칙 파일 (AGENTS.md)을 갖추고 있어 AI 코딩 어시스턴트가 시스템의 디자인 토큰을 사용하여 UI를 구축할 수 있습니다.
• 접근성 및 현지화: React Aria를 기반으로 구축되어 접근성을 보장하며, 아랍어나 히브리어와 같은 오른쪽에서 왼쪽으로 쓰는 언어(RTL)에 대한 기본 지원을 포함합니다.
• 유연한 백엔드: 단일 API 키를 통해 주요 LLM 제공업체(OpenAI, Anthropic, Google, Groq 등)를 지원하는 즉시 사용 가능한 스트리밍 채팅 엔드포인트를 포함합니다.