MCP Server

mdui provides a dedicated MCP (Model Context Protocol) server, @mdui/mcp, that lets AI tools and IDEs query local knowledge about components, icons, CSS variables, and documentation.

It works with tools like Claude Code, Cursor, GitHub Copilot, and others to help you generate code and use mdui components and styles correctly.

Tools

The mdui MCP server exposes the following tools to AI clients:

• list_components: List all mdui components.
• get_component_metadata: Get detailed API metadata for a single component.
• list_css_classes: List global CSS class names.
• list_css_variables: List global CSS variables.
• list_documents: List all documentation entries.
• get_document: Get the full content of a single document.
• list_icon_codes: List icon codes that can be used in attributes or APIs.
• list_icon_components: List standalone icon components and their ESM import statements.

How to use

This server supports the stdio transport only (see MCP spec: https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) and can be used directly in VS Code, Cursor, Claude Code, Windsurf, Zed, and other clients.

VS Code

Make sure you have both the GitHub Copilot and GitHub Copilot Chat extensions installed.

1. Create .vscode/mcp.json at the project root with the following content:

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

2. Click the "Start" button shown in the mcp.json file.

3. Start a conversation in GitHub Copilot Chat.

Cursor

1. Create or edit .cursor/mcp.json at the project root and add:

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

2. Go to Settings > Cursor Settings > MCP & Integrations and enable the mdui server.

3. Start a chat in Cursor.

Claude Code

1. In your terminal, add the mdui MCP server:

   claude mcp add mdui -- npx -y @mdui/mcp
   

2. Then run claude to start a session.

3. Enter your prompts to start using it.

Windsurf

1. Open Settings > Windsurf Settings > Cascade.

2. Click "Manage MCPs", then "View raw config", and add:

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

   If the MCP server does not appear automatically, click Refresh to reload the list.

3. Enter your prompts to start a conversation.

Zed

1. Open Settings > Open Settings, then add the following to settings.json:

   {
     "context_servers": {
       "mdui": {
         "source": "custom",
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Start prompting to use the server.

Custom MCP clients

When using a custom MCP client locally or in a dev environment, add the server to your client configuration. For example:

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