Model Context Protocol (MCP) Server

What is the UIDesigner MCP Server?

The Model Context Protocol (MCP) is an open standard that allows AI coding assistants to securely connect to external tools and data sources. UI Designer runs an official hosted MCP server — there is nothing to install. Your IDE connects over HTTPS with an API key, and your AI assistant can load the full context of any review thread or audit run directly from a pasted link.

Connecting Your Editor

Go to Settings → MCP Access and click Create API key.
The dialog hands you a one-click install — no config files to edit:

Cursor / VS Code — click Install in Cursor / Install in VS Code; your editor opens and registers the server automatically.
Claude Code — copy and run the claude mcp add command shown in the dialog.
Codex CLI — copy and run the codex mcp add command shown in the dialog.

The key is embedded in the install and shown only once. Prefer manual setup? Expand "Show the raw key" and use it in your editor's MCP config:

{
  "mcpServers": {
    "uidesigner": {
      "url": "https://uidesigner.ai/api/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_API_KEY>"
      }
    }
  }
}

Or test the endpoint directly (the Accept header is required by the MCP transport):

curl -X POST https://uidesigner.ai/api/mcp \
  -H "Authorization: Bearer <YOUR_API_KEY>" \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'

The reply arrives either as JSON or as a single event: message SSE data line carrying the same tools/list result — both are valid MCP responses.

Keys are organization-scoped: your assistant can read exactly what your organization can see, and audit findings arrive tier-gated exactly as in the web panel. Revoking a key in Settings → MCP Access cuts access off immediately.

Available Tools

`uidesigner_resolve_link`

Paste any UI Designer URL and your assistant receives its complete structured context:

Audit runs — https://audit.uidesigner.ai/?run=: run status, dimension scores, and findings with exact CSS selectors, WCAG criteria, severities, and suggested fixes.
Review threads — https://review.uidesigner.ai/?thread=: the conversation, the target element's selector and tag, viewport and technical environment.
Share links — https://review.uidesigner.ai/share/ (and the audit equivalent): read-only project context.

Every thread card and audit findings panel has a Copy Link for AI button that puts the canonical URL — plus a ready-made prompt — on your clipboard.

Example Workflow

Copy a thread with ⚡ Copy Link for AI, paste it into your IDE chat:

"Fix the issue described in this UI Designer thread: https://review.uidesigner.ai/p123?thread=t456"

Your assistant calls uidesigner_resolve_link, receives the exact DOM selector and technical context, and fixes the element in your source files.

Roadmap

Write-side tools — creating threads from your IDE, syncing findings to issue trackers, and triggering audits — are on the integrations roadmap. This page will list them as they ship.