Connect UX Magic to Claude
Add UX Magic as a connector in Claude so it can read, edit and generate your designs — no API key to copy.
Last updated
Claude can work with your real UX Magic projects: read a screen's markup and theme, edit it, and generate new screens. Adding it takes about a minute and needs no API key — you sign in to UX Magic once and approve what Claude may do.
Steps
- In Claude, open Settings → Connectors and choose Add custom connector.
- Enter
https://api.uxmagic.ai/api/mcpas the URL, and leave the OAuth Client ID and Secret fields empty. - Claude opens a UX Magic window. Sign in if you are not already signed in.
- Read what the connector is asking for, then choose Allow access. Claude returns to your conversation with the connector enabled.
The Client ID and Secret fields stay empty on purpose: UX Magic registers Claude automatically, and those fields exist for servers that cannot.
What you can ask for
Once connected, ask in plain language:
"List my UX Magic projects, then read the Pricing screen from Ledgerly and rewrite the headline."
"Design a three-screen onboarding flow for a habit tracker in UX Magic."
"Export the Checkout screen to Figma."
"Publish the Ledgerly project and give me the link."
Generation runs as a background job: Claude starts it, watches it, and reports back when the screens are ready. Open the project link it gives you to see them on the canvas.
What Claude can and cannot do
You approve three permissions on the consent screen:
| Permission | What it allows |
|---|---|
| Read your designs | List and read projects, screens, style guides and uploaded documents. |
| Create and edit designs | Add projects and screens, edit markup and images, export to Figma. |
| Run the design agent | Generate screens with the AI agent. This spends credits. |
| Publish designs to the web | Put a project online at a public address, and take it down again. |
Claude never sees your password, and the connection is scoped to your own account — it can reach exactly what you can, and nothing else.
Claude Code and other clients
Claude Code connects to the same URL:
claude mcp add --transport http uxmagic https://api.uxmagic.ai/api/mcp
It opens the same sign-in and consent screen in your browser.
Clients that cannot sign a user in — Cursor, VS Code, Windsurf, Codex, Antigravity — use an API key instead. See UXMagic MCP server.
Disconnecting
Open Connected apps in your account settings and choose Disconnect. Access stops immediately, not at the end of a session. You can reconnect at any time by repeating the steps above.
If it doesn't connect
- "Couldn't reach the MCP server" — check the URL is exactly
https://api.uxmagic.ai/api/mcp, with no trailing slash. - The window opens but nothing happens — your browser may be blocking the pop-up. Allow pop-ups for claude.ai and try again.
- You keep landing on the sign-in page — sign in to uxmagic.ai in the same browser first, then retry the connector.
- Claude says it has no tools — remove the connector and add it again; a connection approved with no permissions exposes nothing.
Frequently asked
- Do I need an API key to use UX Magic in Claude?
- No. Claude signs you in to UX Magic directly and you approve the connection on a consent screen. API keys are only needed for clients that cannot sign a user in, such as Cursor or VS Code.
- How do I disconnect Claude from UX Magic?
- Open Connected apps in your UX Magic account settings and choose Disconnect. Access stops immediately. Removing the connector inside Claude also ends the connection.
- Does using Claude with UX Magic cost credits?
- Reading your designs and publishing them are free. Generating screens costs the same credits as generating them in the app — it is the same engine. On the free plan those credits refresh every day at 00:00 UTC, and Claude will tell you when they are due back if you run out mid-conversation.
Was this article helpful?
Related articles
UXMagic MCP server
Connect Claude, Cursor, VS Code, Windsurf, Codex or Antigravity to your UXMagic projects.
API keys
Create, rotate and revoke keys for the MCP server and API access.
Use UXMagic from ChatGPT, Claude and other assistants
How AI assistants can read UXMagic’s documentation and drive your projects.