Back to Browse

Building a Workflow Canvas with AI + React Flow | The CD Show Ep 13

1.9K views
Apr 10, 2025
1:12:44

In this episode of The CD Show, Aleks and Darko dive into live prototyping with AI and React Flow. Instead of traditional wireframing, they let an AI assistant build a functional workflow canvas from scratch. They walk through setup, debug UI issues, explore node design, and shape an interactive canvas that could one day power real CD pipelines. It's part build log, part wild ride — and surprisingly productive! Timestamps ⏰ 00:00 - Kickoff: AI-powered prototyping experiment 01:30 - React Flow vs D3: Choosing a visualization framework 04:10 - Starting with a blank project for better AI results 07:40 - Prompting AI to scaffold a basic canvas 10:30 - First results: Workflow boxes appear 13:00 - Strategy: incremental vs holistic node design 16:00 - Attempting screenshot-based UI matching 19:00 - Learning React Flow’s node/component model 24:30 - Designing custom nodes with metadata 27:45 - Commit early, commit often: Git integration habits 30:00 - Prioritizing CD-related node information 34:00 - Sidebar interaction ideas & documentation dig 37:00 - Visual tweaks: colors, handles, and layout 40:00 - Fixing edge rendering issues after node customization 44:30 - Emojis, flags & playful UI touches 48:00 - Introducing external Git repo nodes 52:00 - Discussing message/event info for Git integrations 57:00 - Adding additional flows to the canvas 01:03:00 - Final thoughts: sidebar development and next steps 01:10:00 - Reflecting on the progress + closing the episode

Download

1 formats

Video Formats

360pmp4103.0 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Building a Workflow Canvas with AI + React Flow | The CD Show Ep 13 | NatokHD