Open Agent Builder (with Composio)

Note: This project is actually a fork of Open Agent Builder released by Firecrawl team. Some features are still very new and we welcome contributions and PRs!

The application is a visual workflow builder for creating AI agent pipelines powered by Composio's 10,000 + tools integration making a skill layer for your AI agents. You essentially build complex agent workflows with a drag-and-drop interface, then execute them with real-time streaming updates.

How It Works:

1. Drag-and-drop interface for building agent workflows
2. Real-time execution with streaming updates
3. 8 core node types: Start, Agent, Tools, Transform, If/Else, While Loop, User Approval, End
4. MCP protocol support for extensible tool integration using Composio

We use:

Technology	Purpose
Composio	10,000 + tools integration making a skill layer for your AI agents
Next.js 16 (canary)	React framework with App Router for frontend and API routes
TypeScript	Type-safe development across the stack
LangGraph	Workflow orchestration engine with state management, conditional routing, and human-in-the-loop support
Convex	Real-time database with automatic reactivity for workflows, executions, and user data
Clerk	Authentication and user management with JWT integration
Tailwind CSS	Utility-first CSS framework for responsive UI
React Flow	Visual workflow builder canvas with drag-and-drop nodes
Anthropic	Claude AI integration with native MCP support (Claude Haiku 4.5 & Sonnet 4.5)
OpenAI	gpt-5 integration
Groq	Fast inference for open models
E2B	Sandboxed code execution for secure transform nodes

Installation & Setup

1. Clone the Repository

git clone https://github.com/patchy631/ai-engineering-hub.git
cd ai-engineering-hub/open-agent-builder
npm install

2. Set Up Convex (Database)

Convex handles all workflow and execution data persistence.

# Install Convex CLI globally
npm install -g convex

# Initialize Convex project
npx convex dev

This will:

• Open your browser to create/link a Convex project
• Generate a NEXT_PUBLIC_CONVEX_URL in your .env.local
• Start the Convex development server

Keep the Convex dev server running in a separate terminal.

3. Set Up Clerk (Authentication)

Clerk provides secure user authentication and management.

1. Go to clerk.com and create a new application
2. In your Clerk dashboard:
   • Go to API Keys
   • Copy your keys
3. Go to JWT Templates → Convex:
   • Click "Apply"
   • Copy the issuer URL

Add to your .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. Configure Convex Authentication

Edit convex/auth.config.ts and update the domain:

export default \{
  providers: [
    \{
      domain: "https://your-clerk-domain.clerk.accounts.dev", // Your Clerk issuer URL
      applicationID: "convex",
    \},
  ],
\};

Then push the auth config to Convex:

npx convex dev

5. Optional: Configure Default LLM Provider

While users can add their own LLM API keys through the UI (Settings → API Keys), you can optionally set a default provider in .env.local:

# Anthropic Claude (Recommended - Native MCP support with Haiku 4.5 & Sonnet 4.5)
ANTHROPIC_API_KEY=sk-ant-...

# OpenAI GPT-5
OPENAI_API_KEY=sk-...

# Groq
GROQ_API_KEY=gsk_...

Important: For workflows using MCP tools, Anthropic Claude is currently the recommended provider as it has native MCP support.

6. Optional: E2B Code Interpreter

For advanced transform nodes with sandboxed code execution:

# E2B Code Interpreter (Optional)
E2B_API_KEY=e2b_...

Get your key at e2b.dev

Running the Application

# Terminal 1: Convex dev server
npx convex dev

# Terminal 2: Next.js dev server
npm run dev

Or run both with one command:

npm run dev:all

Visit http://localhost:3000

📬 Stay Updated with Our Newsletter!

Get a FREE Data Science eBook 📖 with 150+ essential lessons in Data Science when you subscribe to our newsletter! Stay in the loop with the latest tutorials, insights, and exclusive resources. Subscribe now!

Contribution