Connect your design system to AI.

Give AI assistants real-time access to your components, tokens, and documentation — no manual copy-paste, no stale context.

Your workspace

Nucleux Design System

Components Tokens Patterns Docs

MCP server

@nucleux/mcp

JSON-RPC Structured tools

Claude

Cursor

Windsurf

VS Code

Get started.

Install

Add the MCP server package to your project.

npm install @nucleux/mcp

Configure your AI client

Add the server entry to your MCP client config — works with Claude Desktop, Cursor, Windsurf, and any JSON-RPC MCP host.

// mcp.json { "mcpServers": { "nucleux": { "command": "npx", "args": ["@nucleux/mcp"], "env": { "NUCLEUX_WORKSPACE": "your-workspace-id" } } } }

Start building

Ask your AI to use your components. It now pulls from your live design system, not training data.

// Example prompt to your AI "Build a meeting summary view using Nucleux components" // AI resolves from your live design system ↓ import { Thread, Message, AgentComposer } from '@nucleux/react'

What AI can access.

Components

Props, variants, and examples for every component.

Design Tokens

Colors, spacing, and radii — generated code stays visually consistent.

Documentation

Searchable docs so AI answers from your own guidance.

Blocks & Templates

Reusable layouts for full-page and full-flow generation.

Code Examples

Production-ready snippets AI uses when generating code.

AI UX Patterns

The full pattern library — design vocabulary, not just APIs.