MCPSystemdesign

You can access the MCP server that exposes design system components and style guides for AI assistants. It provides component specifications, code examples, a style guide, and a reliable SSE transport for remote access, making it easy to integrate design system data into your AI workflows and UI tooling.

How to use

Connect to the MCP server from your MCP client to browse components, fetch style guide data, and subscribe to live updates via Server-Sent Events. You can explore component props, see ready-to-use Tailwind CSS patterns, and retrieve color, typography, spacing, and breakpoint tokens. Use the standard HTTP MCP endpoint to establish an SSE connection and to send MCP JSON-RPC messages as needed. When connected, you can search by component name, description, or category and request full documentation for individual components.

How to install

Prerequisites: ensure Node.js is installed on your development machine. You should also have a package manager such as npm available.

Step 1: Install dependencies for the local project.

npm install

Step 2: Run the development server locally to preview the MCP SSE endpoint.

npm run dev

Step 3: Access the MCP SSE endpoint at the following local URL.

http://localhost:3000/api/sse

Step 4: If you plan to deploy, you can publish to a hosting provider that supports Next.js applications and SSE transport, using your preferred deployment method.

Security and stability notes

The server includes input validation, rate limiting, and structured logging to improve reliability and security when exposing design system data to AI assistants.

Customization tips

You can extend the design system by editing the designated design data modules to introduce new components, patterns, and style tokens. Ensure all changes pass the project’s validation scripts to maintain consistency across tokens, colors, and component examples.

Troubleshooting

If you encounter connection issues, verify that your client supports SSE and that the origin is allowed by the server. Long-running connections may be terminated by the hosting provider, so consider using ping messages or keeping-alive strategies as needed.

Notes on integration with AI assistants

Use the MCP server’s URL to configure your AI assistant’s MCP client. You can then request full component docs, style tokens, and code examples as part of your assistant’s design-system-aware interactions.

Available tools

list_patterns

List all Tailwind pattern groups available in the MCP server.

get_pattern

Retrieve a specific Tailwind pattern with class variations.

search_patterns

Search patterns by name, description, or category.

get_pattern_examples

Get code examples for a given pattern.

get_style_guide

Fetch the entire style guide or a specific section.

get_colors

Retrieve color tokens, optionally by category.

get_typography

Retrieve typography styles.

get_spacing

Retrieve spacing scale tokens.

get_breakpoints

Retrieve responsive breakpoint definitions.

get_design_system_info

Get an overview of the design system and statistics.

list_components

List all @mcpsystem/ui components.

get_component

Get component docs including props, events, and CSS parts.

search_components

Search components by name or description.