Kickflip Studio is a visual, no-code tool that makes it easy to create powerful sales funnels with AI-enhanced capabilities. Design your funnel visually, configure your AI conversational bot, and deploy without writing a single line of code.
- Visual Data Modeling - Create your data structure with a simple drag-and-drop interface
- Workflow Designer - Build complex funnel logic without coding
- Conversation Flow Builder - Design AI-powered chat experiences visually
- One-Click Deployment - Deploy your entire funnel with a single click
- Templates Library - Start with pre-built funnel templates for different industries
- Real-Time Preview - See your funnel in action as you build
- Integrations Marketplace - Connect with popular tools and services
- Analytics Dashboard - Track performance with built-in analytics
- Frontend: React, Material UI, React Flow
- Backend: Node.js, Express, MongoDB
- AI Integration: OpenAI API
- Deployment: Netlify, Vercel, or self-hosted
- Node.js 18 or higher
- MongoDB
- OpenAI API key
- Clone the repository
git clone https://github.com/yourusername/kickflip-studio.git
cd kickflip-studio- Install dependencies
npm install- Configure environment variables
Create a .env file in the root directory:
MONGODB_URI=your_mongodb_connection_string
OPENAI_API_KEY=your_openai_api_key
JWT_SECRET=your_jwt_secret
- Start the development server
npm run dev- Access the application
Open your browser and navigate to http://localhost:3000
kickflip-studio/
├── client/ # React frontend
│ ├── public/ # Static assets
│ └── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Application pages
│ ├── canvas/ # Canvas editor components
│ ├── modelers/ # Data modeling components
│ ├── workflows/ # Workflow builder components
│ ├── chatflows/ # Conversation flow builder
│ ├── templates/ # Pre-built templates
│ └── services/ # API service clients
│
├── server/ # Node.js backend
│ ├── controllers/ # Request handlers
│ ├── models/ # Database models
│ ├── routes/ # API routes
│ ├── services/ # Business logic
│ ├── generators/ # Code generators
│ └── middleware/ # Express middleware
│
├── ai-service/ # AI integration service
│ ├── controllers/ # AI request handlers
│ ├── generators/ # Dynamic prompt generators
│ ├── models/ # AI data models
│ └── services/ # OpenAI integration services
│
└── deployment/ # Deployment scripts and configurations
├── netlify/ # Netlify configuration
├── vercel/ # Vercel configuration
└── docker/ # Docker configuration
Use the visual data modeler to create collections and define fields:
- Drag data types onto the canvas
- Connect relationships between collections
- Configure validation rules and defaults
Create the logic for your funnel:
- Add steps like "capture email", "show offer", "process payment"
- Connect steps with conditional logic
- Add integrations with email marketing, payment processors, etc.
Design an AI-powered chat experience:
- Create conversation branches based on user responses
- Define when to present offers
- Configure AI behavior and personality
- Set up follow-up sequences
Publish your funnel with a single click:
- Choose your deployment platform
- Monitor performance in real-time
- A/B test different variations
- Optimize based on analytics
Kickflip Studio integrates with:
- Email Marketing: Mailchimp, ConvertKit, ActiveCampaign
- Payment Processing: Stripe, PayPal
- CRM Systems: HubSpot, Salesforce
- Analytics: Google Analytics, Facebook Pixel
- Messaging: Slack, Discord, SMS
This project is licensed under the MIT License - see the LICENSE file for details.
We welcome contributions! Please check out our contribution guidelines to get started.
- OpenAI for their powerful API
- React Flow for the workflow visualization components
- The MongoDB team for their flexible database solution
- All our beta testers for their valuable feedback# kickflipfunnelz