ONEDEV

assistant-ui

AI Chat UIsCLITypeScript

★ 12,126주당 +93조회 4

무엇인가

assistant-ui는 LLM 대화 화면을 React 컴포넌트 트리로 조립하는 라이브러리다. 완성된 채팅 위젯 하나를 설치하는 방식이 아니라, 스레드·메시지·입력창·액션 바 같은 프리미티브를 내주고 화면 구조와 스타일을 애플리케이션 쪽에서 결정하게 한다. 대상 영역은 채팅 프론트엔드, 즉 모델 응답을 스트리밍으로 받아 렌더링하고 사용자 입력·첨부·승인을 다시 모델로 돌려보내는 계층이다.

어떻게 동작하나

런타임 훅이 백엔드 연결을 담당한다. useChatRuntime은 Vercel AI SDK에 붙고, useLangGraphRuntime과 useDataStreamRuntime이 각각 LangGraph와 데이터 스트림 백엔드에 대응한다. 런타임은 메시지 파트, 툴 호출, 스트리밍 상태를 정규화해 프리미티브에 공급하고, Thread·Message·Composer·ThreadList·ActionBar가 그 상태를 렌더링한다. 툴 호출과 JSON은 React 컴포넌트로 렌더링되며, 인라인 사람 승인 수집과 프론트엔드 액션 노출이 같은 런타임 API를 거쳐 모델로 전달된다. 스트리밍, 자동 스크롤, 재시도, 첨부, 마크다운, 코드 하이라이팅, 음성 받아쓰기, 키보드 단축키, 접근성은 기본 동작에 포함된다.

무엇과 다른가

일반적인 채팅 라이브러리는 단일 Chat 컴포넌트와 고정 마크업을 주고 스타일을 CSS 변수나 prop으로 제한한다. assistant-ui는 CLI로 컴포넌트 소스를 프로젝트 안에 복사하는 방식을 택한다. 그래서 테마 코드가 node_modules가 아니라 저장소 안에 놓이고 마크업과 스타일을 직접 고칠 수 있다. 스타터는 Base UI 기반이 기본이고 Radix UI 버전도 선택할 수 있다. 백엔드도 고정되지 않아 런타임 훅을 바꾸는 것만으로 교체된다.

어떻게 쓰나

CLI가 가장 빠른 경로다. npx assistant-ui@latest create로 Next.js 앱을 스캐폴딩하거나, 기존 프로젝트에 npx assistant-ui@latest init으로 스타일드 컴포넌트를 추가한다. 패키지를 직접 설치할 수도 있다. 이후 useChatRuntime을 Thread에 연결하면 Vercel AI SDK 백엔드와 바로 통신한다. OpenAI, Anthropic, Google Gemini, Mistral, Perplexity, AWS Bedrock, Azure, Fireworks, Ollama는 AI SDK 제공자로 연결되고, 그 밖의 HTTP 백엔드는 커스텀 런타임으로 붙인다.

전제와 한계

React와 TypeScript 프로젝트를 전제한다. React Native는 @assistant-ui/react-native, 터미널(Ink)은 @assistant-ui/react-ink로 별도 패키지가 나뉘어 있다. 라이선스는 MIT이고, 스레드 영속성과 분석은 선택적 Assistant Cloud가 맡는다. 런타임 API, 툴 스키마, 메시지 파트, 어댑터의 타입이 끝까지 연결되는 것이 설계 전제다.

유사 도구