beakjs 다운로드 beakjs 소스 코드 다운로드

beakjs

기타 소스코드

1.0.0

다운로드

? beak.js

Beak.js에는 React 앱에 맞춤형 AI 기반 어시스턴트를 작성하는 데 필요한 모든 것이 포함되어 있습니다.

주요 기능 :

내장 UI- 아름답고 완벽하게 사용자 정의 할 수있는 채팅 창이 제공됩니다.
사용하기 쉬운 - 몇 줄의 코드로 기존 React 앱과 통합됩니다.
오픈 소스 -Beak.js는 오픈 소스이며 무료로 사용할 수 있습니다.

Beak.js 스크린 샷

시작하기

설치

먼저 프로젝트에 Beak.js를 추가하십시오.

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

설정

다음으로, 앱을 Beak 구성 요소에 감고 어시스턴트 창을 추가하십시오.

 import { Beak } from "@beakjs/react" ;

const App = ( ) => (
  < Beak
    __unsafeOpenAIApiKey__ = "sk-..."
    instructions = "Assistant is running in a web app and helps the user with XYZ."
  >
    < MyApp / >
    < AssistantWindow / >
  < / Beak >
) ;

이제 웹 사이트의 오른쪽 하단에 채팅 창이 준비되었습니다. 시도해보세요!

참고 : 공개 앱에서 API 키를 노출시키지 마십시오. 이는 개발을위한 것입니다. API 키를 손상시키지 않고 앱을 안전하게 배포하는 방법에 대한 정보는 배포를 참조하십시오.

Beak.js가 앱과 함께 작동합니다

Assistant가 useBeakFunction 으로 기능을 설정하여 앱에서 작업을 수행 할 수 있습니다.

 import { useBeakFunction } from "@beakjs/react" ;

const MyApp = ( ) => {
  const [ message , setMessage ] = useState ( "Hello World!" ) ;

  useBeakFunction ( {
    name : "updateMessage" ,
    description : "This function updates the app's display message." ,
    parameters : {
      message : {
        description : "A short message to display on screen." ,
      } ,
    } ,
    handler : ( { message } ) => {
      setMessage ( message ) ;

      return `Updated the message to: " ${ message } "` ;
    } ,
  } ) ;

  return < div > { message } < / div > ;
} ;

각 구성 요소가 장착되는 즉시 조수에게 기능이 제공됩니다. 이것은 강력한 개념으로, 어시스턴트가 앱의 현재 컨텍스트와 관련된 기능을 호출 할 수 있도록합니다.

조수에게 화면에서 무슨 일이 일어나고 있는지 알리십시오

useBeakInfo 사용하여 조수에게 현재 화면에 무엇을 알 수 있도록 쉽게 알 수 있습니다.

 import { useBeakInfo } from "@beakjs/react" ;

const MyApp = ( ) => {
  const [ message , setMessage ] = useState ( "Hello World!" ) ;

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

useBeakInfo 와 함께 useBeakFunction 사용하여 조수는 화면에서 무슨 일이 일어나고 있는지 확인하고 현재 컨텍스트에 따라 앱 내에서 조치를 취할 수 있습니다.

전개

API 키를 안전하게 유지하기 위해 조수의 요청을 OpenAI로 전달하는 서버 사이드 핸들러를 사용합니다. 또한이 핸들러는 보조자에게 인증 및 요금 제한을 추가하는 데 사용될 수 있습니다.

현재 다음 프레임 워크가 지원됩니다.

다음 .js
리믹스
표현하다

위의 링크를 클릭하여 보안 배포에 대해 자세히 알아보십시오.

데모를 실행하십시오

데모를 실행하려면 프로젝트를 구축하고 데모 앱을 시작하십시오.

git clone [email protected]:mme/beakjs.git && cd beakjs
yarn && yarn build
cd demo/frontend/presentation
echo " VITE_OPENAI_API_KEY=sk-your-openai-key " > .env
yarn && yarn dev

그런 다음 http : // localhost : 5173/로 이동하여 데모를보십시오.