브라우저 AI 모델 프로바이더

브라우저 AI 모델 프로바이더

jakobhoeg/browser-ai 는 클라이언트 측 인브라우저(browser in-browser) AI 모델을 위한 기본 AI SDK 프로바이더 역할을 하는 커뮤니티 프로바이더예요. JavaScript Prompt API를 통해 Chrome과 Edge의 네이티브 브라우저 AI 모델용 모델 프로바이더를 제공하며, 🤗 Transformers.js와 WebLLM 두 가지로 오픈소스 인브라우저 모델을 사용할 수 있는 모델 프로바이더도 제공해요.

참고: AI SDK의 v5와 v6을 모두 지원해요.

출처: 문서

본문

설치 (Installation)

@browser-ai/core(이전 이름 @built-in-ai) 패키지는 Chrome·Edge 브라우저의 내장 AI 모델용 AI SDK 프로바이더예요. 다음과 같이 설치할 수 있어요:

@browser-ai/web-llm 패키지는 WebLLM 추론 엔진을 사용하는 인기 오픈소스 모델용 AI SDK 프로바이더예요. 다음과 같이 설치할 수 있어요:

@browser-ai/transformers-js 패키지는 Transformers.js를 사용하는 인기 오픈소스 모델용 AI SDK 프로바이더예요. 다음과 같이 설치할 수 있어요:

프로바이더 인스턴스 (Provider Instances)

@browser-ai/core

@browser-ai/core에서 기본 프로바이더 인스턴스 browserAI를 임포트할 수 있어요:

import { browserAI } from '@browser-ai/core';

const model = browserAI();

다음의 선택적 설정으로 모델을 커스터마이즈할 수 있어요:

  • temperature number

    모델 응답의 무작위성을 제어해요. 대부분의 모델에서 0은 거의 결정적인 결과를 의미하고, 값이 높을수록 무작위성이 커져요.

  • topK number

    다음 토큰 선택을 제한해 생성 텍스트의 다양성과 일관성을 제어해요.

@browser-ai/web-llm

@browser-ai/web-llm에서 기본 프로바이더 인스턴스 webLLM을 임포트할 수 있어요:

import { webLLM } from '@browser-ai/web-llm';

const model = webLLM();

@browser-ai/transformers-js

@browser-ai/transformers-js에서 기본 프로바이더 인스턴스 transformersJS를 임포트할 수 있어요:

import { transformersJS } from '@browser-ai/transformers-js';

const model = transformersJS();

언어 모델 (Language Models)

@browser-ai/core

브라우저가 모델 오케스트레이션을 처리하므로, Prompt API를 지원하는 모든 브라우저에서 이 프로바이더는 자동으로 동작해요. 예를 들어 클라이언트가 Edge를 사용하면 Phi4-mini를, Chrome을 사용하면 Gemini Nano를 사용해요.

@browser-ai/web-llm

이 프로바이더는 Llama3, Qwen3 같은 수많은 인기 오픈소스 모델을 사용할 수 있게 해줘요. 전체 목록은 공식 WebLLM 문서를 참고하세요.

@browser-ai/transformers-js

이 프로바이더는 Transformers.js 라이브러리로 Huggingface의 수많은 인기 오픈소스 모델을 사용할 수 있게 해줘요.

사용 예시 (Example usage)

@browser-ai/core
import { streamText } from 'ai';
import { browserAI } from '@browser-ai/core';

const result = streamText({
  model: browserAI(), // 특정 브라우저 모델을 기본으로 사용
  prompt: 'Hello, how are you',
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}
@browser-ai/web-llm
import { streamText } from 'ai';
import { webLLM } from '@browser-ai/web-llm';

const result = streamText({
  model: webLLM('Qwen3-0.6B-q0f16-MLC'),
  prompt: 'Hello, how are you',
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}
@browser-ai/transformers-js
import { streamText } from 'ai';
import { transformersJS } from '@browser-ai/transformers-js';

const result = streamText({
  model: transformersJS('HuggingFaceTB/SmolLM2-360M-Instruct'),
  prompt: 'Hello, how are you',
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}

더 많은 예시와 API 레퍼런스는 문서를 확인해 주세요.

더 알아보기 (Learn more)

전체 사이트맵