[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73897":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":28,"discoverSource":29},73897,"open-agent-builder","firecrawl\u002Fopen-agent-builder","firecrawl","🔥 Visual workflow builder for AI agents powered by Firecrawl - drag-and-drop web scraping pipelines with real-time execution",null,"TypeScript",2259,447,16,10,0,2,13,41,6,29.95,false,"main",true,[],"2026-06-12 02:03:19","# Open Agent Builder\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fmedia4.giphy.com\u002Fmedia\u002Fv1.Y2lkPTc5MGI3NjExcGNoY25xY2ptZTZtcDN6czBmdXJ2dnpkdWVjcXlqNXNhdjgyZXpkaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\u002FtWtopK29eXAbvaDpi5\u002Fgiphy.gif\" alt=\"Demo\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\n\u003Cdiv align=\"center\">\n\n**Build, test, and deploy AI agent workflows with a visual no-code interface**\n\n[![MIT License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-green.svg)](https:\u002F\u002Fchoosealicense.com\u002Flicenses\u002Fmit\u002F)\n[![Firecrawl](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPowered%20by-Firecrawl-orange)](https:\u002F\u002Ffirecrawl.dev)\n\n[Documentation](#documentation) • [Examples](#example-workflows)\n\n\u003C\u002Fdiv>\n\n---\n\n## What is Open Agent Builder?\n\nOpen Agent Builder is a visual workflow builder for creating AI agent pipelines powered by [Firecrawl](https:\u002F\u002Ffirecrawl.dev). Design complex agent workflows with a drag-and-drop interface, then execute them with real-time streaming updates.\n\n**Perfect for:**\n- Web scraping and data extraction workflows\n- Multi-step AI agent pipelines\n- Automated research and content generation\n- Data transformation and analysis\n- Web automation with human-in-the-loop approvals\n\n> **Note:** This project is actively under development. Some features are still in progress and we welcome contributions and PRs!\n\n---\n\n## Key Features\n\n### Visual Workflow Builder\n- **Drag-and-drop interface** for building agent workflows\n- **Real-time execution** with streaming updates\n- **8 core node types**: Start, Agent, MCP Tools, Transform, If\u002FElse, While Loop, User Approval, End\n- **Template library** with pre-built workflows\n- **MCP protocol support** for extensible tool integration\n\n### Powered by Firecrawl\n- **Native Firecrawl integration** for web scraping and searching\n\n### Enterprise Features\n- **LangGraph execution engine** for reliable state management\n- **Clerk authentication** for secure multi-user access\n- **Convex database** for persistent storage\n- **API endpoints** for programmatic execution\n- **Human-in-the-loop** approvals for sensitive operations\n\n---\n\n## Tech Stack\n\n| Technology | Purpose |\n|-----------|---------|\n| **[Firecrawl](https:\u002F\u002Ffirecrawl.dev)** | Web scraping API for converting websites into LLM-ready data |\n| **[Next.js 16 (canary)](https:\u002F\u002Fnextjs.org\u002F)** | React framework with App Router for frontend and API routes |\n| **[TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F)** | Type-safe development across the stack |\n| **[LangGraph](https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flanggraph)** | Workflow orchestration engine with state management, conditional routing, and human-in-the-loop support |\n| **[Convex](https:\u002F\u002Fconvex.dev)** | Real-time database with automatic reactivity for workflows, executions, and user data |\n| **[Clerk](https:\u002F\u002Fclerk.com)** | Authentication and user management with JWT integration |\n| **[Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F)** | Utility-first CSS framework for responsive UI |\n| **[React Flow](https:\u002F\u002Freactflow.dev\u002F)** | Visual workflow builder canvas with drag-and-drop nodes |\n| **[Anthropic](https:\u002F\u002Fwww.anthropic.com\u002F)** | Claude AI integration with native MCP support (Claude Haiku 4.5 & Sonnet 4.5) |\n| **[OpenAI](https:\u002F\u002Fplatform.openai.com\u002F)** | gpt-5 integration (MCP support coming soon) |\n| **[Groq](https:\u002F\u002Fgroq.com\u002F)** | Fast inference for open models (MCP support coming soon) |\n| **[E2B](https:\u002F\u002Fe2b.dev)** | Sandboxed code execution for secure transform nodes |\n| **[Vercel](https:\u002F\u002Fvercel.com)** | Deployment platform with edge functions |\n\n---\n\n## Prerequisites\n\nBefore you begin, you'll need:\n\n1. **Node.js 18+** installed on your machine\n2. **Firecrawl API key** (Required for web scraping) - [Get one here](https:\u002F\u002Ffirecrawl.dev)\n3. **Convex account** - [Sign up free](https:\u002F\u002Fconvex.dev)\n4. **Clerk account** - [Sign up free](https:\u002F\u002Fclerk.com)\n\n> **Note:** LLM API keys can be added directly in the UI via Settings → API Keys after setup. For MCP tool support, Anthropic Claude (Haiku 4.5 or Sonnet 4.5) is currently recommended as the default option.\n\n---\n\n## Installation & Setup\n\n### 1. Clone the Repository\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Ffirecrawl\u002Fopen-agent-builder.git\ncd open-agent-builder\nnpm install\n```\n\n### 2. Set Up Convex (Database)\n\nConvex handles all workflow and execution data persistence.\n\n```bash\n# Install Convex CLI globally\nnpm install -g convex\n\n# Initialize Convex project\nnpx convex dev\n```\n\nThis will:\n- Open your browser to create\u002Flink a Convex project\n- Generate a `NEXT_PUBLIC_CONVEX_URL` in your `.env.local`\n- Start the Convex development server\n\nKeep the Convex dev server running in a separate terminal.\n\n### 3. Set Up Clerk (Authentication)\n\nClerk provides secure user authentication and management.\n\n1. Go to [clerk.com](https:\u002F\u002Fclerk.com) and create a new application\n2. In your Clerk dashboard:\n   - Go to **API Keys**\n   - Copy your keys\n3. Go to **JWT Templates** → **Convex**:\n   - Click \"Apply\"\n   - Copy the issuer URL\n\nAdd to your `.env.local`:\n\n```bash\n# Clerk Authentication\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...\nCLERK_SECRET_KEY=sk_test_...\n\n# Clerk + Convex Integration\nCLERK_JWT_ISSUER_DOMAIN=https:\u002F\u002Fyour-clerk-domain.clerk.accounts.dev\n```\n\n### 4. Configure Convex Authentication\n\nEdit `convex\u002Fauth.config.ts` and update the domain:\n\n```typescript\nexport default {\n  providers: [\n    {\n      domain: \"https:\u002F\u002Fyour-clerk-domain.clerk.accounts.dev\", \u002F\u002F Your Clerk issuer URL\n      applicationID: \"convex\",\n    },\n  ],\n};\n```\n\nThen push the auth config to Convex:\n\n```bash\nnpx convex dev\n```\n\n### 5. Set Up Firecrawl (Required)\n\n**Firecrawl is the core web scraping engine** that powers most workflows.\n\n1. Get your API key at [firecrawl.dev](https:\u002F\u002Ffirecrawl.dev)\n2. Add to `.env.local`:\n\n```bash\n# Firecrawl API (REQUIRED)\nFIRECRAWL_API_KEY=fc-...\n```\n\n> **Note:** Users can also add their own Firecrawl keys in Settings → API Keys, but having a default key in `.env.local` enables the template workflows.\n\n### 6. Optional: Configure Default LLM Provider\n\nWhile users can add their own LLM API keys through the UI (Settings → API Keys), you can optionally set a default provider in `.env.local`:\n\n```bash\n# Optional: Choose one as default\n\n# Anthropic Claude (Recommended - Native MCP support with Haiku 4.5 & Sonnet 4.5)\nANTHROPIC_API_KEY=sk-ant-...\n\n# OpenAI GPT-5 (MCP support coming soon)\nOPENAI_API_KEY=sk-...\n\n# Groq (MCP support coming soon)\nGROQ_API_KEY=gsk_...\n```\n\n> **Important:** For workflows using MCP tools (like Firecrawl integration), Anthropic Claude is currently the recommended provider as it has native MCP support. OpenAI and Groq MCP support is coming soon.\n\n### 7. Optional: E2B Code Interpreter\n\nFor advanced transform nodes with sandboxed code execution:\n\n```bash\n# E2B Code Interpreter (Optional)\nE2B_API_KEY=e2b_...\n```\n\nGet your key at [e2b.dev](https:\u002F\u002Fe2b.dev)\n\n---\n\n## Running the Application\n\n### Development Mode\n\n```bash\n# Terminal 1: Convex dev server\nnpx convex dev\n\n# Terminal 2: Next.js dev server\nnpm run dev\n```\n\nOr run both with one command:\n\n```bash\nnpm run dev:all\n```\n\nVisit [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)\n\n### Production Build\n\n```bash\nnpm run build\nnpm start\n```\n\n---\n\n## Quick Start Guide\n\n### Your First Workflow\n\n1. **Sign Up\u002FLogin** at `http:\u002F\u002Flocalhost:3000`\n2. **Add your LLM API key** in Settings → API Keys\n   - For MCP tool support: Use Anthropic Claude (Haiku 4.5 or Sonnet 4.5)\n   - For basic workflows: OpenAI or Groq also work\n3. **Click \"New Workflow\"** or select a template\n4. **Try the \"Simple Web Scraper\" template:**\n   - Pre-configured to scrape any website\n   - Uses Firecrawl for extraction\n   - AI agent summarizes the content\n5. **Click \"Run\"** and enter a URL\n6. **Watch real-time execution** with streaming updates\n\n### Understanding Node Types\n\n| Node Type | Purpose | Example Use |\n|-----------|---------|-------------|\n| **Start** | Workflow entry point | Define input variables |\n| **Agent** | AI reasoning with LLMs | Analyze data, make decisions |\n| **MCP Tool** | External tool calls | Firecrawl scraping, APIs |\n| **Transform** | Data manipulation | Parse JSON, filter arrays |\n| **If\u002FElse** | Conditional logic | Route based on conditions |\n| **While Loop** | Iteration | Process multiple pages |\n| **User Approval** | Human-in-the-loop | Review before posting |\n| **End** | Workflow completion | Return final output |\n\n---\n\n## MCP Tool Support\n\n### Current Support\n**Anthropic Claude** - Full native MCP support\n- Claude Sonnet 4.5 (Recommended)\n- Claude Haiku 4.5\n\nAnthropic's MCP implementation provides MCP support, other providers are currently in progress.\n\n### Coming Soon\n- **OpenAI** - MCP support in development\n- **Gemini** - MCP support in development\n- **Open Router** - coming soon...\n\n### Using MCP Tools\n\nMCP tools enable agents to interact with external services like Firecrawl:\n\n1. Add an **Agent** node to your workflow\n2. In the node settings, select **MCP Tools**\n3. Choose **Firecrawl** or add a custom MCP server\n4. The agent can now call Firecrawl tools like `scrape`, `search`, `crawl`\n\n**Example workflow with MCP:**\n```\nStart → Agent (with Firecrawl MCP) → End\n```\n\nThe agent can intelligently decide when to scrape pages, search the web, or crawl sites based on your instructions.\n\n---\n\n## Example Workflows\n\n### 1. Simple Web Scraper\n**What it does:** Scrape any website and get an AI summary\n\n**Nodes:** Start → Firecrawl Scrape → Agent Summary → End\n\n**Try it:**\n```bash\nInput: https:\u002F\u002Ffirecrawl.dev\nOutput: \"Firecrawl is a web scraping API that converts websites into LLM-ready markdown...\"\n```\n\n### 2. Multi-Page Research\n**What it does:** Search web, scrape top results, synthesize findings\n\n**Nodes:** Start → Firecrawl Search → Loop (Scrape Each) → Agent Synthesis → End\n\n### 3. Competitive Analysis\n**What it does:** Research companies, extract structured data, generate report\n\n**Nodes:** Start → Parse Companies → Loop (Research + Extract) → Approval → Export → End\n\n**Features used:**\n- Firecrawl web search\n- Structured JSON extraction\n- While loops for iteration\n- Human approval gates\n- Conditional routing\n\n### 4. Price Monitoring\n**What it does:** Track product prices across multiple sites\n\n**Nodes:** Start → Loop (Scrape + Extract Price) → Compare → Notify → End\n\n---\n\n## Configuration\n\n### User-Level API Keys\n\nUsers can add their own API keys via **Settings → API Keys**:\n\n- **LLM Providers:** Anthropic (Recommended for MCP), OpenAI, Groq (Required - add at least one)\n- **Firecrawl:** Personal API key (Optional - falls back to environment variable)\n- **Custom MCP Servers:** Authentication tokens\n\nThis allows:\n- Each user to use their own API quotas\n- Fallback to environment variables if not set\n- Easy key rotation and management\n\n### MCP Server Registry\n\nAdd custom MCP servers in **Settings → MCP Registry**:\n\n1. Click \"Add MCP Server\"\n2. Enter server URL and authentication\n3. Test connection to discover available tools\n4. Use in Agent nodes by selecting from MCP tools dropdown\n\n**Supported MCP Servers:**\n- Firecrawl (built-in)\n- Custom HTTP endpoints\n- Environment variable substitution: `{API_KEY}`\n\n---\n\n## Deployment\n\n### Deploying to Vercel\n\n1. **Push your code to GitHub**\n\n2. **Deploy to Vercel:**\n   ```bash\n   # Install Vercel CLI\n   npm i -g vercel\n   \n   # Deploy\n   vercel\n   ```\n\n3. **Set environment variables** in Vercel dashboard:\n   - `NEXT_PUBLIC_CONVEX_URL` (from Convex)\n   - Clerk keys\n   - `FIRECRAWL_API_KEY` (Required)\n   - Optional: Default LLM provider keys\n\n4. **Deploy Convex to production:**\n   ```bash\n   npx convex deploy\n   ```\n\n5. **Update Clerk settings:**\n   - Add your Vercel domain to allowed origins\n   - Update redirect URLs\n\n### Environment Variables Checklist\n\n**Required:**\n- `NEXT_PUBLIC_CONVEX_URL` - Convex database\n- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` - Clerk auth\n- `CLERK_SECRET_KEY` - Clerk auth\n- `CLERK_JWT_ISSUER_DOMAIN` - Clerk + Convex integration\n- `FIRECRAWL_API_KEY` - Web scraping\n\n**Optional (can be added in UI instead):**\n- `ANTHROPIC_API_KEY` - Default Claude provider (Recommended for MCP)\n- `OPENAI_API_KEY` - Default gpt-5 provider (MCP coming soon)\n- `GROQ_API_KEY` - Default Groq provider (MCP coming soon)\n- `E2B_API_KEY` - Sandboxed code execution\n\n## API Usage\n\n### Programmatic Execution\n\nGenerate an API key in **Settings → API Keys**, then:\n\n```bash\ncurl -X POST https:\u002F\u002Fyour-domain.com\u002Fapi\u002Fworkflows\u002Fmy-workflow-id\u002Fexecute-stream \\\n  -H \"Authorization: Bearer sk_live_...\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"url\": \"https:\u002F\u002Fexample.com\"}'\n```\n\n**Response:** Server-Sent Events (SSE) stream with real-time updates\n\n## Architecture\n\n```mermaid\n%%{init: {'flowchart': {'htmlLabels': false}} }%%\nflowchart TD\n  subgraph Frontend\n    A[\"Next.js Frontend\\n(React + Tailwind)\"]\n    A_desc[\"Visual workflow builder, real-time execution display, user settings and API key management\"]\n    A --> A_desc\n  end\n\n  subgraph Backend\n    B[\"API Routes (Next.js)\"]\n    B_desc[\"Workflow execution, authentication middleware, streaming SSE responses\"]\n    C[\"LangGraph Executor (Server-side only)\"]\n    C_desc[\"StateGraph orchestration, conditional routing, loop handling, human-in-the-loop interrupts\"]\n    B --> B_desc\n    C --> C_desc\n    A_desc --> B\n    B_desc --> C\n  end\n\n  subgraph Integrations\n    D1[\"Firecrawl API\"]\n    D2[\"LLMs (Claude, gpt-5, Groq)\"]\n    D3[\"MCP Servers\"]\n    C_desc --> D1\n    C_desc --> D2\n    C_desc --> D3\n  end\n\n  D_common[\"Convex Database\"]\n  D_common_desc[\"Workflows, executions, user settings, MCP configurations\"]\n  D1 --> D_common\n  D2 --> D_common\n  D3 --> D_common\n  D_common --> D_common_desc\n```\n\u003C\u002Fdetails>\n\n---\n\n\n## Project Status & Roadmap\n\n### In Progress\n- **MCP Support for OpenAI & Groq** - Adding native MCP protocol support\n- **OAuth MCP Authentication** - Support for OAuth-based MCP servers\n- **Additional MCP Integrations** - More pre-built MCP server connections\n- **Workflow Sharing** - Public template marketplace\n- **Scheduled Executions** - Cron-based workflow triggers\n\n### Partial Support\n- **E2B Code Interpreter** - Transform node sandboxing (requires E2B API key)\n- **Complex Loop Patterns** - Nested loops and advanced iteration\n- **Custom Node Types** - Plugin system for community nodes\n\n### Coming Soon\n- Full MCP support for all LLM providers\n- OAuth authentication for MCP servers\n\nWe welcome contributions and PRs to help build these features!\n\n## License\n\nThis project is licensed under the MIT License \n\n\u003Cdiv align=\"center\">\n\n**[Star us on GitHub](https:\u002F\u002Fgithub.com\u002Ffirecrawl\u002Fopen-agent-builder)** | **[Try Firecrawl](https:\u002F\u002Ffirecrawl.dev)** \n\nMade with love by the Firecrawl team\n\n\u003C\u002Fdiv>","Open Agent Builder 是一个用于创建AI代理工作流的可视化构建工具。它通过拖放界面设计复杂的工作流程，并支持实时执行和流式更新，提供包括开始、代理、MCP工具、转换、条件分支、循环、用户审批和结束在内的8种核心节点类型。此外，该平台还集成了Firecrawl以实现强大的网页抓取功能，支持LangGraph执行引擎确保可靠的状态管理，以及Clerk认证保障多用户访问安全。适用于需要进行网络爬虫与数据提取、多步骤AI代理流水线、自动化研究与内容生成、数据转换分析及带有人工介入审批的网页自动化等场景。","2026-06-11 03:47:49","high_star"]