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
• 混音
• 表达

通过单击上面的链接，了解有关安全部署的更多信息。

运行演示

要运行演示，请构建项目并启动演示应用程序：

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

问题

随时提交问题和增强请求。

执照

麻省理工学院

版权（c）2023，马库斯·埃克（Markus Ecker）