Lovable.dev - No-Code AI Applications

// Example: Building a customer support chatbot

// Workflow Steps in Lovable.dev:
1. User sends message → Trigger: "message_received"
2. Pre-process message → Action: "clean_and_validate"
3. Classify intent → AI Action: "intent_classification"
4. Route to appropriate handler → Conditional: "intent_type"
5. Generate response → AI Action: "generate_response"
6. Store conversation → Action: "save_to_database"
7. Send response to user → Action: "send_message"

// Generated configuration:
{
    "workflow": "customer_support_chat",
    "triggers": [
        {
            "type": "message_received",
            "source": "chat_interface",
            "payload": ["user_id", "message", "timestamp"]
        }
    ],
    "actions": [
        {
            "name": "preprocess_message",
            "type": "data_processing",
            "inputs": ["raw_message"],
            "outputs": ["cleaned_message", "language"]
        },
        {
            "name": "classify_intent",
            "type": "ai_action",
            "model": "gpt-3.5-turbo",
            "prompt": "Classify user intent: {{cleaned_message}}",
            "outputs": ["intent", "confidence_score"]
        },
        {
            "name": "generate_response",
            "type": "ai_action", 
            "model": "gpt-4",
            "prompt": "You are a customer support agent. Respond to: {{cleaned_message}}",
            "context": "conversation_history",
            "outputs": ["response_text"]
        }
    ],
    "conditions": [
        {
            "name": "route_by_intent",
            "condition": "intent in ['billing', 'technical', 'general']",
            "true_action": "handle_specialized_intent",
            "false_action": "generate_general_response"
        }
    ]
}

// Lovable.dev generates React components automatically:

import React, { useState, useRef, useEffect } from 'react';

const ChatInterface = () => {
    const [messages, setMessages] = useState([]);
    const [inputMessage, setInputMessage] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const messagesEndRef = useRef(null);

    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    };

    useEffect(() => {
        scrollToBottom();
    }, [messages]);

    const handleSendMessage = async () => {
        if (!inputMessage.trim()) return;

        const userMessage = {
            id: Date.now(),
            text: inputMessage,
            sender: 'user',
            timestamp: new Date().toISOString()
        };

        setMessages(prev => [...prev, userMessage]);
        setInputMessage('');
        setIsLoading(true);

        try {
            // Call Lovable.dev workflow
            const response = await fetch('/api/chat/send-message', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: inputMessage,
                    userId: 'current-user-id'
                })
            });

            const data = await response.json();
            
            const botMessage = {
                id: Date.now() + 1,
                text: data.response,
                sender: 'bot',
                timestamp: new Date().toISOString()
            };

            setMessages(prev => [...prev, botMessage]);
        } catch (error) {
            console.error('Error sending message:', error);
            // Handle error state
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="chat-interface">
            <div className="messages-container">
                {messages.map(message => (
                    <div key={message.id} className={`message ${message.sender}`}>
                        <div className="message-content">
                            {message.text}
                        </div>
                        <div className="message-time">
                            {new Date(message.timestamp).toLocaleTimeString()}
                        </div>
                    </div>
                ))}
                {isLoading && (
                    <div className="message bot">
                        <div className="loading-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                )}
                <div ref={messagesEndRef} />
            </div>
            <div className="input-area">
                <input
                    type="text"
                    value={inputMessage}
                    onChange={(e) => setInputMessage(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                    placeholder="Type your message..."
                    disabled={isLoading}
                />
                <button 
                    onClick={handleSendMessage}
                    disabled={isLoading || !inputMessage.trim()}
                >
                    Send
                </button>
            </div>
        </div>
    );
};

export default ChatInterface;

// Building a content moderation system

// Workflow: Automated Content Moderation
1. User submits content → Trigger: "content_submitted"
2. Analyze text → AI Action: "sentiment_analysis"
3. Check for inappropriate content → AI Action: "content_safety"
4. Extract entities → AI Action: "entity_extraction" 
5. Score content quality → AI Action: "quality_assessment"
6. Make moderation decision → Conditional: "moderation_score"
7. Notify user → Action: "send_notification"

// Configuration in Lovable.dev:
{
    "name": "content_moderation",
    "description": "Automated content moderation system",
    "triggers": [
        {
            "name": "content_submission",
            "type": "webhook",
            "endpoint": "/api/content/submit"
        }
    ],
    "ai_actions": [
        {
            "name": "sentiment_analysis",
            "provider": "openai",
            "model": "gpt-3.5-turbo",
            "prompt": "Analyze sentiment of: {{content}}",
            "output_mapping": {
                "sentiment": "choices[0].message.content"
            }
        },
        {
            "name": "content_safety", 
            "provider": "openai",
            "model": "gpt-4",
            "prompt": "Check for inappropriate content: {{content}}",
            "parameters": {
                "temperature": 0.1,
                "max_tokens": 100
            }
        }
    ],
    "business_rules": [
        {
            "condition": "sentiment.negative > 0.7 AND content_safety.flag == true",
            "action": "reject_content",
            "message": "Content violates community guidelines"
        },
        {
            "condition": "sentiment.negative > 0.3 AND sentiment.negative <= 0.7",
            "action": "flag_for_review", 
            "message": "Content requires manual review"
        },
        {
            "condition": "sentiment.negative <= 0.3 AND content_safety.flag == false",
            "action": "approve_content",
            "message": "Content approved automatically"
        }
    ]
}

// Implementing cost-effective AI model selection

class AIModelRouter {
    constructor() {
        this.models = {
            'fast-cheap': {
                provider: 'openai',
                model: 'gpt-3.5-turbo',
                costPerToken: 0.002,
                maxTokens: 4096
            },
            'balanced': {
                provider: 'anthropic', 
                model: 'claude-instant-v1',
                costPerToken: 0.008,
                maxTokens: 100000
            },
            'high-quality': {
                provider: 'openai',
                model: 'gpt-4',
                costPerToken: 0.06,
                maxTokens: 8192
            }
        };
    }

    selectModel(taskType, complexity, budget) {
        const modelScores = {};
        
        for (const [name, config] of Object.entries(this.models)) {
            let score = 0;
            
            // Score based on task type suitability
            switch(taskType) {
                case 'creative_writing':
                    score += config.model.includes('gpt-4') ? 10 : 5;
                    break;
                case 'data_analysis':
                    score += config.maxTokens > 32000 ? 8 : 4;
                    break;
                case 'code_generation':
                    score += config.provider === 'openai' ? 7 : 3;
                    break;
            }
            
            // Score based on complexity
            if (complexity === 'high' && config.model.includes('gpt-4')) {
                score += 5;
            }
            
            // Score based on budget constraints
            const costScore = Math.max(0, 10 - (config.costPerToken * 1000));
            score += costScore;
            
            modelScores[name] = score;
        }
        
        // Return model with highest score
        return Object.keys(modelScores).reduce((a, b) => 
            modelScores[a] > modelScores[b] ? a : b
        );
    }

    async executeTask(prompt, taskType, complexity = 'medium') {
        const selectedModel = this.selectModel(taskType, complexity);
        const modelConfig = this.models[selectedModel];
        
        console.log(`Using ${selectedModel} for ${taskType} task`);
        
        // Execute the AI call using the selected model
        return await this.callAIProvider(modelConfig, prompt);
    }

    async callAIProvider(config, prompt) {
        // Implementation for calling different AI providers
        switch(config.provider) {
            case 'openai':
                return await this.callOpenAI(config.model, prompt);
            case 'anthropic':
                return await this.callAnthropic(config.model, prompt);
            // Add other providers as needed
        }
    }
}

// Best practices for AI integration

class AIBestPractices {
    // 1. Implement retry logic with exponential backoff
    async callAIWithRetry(apiCall, maxRetries = 3) {
        for (let attempt = 1; attempt <= maxRetries; attempt++) {
            try {
                return await apiCall();
            } catch (error) {
                if (error.status === 429) { // Rate limit
                    const delay = Math.pow(2, attempt) * 1000;
                    await new Promise(resolve => setTimeout(resolve, delay));
                    continue;
                }
                if (error.status >= 500) { // Server error
                    await new Promise(resolve => setTimeout(resolve, 2000));
                    continue;
                }
                throw error;
            }
        }
        throw new Error('Max retries exceeded');
    }

    // 2. Implement content filtering
    async filterContent(content) {
        const safetyCheck = await this.callAIWithRetry(() =>
            this.safetyModel.moderate(content)
        );
        
        if (safetyCheck.flagged) {
            throw new Error('Content violates safety guidelines');
        }
        return content;
    }

    // 3. Implement cost tracking
    trackAICost(model, tokensUsed) {
        const cost = this.calculateCost(model, tokensUsed);
        this.usageStats[model] = (this.usageStats[model] || 0) + cost;
        
        if (this.usageStats[model] > this.budgetLimit) {
            console.warn(`Budget exceeded for ${model}`);
        }
    }

    // 4. Cache frequent queries
    async getCachedAIResponse(prompt, model) {
        const cacheKey = `ai_${model}_${hash(prompt)}`;
        const cached = await redis.get(cacheKey);
        
        if (cached) {
            return JSON.parse(cached);
        }
        
        const response = await this.callAIWithRetry(() =>
            this.aiProviders[model].generate(prompt)
        );
        
        // Cache for 1 hour
        await redis.setex(cacheKey, 3600, JSON.stringify(response));
        return response;
    }
}