Beak.js 开源项目使用教程

Beak.js 开源项目使用教程

beakjs🐦 Custom conversational assistants for your React app.项目地址:https://gitcode.com/gh_mirrors/be/beakjs

1. 项目的目录结构及介绍

Beak.js 项目的目录结构如下：

beakjs/
├── demo/
│   └── frontend/
│       └── presentation/
├── docs/
├── packages/
├── scripts/
├── github/
│   └── workflows/
├── .gitignore
├── LICENSE
├── README.md
├── VERSION
├── package.json
├── tsconfig.json
└── yarn.lock

目录结构介绍

• demo/: 包含项目的演示代码，特别是前端演示代码。
• docs/: 存放项目的文档文件。
• packages/: 包含项目的主要代码包。
• scripts/: 存放项目的脚本文件。
• github/workflows/: 存放 GitHub Actions 的工作流配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的介绍和使用说明。
• VERSION: 项目的版本信息。
• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• yarn.lock: Yarn 包管理器的锁定文件。

2. 项目的启动文件介绍

Beak.js 项目的启动文件主要集中在 demo/frontend/presentation 目录下。以下是启动文件的介绍：

• demo/frontend/presentation/env: 环境变量配置文件，包含 OpenAI API 密钥的配置。
• demo/frontend/presentation/App.js: 项目的入口文件，包含 Beak 组件的初始化和配置。

启动文件示例

import { Beak } from "@beakjs/react";

const App = () => (
  <Beak
    __unsafeOpenAIApiKey__="sk-your-openai-key"
    instructions="Assistant is running in a web app and helps the user with XYZ"
  >
    <MyApp />
    <AssistantWindow />
  </Beak>
);

3. 项目的配置文件介绍

Beak.js 项目的配置文件主要包括以下几个：

• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• demo/frontend/presentation/env: 环境变量配置文件，包含 OpenAI API 密钥的配置。

配置文件示例

package.json

{
  "name": "beakjs",
  "version": "1.0.0",
  "scripts": {
    "build": "yarn build",
    "dev": "yarn dev"
  },
  "dependencies": {
    "@beakjs/react": "^1.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

demo/frontend/presentation/env

VITE_OPENAI_API_KEY=sk-your-openai-key

通过以上配置文件，可以确保 Beak.js 项目在开发和部署过程中的正确运行。

beakjs🐦 Custom conversational assistants for your React app.项目地址:https://gitcode.com/gh_mirrors/be/beakjs