assistant-ui/assistant-ui

assistant‑ui

정의 – 오픈 소스 TypeScript/React 구성 요소 라이브러리로, 웹 앱에 AI 어시스턴트(ChatGPT 스타일)를 위한 완전한 기능을 갖춘 프로덕션 준비 채팅 UI를 추가할 수 있습니다.

핵심 아이디어 – 합성 가능한 UI 프리미티브(Thread, Message, Composer, ActionBar 등)와 모든 LLM 백엔드(Vercel AI SDK, LangChain/LangGraph, 사용자 정의 데이터 스트림 등)에 연결되는 런타임 제공자를 제공합니다. 라이브러리는 스트리밍, 마크다운, 코드 하이라이트, 음성 받아쓰기, 재시도, 접근성, 그리고 도구 호출, JSON, 인라인 승인을 React 구성 요소로 렌더링할 수 있는 "생성 UI" 레이어를 처리합니다.

주요 기능

합성 가능한 프리미티브 – 저수준 부품에서 채팅 UI를 구축하거나 CLI에 포함된 사전 스타일링된 shadcn/ui 테마를 사용합니다.
백엔드에 구애받지 않는 런타임 – Vercel AI SDK, LangChain, LangGraph, AG‑UI/A2A, Google ADK, OpenCode용 어댑터와 일반 데이터 스트림 인터페이스를 즉시 제공합니다. 단일 훅(useChatRuntime, useLangGraphRuntime 등)으로 런타임을 전환합니다.
프로덕션급 UX – 스트리밍 응답, 자동 스크롤, 재시도 처리, 파일 첨부, 마크다운 렌더링, 구문 강조 코드 블록, 음성 받아쓰기, 키보드 단축키, WCAG 호환 접근성.
생성 UI – 도구 호출(예: get_weather) 또는 JSON 페이로드를 사용자 정의 React 구성 요소로 변환하고, 사용자 승인을 수집하며, 안전한 프론트엔드 작업을 모델에 노출합니다.
강력한 TypeScript – 런타임, 도구 스키마, 메시지 부분에 대한 종단 간 타입 API.
CLI 스캐폴딩 – npx assistant-ui@latest create는 Next.js 스타터를 생성하고, init은 기존 프로젝트에 스타일링된 구성 요소를 주입합니다.
관리형 클라우드 옵션 – 스레드 영속성, 원격 측정, 파일 저장을 위한 선택적 assistant‑cloud 서비스.

일반적인 사용 사례

SaaS 대시보드 내에 고객 지원 챗봇 구축.
외부 도구(검색, 예약, 데이터 조회)를 호출하는 제품에 대화형 인터페이스 추가.
도구 결과(예: 날씨 카드, 테이블, 승인 대화 상자)에 대한 사용자 정의 UI가 필요한 AI 기반 어시스턴트 프로토타이핑.
LLM 백엔드(OpenAI, Anthropic, Gemini, Mistral, Bedrock, Ollama 등)를 UI 배관을 작성하지 않고 React 프론트엔드에 통합.

설치

# 빠른 시작 – 새 Next.js 앱 스캐폴딩
npx assistant-ui@latest create
# 또는 기존 프로젝트에 추가
npx assistant-ui@latest init

# 또는 패키지를 수동으로 설치
npm install @assistant-ui/react @assistant-ui/ai-sdk ai

기본 사용법

"use client";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export function Chat() {
  const runtime = useChatRuntime(); // 기본적으로 Vercel AI SDK에 연결
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

useChatRuntime을 다른 런타임 훅으로 교체하여 UI를 다른 백엔드로 지정할 수 있습니다.

라이선스 – MIT. 관리형 스레드 저장 및 분석을 위한 상용 "Assistant Cloud" 서비스가 제공되지만, 핵심 라이브러리는 무료이며 오픈 소스로 유지됩니다.

지원 – Y Combinator; Mastra, LangChain, Athena Intelligence, Browser‑Use, Stack, Inconvo, Iterable, Helicone, Gram, Coreviz 등 많은 기업이 사용합니다.

assistant-ui/assistant-ui

assistant‑ui

관련