FlowMind AI - Workflow Automation

FlowMind is a comprehensive, full-stack application for building, managing, and monitoring AI-driven workflows. It features a modern, drag-and-drop workflow builder interface, real-time logging, and deep integrations with OpenAI for automated task execution.

🚀 Features

• Visual Workflow Builder: Drag-and-drop interface to construct complex workflows visually using React Flow.
• AI Integration: Seamlessly integrated with OpenAI to process tasks, analyze data, and generate insights.
• Real-time Monitoring: View live logs and execution status via WebSockets.
• Analytics Dashboard: Track workflow performance, success rates, and execution times with interactive charts.
• Full-stack Architecture: Robust Node.js backend with an embedded SQLite database for zero-config persistence.
• Modern UI/UX: Responsive, dark-mode ready interface built with Tailwind CSS and Framer Motion for smooth animations.

💻 Tech Stack

Frontend

• Framework: React 18 + Vite for lightning-fast development and optimized builds.
• Styling: Tailwind CSS for utility-first, rapid UI styling.
• Animations: Framer Motion for fluid page transitions and micro-interactions.
• State Management: Zustand for lightweight, fast, and scalable global state.
• Routing: React Router DOM for client-side navigation.
• Visuals & Charts:
  • React Flow for the interactive node-based workflow editor.
  • Recharts for beautiful, responsive analytics dashboards.
• Icons: Lucide React for consistent, customizable iconography.

Backend

• Runtime: Node.js
• API Framework: Express.js for RESTful endpoints.
• Database: better-sqlite3 for high-performance, embedded SQLite database.
• Real-time Communication: ws (WebSockets) for streaming live execution logs to the frontend.
• AI/ML: OpenAI Node SDK for interacting with GPT models.
• Utilities: cors for cross-origin resource sharing, dotenv for environment variable management, and uuid for unique identifier generation.

🛠️ Local Development Setup

1. Clone the repository

git clone <repository-url>
cd AI_WorkflowAutomation

2. Setup the Backend

Open a terminal and navigate to the backend directory:

cd backend

Install dependencies:

npm install

Create a .env file from the example:

cp .env.example .env

Add your OpenAI API key to the .env file:

PORT=10000
OPENAI_API_KEY=your_openai_api_key_here

Start the backend development server:

npm run dev

The backend will run on http://localhost:10000 (and WebSockets on ws://localhost:10000).

3. Setup the Frontend

Open a new terminal and stay in the root directory (AI_WorkflowAutomation): Install dependencies:

npm install

Start the frontend development server:

npm run dev

The frontend will typically run on http://localhost:5173.

🌐 Deployment

Frontend (Vercel)

1. Import the repository into Vercel.
2. Set the Framework Preset to Vite.
3. Add the following Environment Variables:
   • VITE_API_URL: URL of your deployed backend (e.g., https://your-backend.onrender.com)
   • VITE_WS_URL: WebSocket URL of your deployed backend (e.g., wss://your-backend.onrender.com)
4. Deploy!

Backend (Render / Glitch)

Due to the embedded SQLite database (better-sqlite3) and WebSocket requirements, serverless platforms like Vercel Functions are not suitable for the backend.

Recommended: Deploy to Render (Web Service)

1. Connect the repository to Render.
2. Create a new Web Service.
3. Set the Root Directory to backend.
4. Set Build Command to npm install.
5. Set Start Command to npm start.
6. Add your OPENAI_API_KEY to the Environment Variables.

📄 License

This project is licensed under the MIT License.