🐦 Beak.js
Beak.js 包含你需要的一切,用于在你的 React 应用中创建自定义的 AI 驱动助手。
主要特点:
- 内置 UI - 附带一个美观且完全可定制的聊天窗口。
- 易于使用 - 只需几行代码即可与你现有的 React 应用集成。
- 开源 - Beak.js 是开源并可免费使用的。
开始使用
安装
首先,将 Beak.js 添加到你的项目中:
npm install @beakjs/react --save
# 或者使用 yarn
yarn add @beakjs/react
设置
接下来,将你的应用包裹在 Beak
组件中并添加助手窗口:
import { Beak } from "@beakjs/react";
const App = () => (
<Beak
__unsafeOpenAIApiKey__="sk-..."
instructions="助手在网页应用中运行,帮助用户处理 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: "此函数更新应用的显示消息。",
parameters: {
message: {
description: "要在屏幕上显示的简短消息。",
},
},
handler: ({ message }) => {
setMessage(message);
return `将消息更新为:“${message}”`;
},
});
return <div>{message}</div>;
};
注意,函数在其相应组件挂载时立即对助手可用。这是一个强大的概念,确保助手能够调用与你的应用当前上下文相关的函数。
让助手知道屏幕上发生了什么
你可以用 useBeakInfo
轻松地让助手知道当前屏幕上的内容:
import { useBeakInfo } from "@beakjs/react";
const MyApp = () => {
const [message, setMessage] = useState("Hello World!");
useBeakInfo("当前消息", message);
// ...
};
通过将 useBeakFunction
和 useBeakInfo
一起使用,你的助手可以看到屏幕上发生的事情,并根据当前上下文在你的应用中采取行动。
部署
为了保证你的 API 密钥的安全,我们使用一个服务器端处理器,将助手的请求转发给 OpenAI。此外,该处理器还可用于为你的助手添加身份验证和速率限制。
目前支持以下框架:
点击上面的链接阅读更多关于安全部署的信息。
运行演示
要运行演示,构建项目并启动演示应用:
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
版权所有 (c) 2023, Markus Ecker