beakjs - 便捷集成AI助理的React插件

项目介绍：Beak.js

什么是 Beak.js？

Beak.js 是一个功能强大的开源库，专为 React 应用打造，旨在帮助开发者轻松创建由 AI 驱动的定制助手。使用 Beak.js，开发者可在其应用中集成一个美观的、完全可自定义的聊天窗口，从而为用户提供智能交互体验。

主要特性

内置用户界面：Beak.js 提供了一个漂亮且设计完善的聊天窗口，用户可以根据需求进行完全定制。
简易集成：开发者可以通过几行代码轻松将 Beak.js 集成到现有的 React 应用中。
开源与免费：Beak.js 是一个开源项目，用户可以免费使用并贡献自己的代码与想法。

如何开始

安装

要使用 Beak.js，只需在项目中添加：

npm install @beakjs/react --save

# 或者使用 yarn
yarn add @beakjs/react

设置

安装好 Beak.js 后，下一步是在应用中包含 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 密钥。这仅供开发阶段使用，详细的安全部署信息请参阅项目的“部署”部分。

与应用的深度集成

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 密钥的安全，Beak.js 提供了服务端处理程序，负责转发助手的请求到 OpenAI。这个处理程序还可用于添加身份验证和速率限制功能。当前支持的框架包括：

Next.js
Remix
Express

运行演示

要运行 Beak.js 的演示，只需构建项目并启动演示应用：

git clone git@github.com: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 许可证。

Beak.js 是一个为开发者们开启全新交互可能性的工具，带来了更加智能、动态的应用体验。无论是简单的个人项目，还是复杂的企业应用，Beak.js 都能为你的创意提供强大的助力。