Hashbrown is a framework for building agents that run the browser. Built for Angular and React.

Hashbrown – React 및 Angular를 위한 AI 기반 채팅 및 에이전트

정의 – Hashbrown은 React 또는 Angular 웹 앱에 생성형 AI 채팅 및 에이전트 기능을 추가할 수 있는 헤드리스 TypeScript 프레임워크입니다. 자체 UI를 제공하지 않으며, 대신 모델 생성 데이터를 이미 사용 중인 컴포넌트로 스트리밍하여 AI가 자체 UI 조각을 렌더링하고 브라우저에서 실행되는 함수(도구)를 호출할 수 있게 합니다.

핵심 아이디어

아이디어	의미
생성형 UI	Skillet 스키마로 React/Angular 컴포넌트를 등록합니다. LLM이 무언가를 표시하기로 결정하면 컴포넌트 이름과 props를 내보내고 Hashbrown은 즉시 해당 컴포넌트를 렌더링합니다.
클라이언트 측 도구	노출한 함수(예: 데이터 가져오기, 서비스 호출)는 모델이 호출할 수 있습니다. 앱과 동일한 브라우저 컨텍스트에서 실행되므로 앱 상태에 완전히 액세스할 수 있습니다.
스트리밍	응답은 청크 단위로 스트리밍됩니다. 데이터가 도착하면 즉시 컴포넌트가 나타나며, 텍스트는 스트리밍 중에 "매직 텍스트"(Markdown 유사)로 렌더링될 수 있습니다.
공급자 중립	이 프레임워크는 JSON을 스트리밍할 수 있는 모든 LLM과 작동합니다: OpenAI, Anthropic, Google Gemini, Amazon Bedrock, Azure OpenAI, Ollama 또는 호스팅하는 사용자 지정 백엔드.
헤드리스	내장 채팅 UI가 없습니다. 디자인 시스템을 유지합니다. 별도 프로젝트(threadplane)가 Hashbrown 위에 구축된 전체 UI를 제공합니다.

패키지 및 설치

패키지	용도
`@hashbrownai/core`	프레임워크에 구애받지 않는 기본 요소, Skillet 스키마 언어, 스트리밍 JSON 파서.
`@hashbrownai/react` / `@hashbrownai/angular`	선택한 프런트엔드 프레임워크에 특화된 훅, 컴포넌트, 유틸리티.
`@hashbrownai/<provider>`(예: `openai`, `anthropic`)	`/run` 요청을 공급자의 SDK로 변환하고 이벤트를 브라우저로 스트리밍하는 Node 어댑터.

일반적인 설치(React + OpenAI)

npm install @hashbrownai/{core,react,openai}

일반적인 설치(Angular + OpenAI)

npm install @hashbrownai/{core,angular,openai}

작동 방식 – 3단계

컴포넌트 노출 – 모델이 렌더링할 수 있는 UI 조각을 등록하고 Skillet 스키마로 props를 설명합니다.

const components = [
  exposeComponent(FlightCard, {
    name: 'FlightCard',
    description: 'Shows one aircraft on the map.',
    props: {
      note: s.streaming.string('Short description'),
      hex:  s.string('Aircraft hex code')
    },
    children: false,
  })
];

도구 제공 – 모델이 호출할 수 있는 함수를 정의합니다. 브라우저에서 앱 상태를 읽고 쓸 수 있습니다.

const findAircraft = useTool({ ...atcTools.findAircraft, deps: [atcTools] });
const chat = useUiChat({ system: 'Help users understand the planes.', components, tools: [findAircraft] });

스트리밍 응답 렌더링 – chat.messages를 매핑합니다. 어시스턴트 메시지에는 렌더링 가능한 컴포넌트 트리인 ui 필드가 포함됩니다.
```
return chat.messages.map(m => m.role === 'assistant' ? m.ui : m.content);
```

이 세 단계는 Angular에서도 유사한 API(exposeComponent, uiChatResource, hb-render-message)로 구현됩니다.

기능 체크리스트

생성형 UI – 모델 기반 컴포넌트 구성.
클라이언트 측 도구 – 앱 내 함수 호출.
구조화된 출력 – Skillet 스키마가 타입이 지정된 JSON을 강제합니다.
스트리밍 – 텍스트, 배열, 객체의 증분 렌더링.
모든 모델 – OpenAI, Anthropic, Gemini, Bedrock, Azure, Ollama 또는 사용자 지정 백엔드용 어댑터.
코드 실행 샌드박스 – 모델 생성 JavaScript를 안전하게 실행하는 선택적 런타임.

실제 예제 실행

저장소에는 React와 Angular로 각각 구축된 ATC 데모(항공 교통 관제 지도)가 포함되어 있으며 다음을 보여줍니다:

adsb.lol의 실시간 지도 데이터.
등록된 FlightCard 컴포넌트와 항공기를 조회하는 도구를 사용하여 질문에 답하는 어시스턴트.

로컬에서 시도하려면:

nvm use
npm ci
npx nx serve atc-server   # OpenAI와 통신하는 Express 브리지 시작
npx nx serve atc-react    # React 프런트엔드(또는 atc-angular for Angular)

먼저 .env 파일에 OPENAI_API_KEY를 설정하세요.

전체 UI가 필요한 경우

Hashbrown은 백엔드 로직과 스트리밍만 처리합니다. 기성 채팅 인터페이스가 필요하다면 팀이 threadplane(MIT 라이선스, 선택적 엔터프라이즈 지원)을 제공합니다. 이는 Hashbrown 위에 구축되어 스레드, 승인, 도구 진행 상황 UI를 제공합니다.

배후

Brian Love가 LiveLoveApp, LLC에서 이끌고 있습니다. 이 프로젝트는 MIT 라이선스이며 커뮤니티 기여를 환영합니다.

요약

Hashbrown을 사용하면 LLM 기반 어시스턴트를 React 또는 Angular 앱에 직접 포함할 수 있으며, 자체 컴포넌트와 브라우저 측 함수를 사용하고 스트리밍 및 공급자 중립을 지원합니다. 생성형 UI와 도구 호출을 위한 유연하고 헤드리스한 기반을 원하고 기성 채팅 UI에 얽매이지 않으려는 경우 탁월한 선택입니다.

liveloveapp/hashbrown