How do I install the Vibe QA Extension?

Visit the Chrome Web Store, search for "Desplega Vibe QA", and click "Add to Chrome". After installation, click the extension icon, enter your Desplega API key (from your dashboard), and save. The extension is now ready to use with Lovable projects.

Where do I find my API key for Vibe QA?

Log into your Desplega dashboard, navigate to Settings → API Keys, and generate a new key labeled for Vibe QA. Copy the key immediately and paste it into the Vibe QA extension settings in Chrome.

Why isn't Vibe QA detecting my Lovable project?

Ensure you're logged into Lovable in the same Chrome browser where Vibe QA is installed. The extension auto-detects active Lovable projects in your current tabs. If issues persist, refresh the Lovable page and check that the extension is enabled.

Can I use Vibe QA in other browsers besides Chrome?

Currently, Vibe QA is only available for Chrome and Chromium-based browsers (Edge, Brave). Support for Firefox and Safari is under consideration. For now, use Chrome for the best Vibe QA experience.

How-To/Vibe QA/Installation Guide

Installation Guide

Complete guide to installing the Vibe QA Extension in Chrome and configuring your desplega.ai API key.

Prerequisites

Chrome browser (version 88 or higher)
Desplega.ai account (optional, sign-up here)
Lovable.dev account (optional, for testing)

Installation from Chrome Web Store

The easiest way to install the Vibe QA Extension—just one click!

Step 1: Visit the Chrome Web Store

Step 2: Add to Chrome

Click the Add to Chrome button
Confirm by clicking Add extension in the popup
The extension icon will appear in your Chrome toolbar

Step 3: Pin the Extension (Optional)

For easy access, pin the extension to your toolbar:

Click the puzzle piece icon in Chrome toolbar
Find "Desplega.ai Vibe QA"
Click the pin icon next to it

✅ That's it! The extension is now installed and ready to use. Continue to the next section to configure the extension.

Configure the Extension

Step 1: Open Extension Popup

Click the Desplega.ai extension icon in your Chrome toolbar. If you don't see it, click the puzzle piece icon and pin the extension.

Step 2: Enter API Key

Paste your API key in the input field
Click Save
You should see a success message

Step 3: Verify Configuration

The popup should show:

✅ API key configured
✅ Connection to desplega.ai successful

Generate Your API Key

Step 1: Sign Up or Log In

Visit app.desplega.ai and sign up or log in to your account.

Step 2: Navigate to Settings

Click your profile icon (top-right) and select Settings.

Step 3: Generate API Key

Go to the API Keys tab
Click Generate New Key
Give your key a name (e.g., "Vibe QA Extension")
Click Create

⚠️ Important: If you don't do this, our system will generate a new API key for you. You will need to log in to that specific organization later on.

API key setup interface showing input field, Save & Validate button, and Get a Key button

Verify Installation

Let's make sure everything is working correctly:

1
Open Lovable.dev
Navigate to Lovable.dev and open any project.
2
Look for QA Button
You should see a new QA button in the Lovable.devtoolbar (usually top-right area).
3
Click the QA Button
The Vibe QA panel should open, replacing your preview. If you see the panel, congratulations! 🎉

Success message showing API key configured and connection to desplega.ai successful

Troubleshooting

Extension Icon Not Appearing

Click the puzzle piece icon in Chrome toolbar and pin the extension

Verify the extension is enabled at chrome://extensions/

Try disabling and re-enabling the extension

Restart Chrome

QA Button Not Appearing in Lovable.dev

Refresh the Lovable.dev page (F5 or Cmd+R)

Clear browser cache and cookies

Check browser console for errors (F12 → Console)

Verify you're on a Lovable.dev editor page, not the dashboard

Try disabling other extensions that might interfere

API Key Won't Save

Check Chrome's site settings allow local storage

Try clearing Chrome cache and cookies

Verify no other extensions are blocking storage