Which integrations are available for this server?

Enables exporting design tokens as CSS custom properties and enforces the use of CSS variables within components to maintain design uniformity. Provides tools for auto-correcting React components against design presets, validating UI conformance scores, and generating new components from templates.

How do I use UI Preset MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@UI Preset MCP Server Apply the client-fintech preset and autocorrect this React component code" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

UI Preset MCP Server

MCP server for auto-configuring React UI against a swappable glassmorphic preset system. Integrates with your Monaco IDE to enforce design uniformity across all business builds.

Architecture

ui-preset-mcp-server/ ├── src/ │ ├── index.ts # Server entry point (stdio + HTTP transports) │ ├── constants.ts # Shared constants and paths │ ├── types/ │ │ └── index.ts # All TypeScript types (tokens, presets, corrections) │ ├── schemas/ │ │ └── toolSchemas.ts # Zod validation schemas for every tool │ ├── services/ │ │ ├── presetLoader.ts # Reads + deep-merges preset files with caching │ │ ├── sessionState.ts # Active preset session management + overrides │ │ ├── uiCorrector.ts # AST correction engine (10 correction passes) │ │ ├── tokenResolver.ts # Resolves {{token:x.y.z}} placeholders + export generators │ │ └── fileWatcher.ts # Hot-reload presets on disk changes (dev mode) │ └── tools/ │ ├── presetTools.ts # load_preset, swap_template, list_presets, diff_presets, scaffold_preset │ └── correctionTools.ts # autocorrect_component, validate_ui, generate_component, generate_tokens, apply_token_overrides └── presets/ ├── glassmorphic-base/ # Core preset (all others inherit from this) │ ├── manifest.json │ ├── tokens.json # Full design token system │ ├── components/ │ │ ├── shell/Sidebar.json │ │ ├── surfaces/GlassCard.json │ │ ├── settings/OptionGroup.json │ │ └── navigation/NavGroup.json │ └── layouts/DashboardLayout.json ├── client-fintech/ # Blue accent, dense spacing ├── client-saas/ # Purple accent, wider cards └── client-dark-minimal/ # Monochrome, reduced glass intensity

MCP Tools

Preset Management

Tool	Description
`load_preset`	Activate a preset bundle by ID
`swap_template`	Hot-swap active preset without restart
`list_presets`	List all available presets
`diff_presets`	Compare token/component differences between two presets
`scaffold_preset`	Generate a new preset directory from a parent
`get_session_state`	Check active preset and runtime overrides

Correction & Generation

Tool	Description
`autocorrect_component`	Auto-fix React component against active preset
`validate_ui`	Validate component and get conformance score (0–100)
`generate_component`	Generate a component from a preset template
`generate_tokens`	Export tokens as CSS vars, JS, JSON, or Tailwind config
`apply_token_overrides`	Layer runtime token overrides on the active preset

Installation

npm install npm run build

Usage

stdio (for Monaco IDE integration)

node dist/index.js

HTTP server

TRANSPORT=http PORT=3001 node dist/index.js

Dev mode with hot-reload

WATCH_PRESETS=true node dist/index.js

Typical Workflow

1. load_preset("glassmorphic-base") # Activate base preset 2. autocorrect_component(code) # Fix component on save 3. validate_ui(code) # Get conformance score 4. generate_tokens({ format: "css" }) # Export CSS variables 5. swap_template("client-fintech") # Switch to client variant 6. scaffold_preset({ preset_id: "client-x" })# Create new client preset

Creating New Presets

New presets only need to override tokens that differ from the parent:

// presets/client-newbrand/tokens.json { "colors": { "accent": { "primary": "#e11d48" } } }

// presets/client-newbrand/manifest.json { "id": "client-newbrand", "name": "New Brand", "extends": "glassmorphic-base", "version": "1.0.0", "tags": ["custom"], "components": [], "layouts": [] }

All base tokens, components, and layouts are inherited automatically.

Correction Rules

The correction engine enforces these rules on every component:

no-hardcoded-colors (error): All color values must use CSS custom properties
no-hardcoded-spacing (warning): Spacing should use the token scale
enforce-glass-surface (error): Surface elements must have backdropFilter + semi-transparent bg
no-hardcoded-font-family (error): Font families must use typography tokens
use-animation-tokens (warning): Transitions must use animation tokens
enforce-sidebar-components (error): Sidebar content must use NavGroup/NavItem
enforce-settings-components (error): Settings UI must use OptionGroup/OptionRow
a11y-img-alt (warning): Images must have alt attributes
a11y-icon-button-label (warning): Icon buttons need aria-label

Monaco Integration

In your Monaco editor, call autocorrect_component on the save event:

editor.onDidSaveModel(async () => { const code = editor.getValue(); const result = await mcpClient.callTool('autocorrect_component', { code, context: 'auto', dry_run: false }); if (result.corrected !== code) { editor.setValue(result.corrected); } });

UI Preset MCP Server

UI Preset MCP Server

Architecture

MCP Tools

Preset Management

Correction & Generation

Installation

Usage

stdio (for Monaco IDE integration)

HTTP server

Dev mode with hot-reload

Typical Workflow

Creating New Presets

Correction Rules

Monaco Integration

Resources

Latest Blog Posts

MCP directory API