使用 Liveblocks 构建多人协作 Jev 和 LLM 工作流构建器

Jev 工作流构建器的功能

Jev 工作流构建器是一个用于创建多人 AI 工作流的演示应用。它将 Jev 与大型语言模型结合，并使用 Liveblocks 提供共享状态和协作光标。

启动应用后，你可以将 Jev 与 LLM 连接起来，预览工作流测试运行，通过 REST API 调用工作流，并观察其他参与者在同一协作环境中操作。

主要功能

• 可视化工作流构建： 将 Jev 和 LLM 组件连接到工作流中。
• 多人协作： 通过 Liveblocks 查看共享的应用状态和其他用户的光标。
• 工作流测试： 在从外部调用工作流之前预览测试运行。
• REST API 访问： 以编程方式调用已配置的工作流。
• AI 服务集成： 使用 Typesafe 和 Vercel AI Gateway 及其各自的 API 凭据。

前置条件

设置项目之前，请确保计算机上已安装 Node.js 和 npm。你还需要注册演示所用三个外部服务的账户：

• 一个 Liveblocks 账户
• 一个 Typesafe 账户
• 一个 Vercel 账户

安装与设置

1. 安装依赖

在项目根目录打开终端并安装所有必需的软件包：

npm install

2. 获取 Liveblocks 密钥

1. 在 Liveblocks 控制台创建账户或登录。
2. 打开 API 密钥页面。
3. 复制你的 secret 密钥。

3. 获取 Typesafe API 密钥

1. 在 typesafe.ai 创建账户或登录。
2. 打开 Typesafe 密钥控制台。
3. 复制你的 API 密钥。

4. 获取 Vercel AI Gateway 密钥

1. 在 Vercel 创建账户或登录。
2. 打开 Vercel AI Gateway 控制台。
3. 复制你的 AI Gateway 密钥。

5. 配置环境变量

在项目根目录创建名为 .env 的文件。使用应用所需的环境变量名称添加三个凭据：

LIVEBLOCKS_SECRET_KEY=your_liveblocks_secret_key
TYPESAFE_API_KEY=your_typesafe_api_key
AI_GATEWAY_API_KEY=your_vercel_ai_gateway_key

将每个占位符替换为对应的密钥。由于此文件包含可授予外部服务访问权限的凭据，请妥善保密。

6. 启动开发服务器

运行本地开发命令：

npm run dev

服务器就绪后，在浏览器中打开 http://localhost:3000。

基本用法

构建工作流

使用构建器界面将 Jev 与 LLM 组件连接起来。根据要测试的行为排列并连接可用的工作流元素。

预览测试运行

使用工作流预览功能在应用中运行测试。预览运行可以让你检查工作流行为，同时继续在构建器中操作。

通过 REST API 调用工作流

演示支持通过 REST API 调用工作流。发送请求时，请使用项目公开的 API 详细信息。README 未指定固定的端点、HTTP 方法或请求架构，因此请使用运行中应用所需的路由和负载，不要假定通用格式。

尝试多人协作

让多个参与者打开应用，观察其协作功能。Liveblocks 会同步多人状态并显示光标，因此你可以看到其他用户在共享工作流环境中的活动。

高级提示

保护凭据

不要将机密值直接放入源文件，也不要在客户端示例中暴露这些值。请将其存储在 .env 中，避免共享该文件；如果密钥意外泄露，请在其提供商控制台中轮换密钥。

逐个服务验证配置

如果应用可以启动但某项功能失败，请确认每个环境变量都存在且包含正确的凭据。Liveblocks 为多人协作提供支持，而 Typesafe 和 Vercel AI Gateway 密钥则支持项目的 AI 相关集成。

编辑环境变量后重启

如果开发服务器运行期间添加或替换了密钥，请停止并重新运行 npm run dev，以便应用重新加载环境配置。

将协作与工作流执行分开测试

首先确认多个参与者可以看到共享状态和光标。然后测试工作流预览和 REST API 调用。分别检查这些方面有助于更容易地定位配置问题。

通过预览运行进行迭代

在调整 Jev 和 LLM 组件的连接方式时，请使用预览运行。确认工作流在构建器中的运行符合预期后，再通过 REST API 调用它。

结论

Jev 工作流构建器展示了如何在一个应用中结合 AI 工作流构建、基于 REST 的执行、测试预览和实时协作。安装依赖并配置三个必需的服务密钥后，你可以在本地运行项目，组装 Jev 和 LLM 工作流，并探索同步状态与多人光标。