Connect the UXMagic MCP server
The UXMagic MCP (Model Context Protocol) server connects your AI coding agent to UXMagic. Once connected, your agent can read, generate, and edit your designs — and export them to code or Figma — without leaving your IDE.
The uxmagic-mcp npm package is a transparent stdio bridge: it forwards MCP traffic to the UXMagic backend at https://api.uxmagic.ai/api/mcp using your API key. Because it proxies rather than reimplements, it always exposes the full, current UXMagic toolset — no client update needed when new tools ship.
Before you start
- A UXMagic account (you must be signed in).
- One of the supported clients: Cursor, VS Code, Windsurf, Antigravity, or Claude Desktop.
- Node.js installed (the bridge runs via
npx).
Step 1 — Generate your API key
Your API key lets your IDE talk to UXMagic securely — keep it private. Keys are prefixed with uxm_.
- In the UXMagic editor, open Connect MCP and go to Generate your API Key, then click Generate Key.
- Copy or download the key.
You can manage keys any time from Settings → API Keys (/manage-account?value=api-keys).
Treat your API key like a password. Its access depends on its scopes (designs:read, designs:write, agent:run); a key with no scopes has full access.
Step 2 — Connect, one of two ways
Option A — Run the bridge (works everywhere). Add the uxmagic-mcp server to your IDE's MCP config (see Configure your IDE). It launches on demand via:
env UXMAGIC_API_KEY=uxm_YOUR_API_KEY npx -y uxmagic-mcpOption B — Connect directly (no bridge). If your client supports remote MCP servers, point it straight at the backend and skip the package:
- URL:
https://api.uxmagic.ai/api/mcp(transport: Streamable HTTP) - Header:
X-API-Key: uxm_YOUR_API_KEY