AI Agent Builder Platform

A powerful, visual platform for building and managing AI agents. Create complex agent workflows using a drag-and-drop node-based editor.

🚀 Features

• Visual Workflow Builder: Design agent logic using an intuitive node-based interface powered by React Flow.
• Diverse Node Types:
  • Agent Node: Define core agent behaviors.
  • Logic Nodes: Implement control flow with If/Else and While loops.
  • Interaction Nodes: Add User Approval steps for human-in-the-loop workflows.
  • Integration Nodes: Connect to external services with API nodes.
• Real-time Persistence: Seamlessly save and load agent configurations using Convex.
• Secure Authentication: User management and security provided by Clerk.
• Modern UI/UX: Built with Next.js 16, Tailwind CSS 4, and Radix UI for a polished experience.

🛠️ Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: Radix UI, Lucide React
• Visual Flow: React Flow (@xyflow/react)
• Backend & Database: Convex
• Authentication: Clerk

📦 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd ai-agent-builder-platform

2. Install dependencies

   npm install

3. Environment Setup

   Create a .env.local file in the root directory and add your Clerk and Convex credentials:

   # Convex
   CONVEX_DEPLOYMENT=
   NEXT_PUBLIC_CONVEX_URL=
   
   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=

4. Start the Development Server

   You need to run both the Next.js frontend and the Convex backend.

   Terminal 1 (Frontend):

   npm run dev

   Terminal 2 (Backend):

   npx convex dev

5. Open the App

   Visit http://localhost:3000 in your browser.

📂 Project Structure

• app/: Next.js App Router pages and layouts.
  • agent-builder/: Core builder interface.
  • dashboard/: User dashboard for managing agents.
• convex/: Backend logic, schema, and API functions.
• components/: Reusable UI components.
• context/: Global state management (e.g., WorkflowContext).

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.