iblai-workflow

Build a visual AI workflow editor with draggable canvas and node types for Next.js apps.

15|3|Updated Mar 27, 2026

Search Tags:#workflow #Next.js #redux #drag-and-drop #visual-editor #workflow-editor #iblai-js

Ready to run

npx skills add https://github.com/iblai/vibe --skill iblai-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: iblai-workflow
Source: https://github.com/iblai/vibe/tree/main/skills/iblai-workflow
Command: npx skills add https://github.com/iblai/vibe --skill iblai-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual workflow tooling to design, configure, and deploy AI-driven processes inside Next.js apps, reducing boilerplate and integration time.

Core Features & Use Cases

Visual workflow editor with multiple node types (start, mentor, conditional, while, end, and more)
draggable canvas with a custom canvas, pan/zoom, undo/redo, and auto-save
Two-page architecture: a workflows list page and an editor page with a node-config panel
Seamless IBLAI SDK integration using @iblai/iblai-js/web-containers and data-layer hooks, plus a consistent brand and design system
Practical use cases include building AI agent pipelines, orchestrating mentor responses, and condition-based branches within a Next.js app

Quick Start

Run the provided setup to start the Next.js app and open the workflow editor at http://localhost:3000.

Frequently Asked Questions about iblai-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a visual workflow editor in Next.js?▼

A visual AI workflow editor lets you design, configure, and deploy AI-driven processes by dragging node types onto a canvas. It reduces boilerplate by providing a visual interface for orchestrating mentor responses and condition-based branches within Next.js apps.

How do I add drag-and-drop nodes to a Next.js workflow canvas?▼

Add drag-and-drop nodes to a Next.js workflow canvas by integrating the @iblai/iblai-js/web-containers and data-layer hooks. This setup provides a draggable canvas supporting node types like start, mentor, conditional, while, and end.

Can I use Redux to manage AI workflow state in Next.js?▼

Yes, you can use Redux to manage AI workflow state in Next.js by setting up mentor and workflows slices. This store configuration supports the visual editor's draggable canvas, node configurations, and auto-save patterns.

Does the iblai workflow editor support auto-save and publish patterns?▼

Yes, the visual workflow editor supports auto-save and publish patterns. It handles saving, validating, and publishing workflows directly within the Next.js app using the @iblai/iblai-js SDK integration.

What's the best way to orchestrate mentor responses in a visual AI workflow?▼

The best way to orchestrate mentor responses is using a visual node-based editor with condition-based branches. This allows you to visually configure AI agent pipelines and manage mentor node interactions within your Next.js application.

Do I need the iblai-js SDK to validate and publish workflows in Next.js?▼

Yes, you need the @iblai/iblai-js SDK web-containers and data-layer hooks to validate and publish workflows in Next.js. This integration provides the required architecture for saving, validating, and deploying workflows.