lobehub/lobe-ui

어떤 프로젝트인가요?

핵심 기능

• 01Markdown, 코드, Mermaid 다이어그램, diff 등 LLM 출력을 렌더링하는 컴포넌트.
• 02대화형 인터페이스를 위한 채팅 및 모바일 UI 진입점.
• 03관리자 콘솔을 위한 대시보드, 데이터 테이블, 폼 컴포넌트.
• 04기본 및 중립 색상을 전환할 수 있는 라이트·다크 테마.
• 05영어와 중국어 간체 텍스트 번들 포함.
• 06skills.md 및 llms.txt 등 에이전트가 읽을 수 있는 형식으로 제공되는 문서.

활용 사례

• AI 어시스턴트용 메시지 목록과 입력창이 있는 채팅 페이지 구축.
• 웹 앱에서 LLM의 스트리밍 Markdown 및 코드 출력 렌더링.
• AI 기능과 함께 관리자 콘솔 또는 데이터 테이블 제작.
• 기존 React 제품에 라이트·다크 테마 적용.

빠른 시작

1. 1

   pnpm으로 패키지와 peer dependencies를 설치합니다

   pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion
2. 2

   테마와 스타일 CSS를 가져온 다음 앱을 ConfigProvider로 감싸고 Button과 같은 컴포넌트를 사용합니다

사용 전 알아둘 점

• !React 19가 필요하며 ESM 방식으로만 사용할 수 있습니다. 또한 여러 peer dependencies를 설치해야 합니다.
• !5.x에서 업그레이드하려면 v6 마이그레이션 과정에서 Ant Design을 제거해야 합니다.

토픽

자주 묻는 질문

lobe-ui은(는) 무엇인가요?

AI 채팅 및 AIGC 웹 앱 구축을 위한 React 컴포넌트 라이브러리로, 채팅, Markdown, 코드, 관리자 UI 컴포넌트를 제공합니다. Lobe UI는 LobeHub에서 사용하는 React 컴포넌트 라이브러리로, AI 채팅 인터페이스와 AIGC 웹 애플리케이션을 개발하는 사람을 대상으로 합니다. Markdown, 코드 블록, Mermaid 다이어그램, diff, HTML 미리보기 등 LLM 출력을 렌더링하는 컴포넌트와 채팅 및 모바일용 진입점을 제공합니다.

lobe-ui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

lobe-ui은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

lobe-ui은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. lobe-ui의 마지막 커밋은 2026년 10월 22일입니다.

lobe-ui은(는) 어디에 사용할 수 있나요?

AI 어시스턴트용 메시지 목록과 입력창이 있는 채팅 페이지 구축. 웹 앱에서 LLM의 스트리밍 Markdown 및 코드 출력 렌더링. AI 기능과 함께 관리자 콘솔 또는 데이터 테이블 제작. 기존 React 제품에 라이트·다크 테마 적용.

lobe-ui는 어떻게 설치하나요?

pnpm으로 패키지와 peer dependencies를 설치합니다: pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion 테마와 스타일 CSS를 가져온 다음 앱을 ConfigProvider로 감싸고 Button과 같은 컴포넌트를 사용합니다

lobe-ui은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/lobehub/lobe-ui