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_projectsto find your project. - 2Calls
interfaceguard_analyze_urlwith your Lovable preview URL — the server takes a full-resolution screenshot using headless Chromium on its end. - 3Calls
interfaceguard_get_resultsto 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 the Connectors catalog
Inside your Lovable project, click Connectors in the left sidebar. Scroll to the bottom of the All view and click the card labeled Custom MCP (“Connect your own MCP”).
Configure the server
Fill in the form as follows:
| Field | Value |
|---|---|
| Server name | InterfaceGuard |
| Server URL | https://cloud.interfaceguard.com/mcp |
| Authentication | Select Bearer token or API key, then paste your InterfaceGuard API key into the token field. |
Add server and verify
Click Add server. Lovable will connect 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 the Bearer token you entered matches an active key shown under Settings → API Keys. Test the endpoint with: curl https://cloud.interfaceguard.com/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 Bearer token in the connector is wrong or the key has been revoked. Generate a new key under Settings → API Keys and update the connector token.
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.