AppletFlow is an open-source workflow builder for creating AI-powered mini applications. Connect prompts, AI models, and tools to create powerful, interactive workflows that can be deployed as standalone applications.
- Visual Workflow Editor: Intuitive drag-and-drop interface built with React Flow
- AI-First Design: AI-powered app generation from workflow descriptions
- Live Preview: Real-time preview of your generated applications
- Complete App Generation: Single HTML files or multi-file project structures
- Modern Stack: Built with Next.js, TypeScript, and Tailwind CSS
- OpenRouter Integration: Seamless AI model integration
# Clone the repository
git clone https://github.com/muzafferkadir/appletflow.git
cd appletflow
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Add your OpenRouter API key to .env.local
# Start the development server
npm run devOpen http://localhost:3000 in your browser.
Create a .env.local file with your OpenRouter API key:
NEXT_PUBLIC_OPENROUTER_API_KEY=your_api_key_here
NEXT_PUBLIC_DEFAULT_MODEL=google/gemini-flash-1.5- Workflow Tab: Build your workflow using the visual editor
- Preview Tab: See your generated application in real-time
- Files Tab: Download complete project structures
- Input Node: AI-designed form components (text, select, checkbox, etc.)
- Show/Display Node: Content display pages designed by AI
- Action Node: Processing functions, calculations, client-side operations
- Design Workflow: Add nodes and connect them in logical order
- Add Descriptions: Describe what each node should do
- Generate App: Single button creates both HTML preview and project files
- Preview & Export: Test in preview tab, download files from files tab
After creating your workflow in AppletFlow:
- Required Description: Enter a descriptive explanation for each node
- AI Analysis: Artificial intelligence analyzes your workflow and creates a todo list
- Sequential Execution: AI executes tasks in sequence
- Browser-Only: Uses only client-side technologies (HTML, CSS, JS)
- Static Export: Produces deployable static files as output
AppletFlow uses the Google Gemini Flash 1.5 model via OpenRouter API:
- API Configuration: Set your OpenRouter token in the
.env.localfile - Node Generation: Optimized AI prompts for each node type
- Code Generation: HTML, CSS, JavaScript code generation
- Error Handling: Catch API errors and notify users
- Export System: Combine all generated code into a single HTML file
# Create .env.local file
NEXT_PUBLIC_OPENROUTER_API_KEY=your-openrouter-token-here
NEXT_PUBLIC_DEFAULT_MODEL=google/gemini-flash-1.5- ❌ Server-side operations (databases, backend APIs)
- ❌ Complex authentication systems
- ✅ Data storage with localStorage
- ✅ Client-side API requests
- ✅ SPA (Single Page Application) approach
- ✅ Static files for quick deployment
- ✅ Visual workflow creation
- ✅ AI-powered processing steps
- ✅ No-code approach
- ✅ Real-time preview
- ✅ Shareable workflows
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Workflow Engine: React Flow
- Icons: Lucide React
- UI Components: Custom React components
src/
├── app/
│ ├── page.tsx # Main page
│ └── layout.tsx # Root layout
├── components/
│ ├── WorkflowEditor.tsx # Main workflow editor
│ ├── PreviewPanel.tsx # Preview panel
│ ├── NodeToolbar.tsx # Node toolbar
│ └── nodes/
│ └── CustomNode.tsx # Custom node component
└── ...
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
AppletFlow