Lovable Connectors

# Lovable Connectors Connect Lovable projects to external services for backend, payments, ecommerce, version control, and security scanning. ## Prerequisites - Chrome MCP browser tools available - Logged in to lovable.dev with a project open ## Available Connectors | Connector | Purpose | Status | |-----------|---------|--------| | Cloud | Built-in backend (Lovable Cloud) | Enabled by default | | AI | AI features for the app | Enabled by default | | GitHub | 2-way code sync with GitHub repos | Needs connection | | GitLab | 2-way code sync with GitLab repos | Enabled | | Shopify | eCommerce store integration | Enabled | | Stripe | Payment processing | Enabled | | Supabase | PostgreSQL database + auth + storage | Enabled | | Aikido | Security scanning and pentesting | Available | ## Accessing Connectors ``` 1. Go to project settings: lovable.dev/projects/<id>/settings/integrations 2. Or: from the project editor, click the GitHub/gear icon > settings > Connectors 3. The connectors page shows all available integrations as cards ``` ## Connect GitHub Syncs your Lovable project 2-way with a GitHub repository. ``` 1. On the Connectors page, click the "GitHub" card (shows "Enabled" or "Connected") 2. Or click the GitHub icon (octocat) in the project editor toolbar 3. You'll see a list of GitHub accounts/organizations with "Connect" buttons: - Each account shows: name, type (Organization/Personal account), Connect button 4. Click "Connect" next to the desired account 5. Lovable auto-creates a new repo named after your project and pushes all code 6. After connecting, you'll see: - Repository: account/project-name - Branch: main (with dropdown to change) - Status: Connected (green dot) - Clone URL: https://github.com/account/project-name.git ``` **2-way sync means:** - Every Lovable edit auto-commits to the GitHub repo - Code changes pushed to the repo are picked up by Lovable - You can clone the repo and work locally alongside Lovable ## Connect Supabase Provides PostgreSQL database, authentication, storage, and edge functions. ``` 1. On the Connectors page, click the "Supabase" card 2. You'll need to provide your Supabase project URL and anon key 3. Once connected, Lovable can: - Create and manage database tables - Set up authentication flows - Use Supabase storage for file uploads - Call edge functions ``` **Tip:** When building apps that need a database, tell Lovable to "use Supabase for the backend" and it will set up the integration automatically via the chat. ## Connect Stripe Adds payment processing to your Lovable app. ``` 1. On the Connectors page, click the "Stripe" card 2. Connect your Stripe account 3. Once connected, Lovable can generate checkout flows, subscription management, and payment forms ``` ## Connect Shopify Build eCommerce stores powered by Shopify. ``` 1. On the Connectors page, click the "Shopify" card 2. Connect your Shopify store 3. Lovable can then build storefronts that pull products, handle carts, and process orders via Shopify ``` ## Add Connection (for additional accounts) ``` 1. On a connector's detail page (e.g., GitHub), click "+ Add connection" 2. Select a different account or organization 3. This allows connecting multiple GitHub orgs or accounts ``` ## Browser Automation Tips ### Connector Cards Connector cards on the integrations page are clickable. Use find to locate them: ``` find: "GitHub card" or "Supabase card" ``` ### GitHub Connection Flow The GitHub connection is one-click after selecting an account. No additional configuration needed — Lovable auto-creates the repo. ### Direct URLs - All connectors: /settings/integrations - Specific connector: /settings/integrations?connector=github&subtab=connectors ## Running on Mac Minis These instructions can also be executed on the Mac Minis (bots, vault, jarvis) using the mac-control MCP server instead of chrome-in-chrome. ### Via mac-control MCP Server (Port 8200) The mac-control server on each Mac exposes the same GUI automation primitives: ```bash # Take a screenshot to see the screen curl -s http://bots.local:8200/tools/screenshot # Open a URL in Chrome curl -s http://bots.local:8200/tools/open_url -d '{"url": "https://lovable.dev/dashboard"}' # Click at screen coordinates curl -s http://bots.local:8200/tools/click -d '{"x": 500, "y": 300}' # Type text curl -s http://bots.local:8200/tools/type_text -d '{"text": "Build a landing page..."}' # Press keyboard shortcut curl -s http://bots.local:8200/tools/key_press -d '{"keys": "return"}' # Run AppleScript curl -s http://bots.local:8200/tools/applescript -d '{"script": "tell app \\"Google Chrome\\" to activate"}' # Find text on screen (OCR) curl -s http://bots.local:8200/tools/find_on_screen -d '{"text": "Submit"}' ``` ### Via Chrome DevTools Protocol (Port 9222) For direct browser control without GUI coordinates: ```bash # List open tabs curl -s http://bots.local:9222/json # Navigate a tab to a URL curl -s http://bots.local:9222/json/new?https://lovable.dev/dashboard # Execute JavaScript in a tab (via WebSocket — use a CDP client) ``` ### Via SSH + cliclick (Simple Fallback) ```bash # Open URL ssh bots 'open https://lovable.dev/dashboard' # Wait for page load sleep 3 # Screenshot + analyze ssh bots 'screencapture /tmp/screen.png' scp bots:/tmp/screen.png ./screen.png # Click at coordinates ssh bots '/opt/homebrew/bin/cliclick c:500,300' # Type text ssh bots '/opt/homebrew/bin/cliclick t:"Build a landing page..."' # Submit ssh bots '/opt/homebrew/bin/cliclick kp:return' ``` ### Recommended Machine Use **bots** (192.168.86.50) for browser automation — it has full GUI support, screencapture works, and Chrome with remote debugging is running.