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與您的應用一起使用

您可以通過使用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 ) ;

  // ...
} ;

通過將useBeakFunction與useBeakInfo一起使用，您的助手可以看到屏幕上發生的事情，並根據當前上下文在應用程序中採取行動。

部署

為了確保您的API密鑰安全，我們使用服務器端處理程序，將您的助手的請求轉發到OpenAI。此外，該處理程序可用於向您的助手增加身份驗證和費率限制。

目前，支持以下框架：

next.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/查看演示。