Open Agent Builder

通过可视化无代码界面构建、测试并部署 AI Agent 工作流

文档 • 示例工作流

---

什么是 Open Agent Builder？

Open Agent Builder 是一个可视化工作流构建器，旨在通过 Firecrawl 创建 AI Agent 流水线。通过拖拽式界面设计复杂的 Agent 工作流，并实现实时流式执行。

适用场景：

• 网页抓取与数据提取工作流
• 多步 AI Agent 流水线
• 自动化研究与内容生成
• 数据转换与分析
• 具备人工确认机制的网页自动化

注意： 本项目正处于积极开发阶段。部分功能仍在完善中，欢迎提交贡献和 PR！

---

核心功能

可视化工作流构建器

• 拖拽式界面：用于构建 Agent 工作流
• 实时执行：支持流式更新
• 8 种核心节点类型：开始 (Start)、Agent、MCP 工具 (MCP Tools)、转换 (Transform)、条件判断 (If/Else)、While 循环 (While Loop)、人工审核 (User Approval)、结束 (End)
• 模板库：提供预构建的工作流模板
• MCP 协议支持：支持可扩展的工具集成

由 Firecrawl 驱动

• 原生 Firecrawl 集成：用于网页抓取与搜索

企业级功能

• LangGraph 执行引擎：实现可靠的状态管理
• Clerk 身份验证：提供安全的多用户访问
• Convex 数据库：实现数据持久化存储
• API 接口：支持程序化执行
• 人工介入 (Human-in-the-loop)：支持敏感操作的审核机制

---

技术栈

技术	用途
Firecrawl	网页抓取 API，将网站转换为 LLM 友好的数据
Next.js 16 (canary)	使用 App Router 的 React 框架，用于前端和 API 路由
TypeScript	全栈类型安全开发
LangGraph	工作流编排引擎，支持状态管理、条件路由和人工介入
Convex	实时数据库，自动响应工作流、执行和用户数据变更
Clerk	带有 JWT 集成的身份验证与用户管理
Tailwind CSS	用于响应式 UI 的原子化 CSS 框架
React Flow	可视化工作流构建画布，支持拖拽节点
Anthropic	Claude AI 集成，原生支持 MCP (Claude Haiku 4.5 & Sonnet 4.5)
OpenAI	gpt-5 集成 (即将支持 MCP)
Groq	开源模型的快速推理 (即将支持 MCP)
E2B	安全的沙箱环境，用于转换节点的代码执行
Vercel	部署平台，支持边缘函数 (Edge Functions)

---

前置要求

在开始之前，请确保具备以下条件：

1. Node.js 18+ 已安装在你的机器上
2. Firecrawl API key (网页抓取必备) - 点击获取
3. Convex 账号 - 免费注册
4. Clerk 账号 - 免费注册

注意： 设置完成后，LLM API Key 可直接通过 UI 的“设置 (Settings) → API Keys”添加。对于 MCP 工具支持，目前建议将 Anthropic Claude (Haiku 4.5 或 Sonnet 4.5) 作为默认选项。

---

安装与设置

1. 克隆仓库

git clone https://github.com/firecrawl/open-agent-builder.git
cd open-agent-builder
npm install

2. 设置 Convex (数据库)

Convex 负责处理所有工作流和执行数据的持久化。

# 全局安装 Convex CLI
npm install -g convex

# 初始化 Convex 项目
npx convex dev

此操作将：

• 在浏览器中打开以创建/关联 Convex 项目
• 在你的 .env.local 文件中生成 NEXT_PUBLIC_CONVEX_URL
• 启动 Convex 开发服务器

请保持 Convex 开发服务器在独立的终端中运行。

3. 设置 Clerk (身份验证)

Clerk 提供安全的用户身份验证和管理。

1. 前往 clerk.com 并创建一个新应用
2. 在 Clerk 仪表板中：
   • 进入 API Keys
   • 复制你的密钥
3. 进入 JWT Templates → Convex：
   • 点击“Apply”
   • 复制颁发者 (Issuer) URL

将以下内容添加到 .env.local：

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

# Clerk + Convex Integration
CLERK_JWT_ISSUER_DOMAIN=https://your-clerk-domain.clerk.accounts.dev

4. 配置 Convex 身份验证

编辑 convex/auth.config.ts 并更新你的域名：

// 将此处的域名修改为你的 Clerk 域名
export default {
  providers: [
    {
      domain: "https://your-clerk-domain.clerk.accounts.dev",
      applicationID: "convex",
    },
  ],
};