Adeo-mozaic-mcp: MCP Tool for Integrating Mozaic Design System Query Service in AI Assistants like Claude

Adeo Mozaic MCP

The Mozaic MCP Server is a tool that provides query services for ADE0's Mozaic design system to AI assistants such as Claude. By indexing design tokens, component documentation, icons, and CSS utility classes, it enables AI to obtain design system information and generate code snippets.

Developer tools Knowledge management and memory #Design system #Component query #Code generation #AI assistant .TypeScript

rating : 2 points

downloads : 7.2K

update time : 2025-12-29

Open Site

What is the Mozaic MCP Server?

The Mozaic MCP Server is a server specifically designed for AI assistants, which connects to ADEO's Mozaic design system. Through this server, AI assistants (such as Claude) can directly query various resources of the design system, including design specifications, UI components, icon libraries, and documentation. It's like equipping the AI assistant with a dedicated librarian for the design system, who can quickly find the information you need.

How to use the Mozaic MCP Server?

Using this server is very simple: First, you need to install and start the server. Then, configure the connection in an AI assistant that supports the MCP protocol (such as Claude Desktop). After the configuration is complete, you can directly ask the AI assistant questions related to the Mozaic design system, such as 'What are the attributes of the Mozaic button component?' or 'Give me the code for the main blue color tone.' The AI will obtain accurate information through the server and answer you.

Applicable scenarios

This service is particularly suitable for the following scenarios: 1) Front - end developers need to quickly consult design specifications when writing code; 2) Designers need to confirm the consistency of the design system; 3) New team members learn the Mozaic design system; 4) Verify compliance with design specifications during code review; 5) Quickly generate UI code snippets that comply with the design system.

Main features

Component query

Supports querying complete information of Vue and React components, including attributes, slots, events, and example code. You can browse all available components by category.

Design specification query

Provides queries for 586 design specifications, including colors, fonts, spacing, shadows, borders, etc., and supports filtering by category.

Icon search

Includes a search function for 1,473 icons, supports filtering by name, type (navigation, media, social, etc.) or size (16 - 64px), and provides SVG and React/Vue code.

CSS utility classes

Provides queries for 6 major categories of CSS utility classes, including the Flexy grid system, containers, margins, paddings, ratios, and scroll controls, with a total of more than 500 class names.

Full - text document search

Supports full - text search in 281 document pages, including design system documentation and Storybook usage guides.

Code generation

Automatically generates Vue or React component code based on design specifications to ensure that the code complies with the Mozaic design system standards.

Installation guide

Provides installation commands, import methods, and quick - start code for components to help developers quickly integrate components.

Advantages

One - stop query: Integrates all resources of the Mozaic design system, eliminating the need to switch between different documents

AI - friendly: Optimized specifically for AI assistants, providing a structured data interface

Real - time and accurate: Based on the latest Mozaic version (2.x), ensuring the timeliness of information

Multi - framework support: Supports both Vue 3 and React components

Ready - to - use code: The provided code examples can be directly copied and used

Limitations

Requires configuration: Server configuration is required in the AI assistant to use

Network - dependent: Needs to obtain the latest data from the GitHub repository

Learning curve: Requires understanding of basic MCP protocol concepts

Mozaic - only: Only supports ADEO's Mozaic design system and is not applicable to other design systems

Features in development: Some features (such as the installation guide) are still in the testing phase

How to use

Install the server

First, you need to install the Mozaic MCP Server. Use a package manager (such as pnpm) for installation.

Build the database

The server needs to build a local database to store design system data. This process will automatically obtain the latest data from the Mozaic GitHub repository.

Start the server

Start the MCP server, which will communicate with the AI assistant through standard input and output (stdio).

Configure the AI assistant

Configure the server connection in an AI assistant that supports MCP (such as Claude Desktop). Usually, you need to add server information to the configuration file.

Start querying

After the configuration is complete, you can directly ask the AI assistant questions related to the Mozaic design system.

Usage examples

Quickly find the button component

Developers need to know all available attributes and events of the Mozaic button component when writing the interface.

Confirm design specifications

Designers need to confirm whether a certain color value complies with the Mozaic design specifications.

Icon selection

Need to find suitable icons for the navigation menu.

Layout implementation

Need to implement a responsive layout using the Mozaic grid system.

Code generation

Need to quickly create a card component that complies with Mozaic specifications.

Frequently Asked Questions

What do I need to install to use this server?

Which AI assistants does this server support?

Is the data up - to - date? How to update it?

Is this server free?

Which design system versions are supported?

What should I do if I encounter a problem?

Will this server affect the performance of the AI assistant?

Can I extend this server to support other design systems?

Related resources

Official documentation

Complete project documentation, including architecture descriptions, API references, and usage guides

Online experience

Online demonstration and experience environment, allowing you to try the functions without installation

GitHub repository

Project source code, where you can view the code, submit issues, or participate in contributions

Mozaic design system

Official website of the ADEO Mozaic design system

Model Context Protocol

Official documentation and specifications of the MCP protocol

Claude Desktop

AI assistant desktop application supporting MCP

🚀 Mozaic MCP Server

An MCP (Model Context Protocol) server that exposes the Mozaic Design System by ADEO to Claude and other AI assistants. This server enables AI to access and interact with the design system effectively.

View Documentation | Try the Playground

⚠️ Important Note

This project is under active development. Contributions and feedback are welcome!

🚀 Quick Start

pnpm install
pnpm build   # Compiles TypeScript & builds the database
pnpm start   # Starts the MCP server

✨ Features

This server indexes the entire Mozaic Design System and makes it queryable through MCP tools. AI assistants can:

Look up design tokens (colors, spacing, typography, etc.)
Get component documentation with props, slots, events, and examples
Search and retrieve icons with SVG/React/Vue code
Search documentation pages
Generate component code snippets

📦 What's Indexed

Property	Details
Design Tokens	586 - Colors, typography, spacing, shadows, borders, screens, grid
Vue Components	52 - Props, slots, events, examples
React Components	39 - Props, callbacks, examples
Icons	1,473 - SVG icons in 15 categories (354 unique, 5 sizes each)
CSS Utilities	6 - Flexy, Container, Margin, Padding, Ratio, Scroll (500+ classes)
Documentation	281 - MDX pages with full-text search

Documentation sources:

Design System docs (220 pages)
Vue Storybook docs (58 pages) - Getting Started, Usage guides
React Storybook docs (3 pages) - Getting Started, Usage guides

📚 MCP Tools

Component Tools

Tool	Description
`get_component_info`	Get Vue/React component details (props, slots, events, examples)
`list_components`	List framework components by category
`generate_vue_component`	Generate Vue component code
`generate_react_component`	Generate React component code

CSS Utility Tools

Tool	Description
`get_css_utility`	Get CSS utility classes and examples (Flexy, Margin, etc.)
`list_css_utilities`	List available CSS utilities by category (layout, utility)

Icon Tools

Tool	Description
`search_icons`	Search icons by name, type (navigation, media, social), or size (16-64px)
`get_icon`	Get icon details with SVG markup and ready-to-use React/Vue code

Installation Tools

Tool	Description
`get_install_info`	Get installation commands, imports, and quick start code for a component (beta)

Other Tools

Tool	Description
`get_design_tokens`	Query tokens by category (color, spacing, typography, shadow, border, screen, grid)
`search_documentation`	Full-text search across all docs

📚 Token Categories

Property	Details
color	482 - `--color-primary-01-100`, `--color-button-solid-*`
typography	60 - `--font-size-`, `--line-height-`
spacing	19 - `$mu025` to `$mu1000` (Magic Unit system)
screen	12 - Breakpoints: `s`, `m`, `l`, `xl`, `xxl`
shadow	3 - Box shadows with x, y, blur, spread, opacity
border	3 - Border widths
radius	3 - Border radius values
grid	4 - Gutters, magic-unit, rem values

📚 CSS Utilities

CSS-only layout and utility classes (no Vue/React wrapper). Use get_css_utility tool to get full class lists and examples.

Utility	Category	Description
Flexy	layout	Flexbox 12-column grid with responsive classes
Container	layout	Responsive container with max-width
Margin	utility	Margin utilities using Magic Unit scale
Padding	utility	Padding utilities using Magic Unit scale
Ratio	utility	Aspect ratio utilities (16:9, 4:3, 1:1, etc.)
Scroll	utility	Scroll prevention utility

🔧 Technical Details

┌─────────────────────────────────────────────────────────────┐
│                     Claude Desktop                          │
└─────────────────────────┬───────────────────────────────────┘
                          │ stdio
┌─────────────────────────▼───────────────────────────────────┐
│                    MCP Server                               │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Tools: get_component_info, get_css_utility, ...     │   │
│  └─────────────────────────┬───────────────────────────┘   │
│                            │                                │
│  ┌─────────────────────────▼───────────────────────────┐   │
│  │                 SQLite Database                     │   │
│  │  tokens | components | icons | css_utilities | docs │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                          ▲
                          │ build
┌─────────────────────────┴───────────────────────────────────┐
│                    Source Repositories                      │
│  mozaic-design-system  │  mozaic-vue  │  mozaic-react      │
└─────────────────────────────────────────────────────────────┘

📚 Documentation

docs/ARCHITECTURE.md - Architecture diagrams and statistics
docs/TEST.md - Testing guide

🚧 Next Steps

Benchmarking: MCP vs Claude Skills

Compare performance and effectiveness of MCP server approach vs native Claude skills:

[ ] Define benchmark scenarios (component lookup, code generation, documentation search)
[ ] Measure response accuracy and completeness
[ ] Compare token usage and latency
[ ] Evaluate context window efficiency
[ ] Document trade-offs and recommendations

Release Process

Steps to publish the MCP server:

[ ] npm registry: Publish to npm (npm publish)
[ ] Smithery: Submit to smithery.ai MCP marketplace
[ ] GitHub release: Create tagged release with changelog
[ ] Claude Desktop config: Document installation in claude_desktop_config.json
[ ] Version strategy: Define semver policy for database schema changes