Integrations

Lovable.dev

Connect InterfaceGuard to Lovable.dev as an MCP connector. Ask Lovable's AI agent to review your app's UX and it handles everything — screenshot capture, job submission, results retrieval, and code fix proposals — without leaving the builder.

How it works

InterfaceGuard exposes a hosted Streamable HTTP MCP server — no local installation or Chromium setup required. When you add it as a connector in Lovable, the builder's AI agent gains access to five UX analysis tools. Tell the agent what you want and it orchestrates the workflow automatically:

1Calls interfaceguard_list_projects to find your project.
2Calls interfaceguard_analyze_url with your Lovable preview URL — the server takes a full-resolution screenshot using headless Chromium on its end.
3Calls interfaceguard_get_results to wait for and retrieve prioritized UX issues with recommendations and code examples.
4Proposes targeted code edits in the Lovable editor to fix the issues it found.

What you get

No local install — the MCP server is hosted, not bundled
No Chromium to configure — screenshot capture runs server-side
Works with any Lovable preview URL out of the box
Prioritized issues: critical → high → medium → low severity
AI-ready fix recommendations with code examples
9 analysis dimensions including accessibility, usability, and layout
Analysis results auto-retrieved — no manual polling
One API key authenticates all five MCP tools

Prerequisites

An InterfaceGuard account with at least one project — sign up free
An InterfaceGuard API key — generate one under Settings → API Keys
A Lovable.dev account with a project that has a live preview URL

Setup

Keep your API key private

Treat your InterfaceGuard API key like a password. Anyone who has it can submit analysis jobs charged to your account. Rotate it under Settings → API Keys if it is ever exposed.

Open Lovable Settings → Integrations

In your Lovable workspace, go to Settings and select the Integrations or MCP Connectors tab. Click Add custom connector.

Configure the connector

Enter the following details:

Field	Value
Name	InterfaceGuard
Server URL	https://ux-analysis-service-197463040616.us-east4.run.app/mcp
Header name	X-API-Key
Header value	your-api-key

Alternatively, if Lovable accepts a JSON config block directly, paste this:

Lovable MCP connector config

{
  "mcpServers": {
    "interfaceguard": {
      "url": "https://ux-analysis-service-197463040616.us-east4.run.app/mcp",
      "headers": {
        "X-API-Key": "your-api-key"
      }
    }
  }
}

Save and verify the connection

Click Save. Lovable will connect to the server and list the available tools. You should see interfaceguard_list_projects and four other tools appear in the connector detail view.

Using the integration

Once the connector is active, just tell Lovable's AI agent what you want in plain language. Example prompts:

“Analyze the UX of my app with InterfaceGuard.”
“Run an accessibility and usability review on the current preview.”
“Check my landing page for UX issues — use InterfaceGuard.”
“What UX problems does my dashboard have? Use InterfaceGuard to find out.”

The agent will automatically pick your project, use the current preview URL, run the analysis, and propose fixes — you don't need to copy URLs or job IDs manually.

Specifying analysis types

By default the agent runs accessibility, usability, and consistency checks. You can be more specific:

"Run a full accessibility audit on my app."
"Check for visual hierarchy and layout issues."
"Do a complete UX review — all analysis types."

Available MCP tools

These tools are exposed by the InterfaceGuard MCP server and called automatically by Lovable's AI agent. You don't invoke them directly.

Tool	What it does
interfaceguard_list_projects	List your InterfaceGuard projects to get a projectId
interfaceguard_analyze_url	Screenshot a live preview URL and submit it for UX analysis; returns a jobId
interfaceguard_analyze_screenshot	Submit a base64-encoded PNG screenshot for analysis (use when you already have the image)
interfaceguard_get_status	Check the status and progress of an analysis job
interfaceguard_get_results	Wait for an analysis to complete and return full UX findings. Polls for up to 45 s per call — call again if still in progress.

Troubleshooting

Connector shows "Connection failed" or no tools appear

Verify the Server URL is exactly correct (no trailing slash) and that your X-API-Key header value matches a key shown under Settings → API Keys. Test the key by fetching the health endpoint: curl https://ux-analysis-service-197463040616.us-east4.run.app/health

Agent says "no projects found"

interfaceguard_list_projects returned an empty list. Create at least one project in the InterfaceGuard web app before running an analysis.

analyze_url times out or returns an error for the preview URL

Lovable preview URLs require the preview to be actively running. Make sure your Lovable project has been deployed at least once and the preview URL is accessible. If the URL requires authentication, use interfaceguard_analyze_screenshot with a base64 screenshot instead.

get_results returns "still in progress" or times out

interfaceguard_get_results polls for up to 45 seconds per call. If the job is still running, just call it again — it will pick up where it left off. Use interfaceguard_get_status to check progress between calls.

API 401 Unauthorized

The X-API-Key value in the connector header is wrong or the key has been revoked. Generate a new key under Settings → API Keys and update the connector.

Ready to add UX analysis to your Lovable workflow?

Create a free InterfaceGuard account to get your API key, then add the connector in Lovable's settings.

Start Free Review All Integrations