beakjs

？ beak.js

beak.jsには、ReactアプリにカスタムAI搭載アシスタントを作成するために必要なすべてが含まれています。

主な機能：

• ビルトインUI-美しい、完全にカスタマイズ可能なチャットウィンドウが付属しています。
• 使いやすい- わずか数行のコードで既存のReactアプリと統合します。
• オープンソース-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
• リミックス
• 急行

上記のリンクをクリックして、Secure Deploymentの詳細をご覧ください。

デモを実行します

デモを実行するには、プロジェクトを構築してデモアプリを開始します。

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/に移動して、デモを確認します。

問題

問題や拡張リクエストをお気軽に送信してください。

ライセンス

mit

Copyright（c）2023、Markus Ecker