Lovable Connectors — SKILL.md

---
name: "Lovable Connectors"
description: "Connect Lovable projects to external services — GitHub, GitLab, Supabase, Stripe, Shopify, Aikido security. For browser automation of lovable.dev integrations."
version: "1.0.0"
author: "skynet"
category: "dev"
agents: ["claude-code"]
tags: ["lovable", "connectors", "github", "supabase", "stripe", "browser-automation"]
tools_required: ["chrome-mcp"]
---

# 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.