Replicating OpenAI AgentBuilder - Build AI workflows through drag-and-drop interface
- 🎯 Visual Canvas - Intuitive drag-and-drop interface based on React Flow
- 🧩 Rich Nodes - 8 node types to meet various workflow requirements
- 💾 Local Storage - Lightweight file-based database, no additional installation needed
- ⚡️ Rapid Prototyping - Next.js 15+ App Router for extremely fast development experience
- 🎨 Modern UI - shadcn/ui component library, beautiful and easy to use
- 📦 Open Source Friendly - Clear code structure, easy to extend
- Node.js 18+
- pnpm (required)
# Clone the repository
git clone https://github.com/01-ai/open-agentkit-builder.git
cd open-agentkit-builder
# Install dependencies (must use pnpm)
pnpm install
# Start the development server
pnpm devVisit http://localhost:3300/agent-builder/ to get started.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- UI Library: shadcn/ui + Tailwind CSS
- Canvas: React Flow (@xyflow/react)
- Database: Local JSON files
- Package Manager: pnpm
| Icon | Node Type | Description |
|---|---|---|
| 🎬 | Start Node | Entry point of the workflow |
| 🤖 | LLM Call | Call large language models |
| 🔀 | Condition | Branch execution based on conditions |
| 🔄 | Loop | Repeat certain operations |
| ✋ | User Approval | Wait for user confirmation |
| 🔍 | File Search | Retrieve relevant documents |
| ⚙️ | Data Transform | Transform data formats |
| 🏁 | End Node | Exit point of the workflow |
Click the "New Workflow" button on the homepage, and the system will automatically create a new workflow and navigate to the editor.
Select the desired node type from the node library on the left panel and click to add it to the canvas.
Drag the connection points of nodes to connect them to other nodes and build your workflow.
After editing, click the "Save" button in the top right corner to save the workflow locally.
open-agent-builder/
├── app/
│ ├── (with-sidebar)/ # Pages with sidebar
│ ├── (without-sidebar)/ # Pages without sidebar
│ │ └── edit/ # Workflow editor
│ └── layout.tsx # Root layout
├── components/
│ └── ui/ # shadcn UI components
├── lib/
│ ├── code-generator.ts # Code generator
│ ├── nodes/ # Node definitions
│ ├── export/ # Workflow import/export
│ └── utils.ts # Utility functions
├── types/
│ └── workflow.ts # Workflow type definitions
├── templates/ # Workflow templates
├── tests/ # Unit tests
└── public/ # Static assets
# Development mode
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Lint code
pnpm lint
# Format code
pnpm format
# Run tests
pnpm test- Basic project architecture
- Workflow list and management
- Visual canvas editor
- Rich node types
- Workflow save/load
- Workflow import/export
- Code generation functionality
- Detailed node configuration panel optimization
- Custom node styles
- Enhanced workflow validation
- Collaborative editing support
- OpenAI API integration
- Workflow execution engine
- Real-time execution status tracking
- Multi-user support
- Package Manager: Must use pnpm
- Code Style: Follow ESLint configuration
- Commit Format: Follow Conventional Commits
- Component Style: Prefer functional components
- Language: Use English for code comments and variable names
We welcome Issues and Pull Requests!
Before submitting a PR, please make sure:
- Code follows project standards
- Passes all tests:
pnpm test - Passes linting:
pnpm lint - Code is formatted:
pnpm format
This project is licensed under MIT License - see LICENSE file for details
- OpenAI AgentBuilder - Original inspiration
- React Flow - Powerful canvas library
- shadcn/ui - Excellent component library
- Next.js - Best React framework
Made with ❤️ by the community