Show HN: AI Workflow Builder App Template for React
JointJS+ and JointJS provide a demo of an AI workflow builder that enables building AI agents through a drag-and-drop interface, featuring automatic layout, custom shapes, navigator, and many more capabilities for commercial and open-source projects.
AI Workflow Builder – Demo applications & examples
All demos
AI Workflow Builder
JointJS+
All demos
START fREE TRIAL
Made with JointJS+
Made with JointJS+
Made with JointJS+ and Bryntum
Coming soon in JointJS+
Made with JointJS
Made with JointJS
Demo instructions
Extend the default workflow or build your own from scratch—add new actions, configure agents, jot down notes, and explore everything the diagram can do.
Zoom & Pan
Automatic layout
Custom shapes
Toolbar
Minimap
Property editor & viewer
Popups
Element palette
Undo/Redo
Import/Export
Export to JSON
Export to PNG/JPEG
Link labels
Ports
Tooltips
Drag & Drop
Animation
Element tools
Content-driven shapes
Copy & Paste
Keyboard
Selection
Validation
Simulation
Graph API
Integration
Menus
Responsive
Guidelines
Save/Load
Shape transformation
Text content
Context Toolbar
VIEW SOURCE CODE
AI Workflow Builder
JointJS+
fREE TRIAL
Get code
Full preview
Made with JointJS+
The source code of this demo is available as part of the JointJS+ commercial license. Don't have a license yet? Start a trial and use the source code of this and many other demos for free, with no obligations, for 30 days.
Compatible with:
Learn about Jointjs+
Start free trial
Made with JointJS+
All features required to build this demo are included in the commercial JointJS+ package. Don't have a license yet? Start a trial and build professional applications with ease.
Compatible with:
Learn about Jointjs+
Start free trial
Made with JointJS+ and Bryntum
This demo was created in collaboration with Bryntum. All the features used are available in the commercial versions of JointJS and Bryntum.
Compatible with:
Learn about bryntum
Start free jointjs+ trial
Coming soon in JointJS+
All the features required to build this demo are included in the upcoming JointJS+ release. Don't have a license yet? Start a trial and build professional applications with ease.
Compatible with:
Learn about Jointjs+
Start free trial
Made with JointJS
The source code of this demo is available in the JointJS open-source library which helps developers create simple visual applications in less time.
Compatible with:
Download JointJS
View code on github
Made with JointJS
All features required to build this demo application are included in our open-source library, JointJS. Download the package and create basic visual applications in no time.
Compatible with:
Download JointJS
View code on codepen
Enable your users to design AI agents through a drag-and-drop interface built into your web app. This demo shows how JointJS for React handles agent-building UIs: adding skills and prompts, wiring up tools, and defining agent behavior visually. It ships with automatic layout, custom shapes, a navigator and many more features out of the box — the same pieces you'd use to build this into your own product.
Made with JointJS+
Made with JointJS+
All features required to build this demo are included in the commercial JointJS+ package. Don't have a license yet? Start a trial and build professional applications with ease.
Made with JointJS+ and Bryntum
This demo was created in collaboration with Bryntum. All the features used are available in the commercial versions of JointJS and Bryntum.
Coming soon in JointJS+
All the features required to build this demo are included in the upcoming JointJS+ release. Don't have a license yet? Start a trial and build professional applications with ease.
Made with JointJS
The source code of this demo is available in the JointJS open-source library which helps developers create simple visual applications in less time.
Made with JointJS
All features required to build this demo application are included in our open-source library, JointJS. Download the package and create basic visual applications in no time.
Demo instructions
Extend the default workflow or build your own from scratch—add new actions, configure agents, jot down notes, and explore everything the diagram can do.
Zoom & Pan
Automatic layout
Custom shapes
Toolbar
Minimap
Property editor & viewer
Popups
Element palette
Undo/Redo
Import/Export
Export to JSON
Export to PNG/JPEG
Link labels
Ports
Tooltips
Drag & Drop
Animation
Element tools
Content-driven shapes
Copy & Paste
Keyboard
Selection
Validation
Simulation
Graph API
Integration
Menus
Responsive
Guidelines
Save/Load
Shape transformation
Text content
Context Toolbar
Boilerplate applications
AI workflow builders
React
Zoom & Pan
Automatic layout
Custom shapes
Toolbar
Minimap
Property editor & viewer
Popups
Element palette
Undo/Redo
Import/Export
Export to JSON
Export to PNG/JPEG
Link labels
Ports
Tooltips
Drag & Drop
Animation
Element tools
Content-driven shapes
Copy & Paste
Keyboard
Selection
Validation
Simulation
Graph API
Integration
Menus
Responsive
Guidelines
Save/Load
Shape transformation
Text content
Context Toolbar