Give your AI agent the real design system.

How it works

1. Step 1Connect onceAdd the server to your AI client.
2. Step 2Ask in plain words“Build a filters drawer for the people table.”
3. Step 3Get checked codeThe agent follows the patterns and validates props, tokens and accessibility before it answers.

Install in your client

claude mcp add nexera -- npx -y @nexera-ui/mcp@latest

{
  "mcpServers": {
    "nexera": {
      "command": "npx",
      "args": ["-y", "@nexera-ui/mcp@latest"]
    }
  }
}

{
  "servers": {
    "nexera": {
      "command": "npx",
      "args": ["-y", "@nexera-ui/mcp@latest"]
    }
  }
}

[mcp_servers.nexera]
command = "npx"
args = ["-y", "@nexera-ui/mcp@latest"]

What the agent can do

• plan_ui_taskBefore building: picks the policy rules that apply, sets the defaults and measures token contrast.
• get_guidelinesSetup, the hard rules and the UX principles. Agents call it first.
• search_componentsFind the right component for a job, by name or by intent ("6-digit code").
• get_componentProps, defaults, working examples, tested WCAG criteria and where it's used.
• list_patternsThe design patterns: loading, destructive actions, forms, overlays and more.
• get_patternOne pattern in full: when to use it, anatomy, steps, code and do and don't.
• suggest_compositionFrom a plain description to the blocks, patterns and components to use.
• get_screen_recipeHow a whole page is designed: layout, every state from first use to error, and the words.
• get_blockThe full source of a ready-made block, to copy and adapt.
• get_tokensColour, type, spacing and layout tokens as classes, for light and dark.
• validate_jsxChecks generated JSX against the real props, the tokens and the accessibility rules.
• get_audit_checklistThe last check for code, UX and accessibility before handing over.
• verify_ui_taskAfter building: checks the code and evidence against every rule and blocks “done” while any fail.

Prompts to try

• “Build an Add employee modal with Nexera components and validate it.”Copy
• “Which Nexera component should I use for a 6-digit sign-in code?”Copy
• “Give me the dark-mode surface tokens and where each one belongs.”Copy
• “Turn this Figma frame into Nexera JSX with RTL support.”Copy
• “Should this be a Modal, a Drawer or a Popover? Use the Nexera patterns.”Copy
• “Build a team table with filters and bulk delete, then run the audit checklist.”Copy
• “/mcp__nexera__design_screen a users page for admins”Copy

Troubleshooting