Integrations

Bolt.new

Connect InterfaceGuard to Bolt.new's Claude Code assistant via an HTTP MCP server. Add one config block to your project and Claude can screenshot your live preview, submit it for UX analysis, and return prioritized findings with code fixes — all in a single conversation.

How it works

Bolt.new uses Claude Code as its AI assistant, which supports HTTP MCP servers — remote tools served over HTTPS rather than a local process. InterfaceGuard's hosted MCP endpoint handles everything server-side:

1Claude calls interfaceguard_list_projects to find your project.
2Claude calls interfaceguard_analyze_url with your Bolt.new preview URL — the InterfaceGuard server takes a screenshot using headless Chromium on its end. No browser runs locally.
3Claude calls interfaceguard_get_results, which polls until the job completes and returns structured UX findings: issues, severity, recommendations, and code examples.
4Claude proposes code fixes based on the findings — directly in the Bolt.new editor.

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 Bolt.new 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
Works alongside any other HTTP or stdio MCP servers in your project

Prerequisites

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

Setup

Keep your API key out of version control

Do not commit .claude/settings.json if it contains your API key directly. Add it to .gitignore or use Bolt.new's environment variable mechanism to inject the key at runtime.

Create or open `.claude/settings.json`

In your Bolt.new project, open the file editor and navigate to .claude/settings.json. Create the file if it doesn't exist.

Add the InterfaceGuard MCP server

Paste the following config, replacing your-api-key with your actual key:

.claude/settings.json

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

If the file already has other MCP servers, merge the "interfaceguard" block into the existing "mcpServers" object.

Verify the server is connected

In the Bolt.new Claude Code chat, type /mcp to list active MCP servers. You should see interfaceguard with five tools listed.

Using the integration

Once the MCP server is connected, ask Claude Code in plain language. Example prompts:

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

Claude will automatically identify your Bolt.new preview URL, pick the right project, run the analysis, and propose targeted code fixes — no manual steps required.

Specifying analysis types

By default Claude 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."

Finding your Bolt.new preview URL

Click the Preview button in the Bolt.new editor to open your app in a new tab. Copy that URL and include it in your prompt, or simply ask Claude — it can read the current preview URL from the Bolt.new environment automatically.

Available MCP tools

These tools are exposed by the InterfaceGuard MCP server and called automatically by Claude Code. You don't invoke them directly — Claude handles the orchestration.

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

/mcp shows "interfaceguard" as disconnected or missing

Check that .claude/settings.json is valid JSON and that the "type": "http" field is present. Reload the Bolt.new tab to force Claude Code to re-read the config.

Claude 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 fails for the Bolt.new preview URL

Bolt.new preview URLs are sometimes gated by auth. If the preview requires you to be logged in to view it, the server-side Chromium won't be able to load it. In that case, take a screenshot yourself and use interfaceguard_analyze_screenshot with the base64-encoded PNG 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, call it again — it resumes polling automatically. Use interfaceguard_get_status to check progress between calls.

API 401 Unauthorized

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

Ready to add UX analysis to your Bolt.new workflow?

Create a free InterfaceGuard account to get your API key, then add the MCP config to your project.

Start Free Review All Integrations