Build & Deploy AI Agent Workflow Builder using NextJs, Mongodb, React, Prisma, Upstash
💻 Source Code: https://tinyurl.com/flowai-sourcecode
🎨 FlowAI Asset: https://tinyurl.com/flowai-assets
In this video, we build Flow AI full AI agent workflow builder platform from scratch.
You’ll learn how to create a drag-and-drop workflow canvas where users can build powerful AI agents using nodes like Agent, If/Else, HTTP, Comment, and End using Next.js 16, React, Monogdb, Prisma, Upstash, Shadcn
☕ Support my work: https://tinyurl.com/support-buymecoffee
🙏 Like & Subscribe To the Channel: https://tinyurl.com/subcribe-to-techw...
🌏 Visit Website: https://techwithemma.com
📚 Resources:
Try Kinde Auth: https://dub.sh/kinde-auth
Upstash: https://upstash.com
AI Sdk: https://ai-sdk.dev
🎥 Part 2 - • Build & Deploy AI Agent Workflow Builder u...
📢 Stay Connected:
💻 Join our Discord Community: / discord
🐦 Follow us on Twitter: https://x.com/techwithemma
🖼️ Follow us on Instagram: / techwithemmaofficial
We’ll cover:
🔐 Authentication
🗄️ Database setup with MongoDB & Prisma
🎨 Workflow canvas & custom nodes
🤖 Agent executor logic
🔀 If/Else condition execution
🌐 HTTP node integration
🔌 Support MCP server connection
💬 Chat preview system
🏷️ Embeddable script for any website
🚀 Deployment on Vercel
✈️ Build & Deploy an AI Agent Workflow Builder Platform | Next.js + MongoDB + Prisma + Upstash
⏲️Timestamps 👇
00:00:00 - Intro & Demo
00:15:52 - Project Setup
00:51:13 - Database & Prisma Setup
01:01:16 - Authentication
01:09:42 - Create & Fetch Workflows
01:52:37 - Single Workflow Page
02:30:35 - Workflow Canvas
03:40:37 - Custom Node Component & Start Node
04:29:42 - Agent Node & Settings
06:42:47 - If/Else Node & Settings
07:22:01 - Comment & End Node
07:36:08 - Update Workflow
08:04:06 - Chat Preview
08:43:11 - Workflow Executor Setup
(Coming in part-2)
09:35:23 - Agent Executor
10:22:45 - If/Else & End Executor
10:36:53 - Workflow Executor (Continued)
11:33:40 - Add MCP Server
13:08:31 - Embed Script
13:29:15 - Deployment