Hashbrown: Angular와 React 기반 WebApp에 AI 기반 생성형 UI 기능을 쉽게 구현할 수 있는 오픈소스 프레임워크

읽을거리&정보공유
, , , , , , ,
1

Hashbrown: 생성형 사용자 인터페이스(Generative UI)를 쉽게 구현할 수 있는 오픈소스 프레임워크
Hashbrown: 생성형 사용자 인터페이스(Generative UI)를 쉽게 구현할 수 있는 오픈소스 프레임워크1802×1112 189 KB

Hashbrown 소개

Hashbrown은 Angular와 React 애플리케이션에서 Generative UI(생성형 사용자 인터페이스) 를 쉽고 강력하게 구현할 수 있도록 설계된 오픈 소스 프레임워크입니다. Google Developer Expert(GDE)인 Mike Ryan과 Brian Love가 이끄는 LiveLoveApp 팀이 개발하였으며, 단순히 텍스트를 주고받는 챗봇을 넘어 AI가 사용자의 의도와 애플리케이션의 상태에 맞춰 동적으로 UI 컴포넌트를 렌더링하고 실행할 수 있는 환경을 제공합니다.

최근 웹 애플리케이션 개발의 트렌드는 단순한 '텍스트 챗봇'을 넘어, AI가 적절한 차트, 양식(Form), 또는 버튼과 같은 Rich UI를 직접 생성하여 사용자에게 제시하는 방향으로 나아가고 있습니다. 하지만 이를 구현하기 위해서는 스트리밍 데이터 처리, 프론트엔드 상태 관리, 그리고 비정형 텍스트를 정형 데이터로 변환하는 복잡한 과정이 필요합니다.

Hashbrown은 이러한 복잡성을 추상화하여 제공합니다. 특히 Headless(헤드리스) 아키텍처를 채택하여 UI 스타일링에 제약을 주지 않으면서도, Angular의 Signals나 React의 Hooks와 같은 최신 반응형(Reactive) 패턴과 깊게 통합되어 개발자가 익숙한 방식으로 AI 기능을 구현할 수 있게 돕습니다.

Hashbrown vs. Vercel AI SDK

현재 React 생태계에서 가장 널리 쓰이는 AI 통합 도구 중 하나인 Vercel AI SDK와 비교해보면 몇 가지 차이점이 있습니다. Vercel AI SDK가 React와 Next.js에 집중하는 반면, Hashbrown은 React뿐만 아니라 Angular를 1급 시민(First-class citizen)으로 지원합니다. Angular의 최신 기능인 Resource API와 Signals를 활용하여 매우 효율적인 상태 관리를 제공합니다.

또한, 도구를 호출하는 방식에서도 차이가 있습니다. Vercel AI SDK를 비롯하여 많은 AI SDK가 서버쪽(Server-side)에서 도구(Tool/Function)를 실행하는 데 초점을 맞추지만, Hashbrown은 브라우저단(Client-side) 에서 도구를 실행하는 것을 강력하게 지원합니다. 이를 통해 AI가 사용자의 로컬 상태, 브라우저 API(위치, 클립보드 등), 또는 클라이언트 로직에 직접 접근하여 더 즉각적인 상호작용이 가능합니다.

Hashbrown의 주요 특징

  • 생성형 UI (Generative UI): 생성형 UI는 Hashbrown의 핵심 기능으로, LLM의 응답을 텍스트가 아닌 실제 컴포넌트로 변환하여 화면에 그리는 것이 특징입니다. 즉, 개발자는 LLM에게 특정 상황에서 사용할 수 있는 도구(Tool)와 그에 매핑된 컴포넌트를 정의하는 방식으로 동작합니다. 예를 들어, 사용자가 "주가 차트 보여줘"라고 요청하면, 텍스트로 설명을 하는 대신 FinancialChart 컴포넌트를 즉시 렌더링하여 상호작용 가능한 그래프를 제공하는 방식입니다.

  • 브라우저 기반 도구 호출 (Browser-Side Tool Calling): Hashbrown은 AI가 브라우저 내에서 직접 자바스크립트 함수를 호출할 수 있게 합니다. 이러한 방식은 window 객체에 접근하거나, 현재 페이지의 상태(State)를 읽어오거나, 사용자를 대신해 화면을 조작(Navigation, Form 채우기 등)하는 데 유용합니다. 또한, 개발자는 React의 useTool 훅이나 Angular의 설정 등을 통해 간편하게 AI가 호출할 수 있는 도구(tool)를 정의하고 구현할 수 있습니다.

  • Skillet과 구조화된 데이터 (Structured Data):LLM의 출력을 애플리케이션에서 즉시 사용할 수 있는 타입-안전(Type-safe)한 데이터로 변환하기 위해 Skillet이라는 스키마 정의 방식을 사용합니다. 이러한 방식을 통해 개발자는 LLM으로부터 불확실한 텍스트가 아닌, 검증된 JSON 데이터를 받아 비즈니스 로직에 바로 투입할 수 있습니다.

  • WASM 기반 코드 실행 (Runtime): Hashbrown은 보안과 성능을 위해 **WebAssembly(WASM)**로 컴파일된 자바스크립트 런타임을 포함하고 있습니다. WASM을 통해 AI가 생성한 코드를 메인 스레드를 차단하거나 보안 위협을 주지 않고 브라우저 내에서 안전하게 실행할 수 있습니다. 복잡한 계산이나 데이터 변환 로직을 AI가 작성하고 즉시 실행하는 시나리오에 적합합니다.

  • 프레임워크 및 모델 불가지론 (Agnostic): Hashbrown은 @hashbrownai/angular 및 @hashbrownai/react 패키지를 통해 Angular와 React 프레임워크의 라이프사이클에 최적화된 경험을 제공합니다. 또한, OpenAI, Google Gemini, Azure OpenAI, Writer, Ollama 등 다양한 LLM 제공업체를 어댑터 패턴으로 지원하며, 설정 변경만으로 모델을 쉽게 교체할 수 있어, 특정 사업자에 종속되지 않습니다.

Hashbrown 설치 및 코드 예시 (React)

Hashbrown을 사용하여 간단한 대화형 인터페이스를 구성하는 예시를 살펴보겠습니다. 먼저, 다음과 같이 npm install 명령어를 사용하여 React 기반 프레임워크 및 OpenAI 관련 패키지를 설치합니다:

npm install @hashbrownai/react @hashbrownai/openai

이후, 다음과 같은 예시 코드를 통해 간단한 대화형 인터페이스를 구성할 수 있습니다:

// React 예시: useChat 훅을 사용한 기본 구성
import { useChat } from '@hashbrownai/react';

function ChatApp() {
  const { messages, sendMessage, input, handleInputChange } = useChat({
    adapter: new OpenAIAdapter({ apiKey: 'YOUR_KEY' }), // 어댑터 설정
    tools: {
      // AI가 호출할 수 있는 도구 정의
      getWeather: {
        description: 'Get the current weather',
        handler: async ({ location }) => {
          return await fetchWeather(location);
        },
        // 도구 실행 시 렌더링할 컴포넌트 (Generative UI)
        component: WeatherCardComponent 
      }
    }
  });

  return (
    <div>
      {messages.map((msg, idx) => (
        <div key={idx}>
          {msg.role === 'user' ? msg.content : msg.component || msg.content}
        </div>
      ))}
      <input value={input} onChange={handleInputChange} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

Hashbrown 홈페이지에는 Finance App과 Smart Home App을 예시로 제공하고 있으니 참고해주세요:


또한, 개발자들이 직접 Hashbrown 소개 및 사용법 설명하는 영상도 있으니 참고해주세요:

라이선스

Hashbrown 프로젝트는 MIT 라이선스로 공개 및 배포 되고 있습니다. 코드 변경 및 상업적 사용 등에 별다른 제약은 없지만, 가급적 사용 전 라이선스 파일을 확인하시기 바랍니다.

:house: Hashbrown 공식 홈페이지

:scroll: Hashbrown 관련 문서/블로그

:github: Hashbrown 프로젝트 GitHub 저장소



이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck:

1개의 좋아요