MCP Server

The Sugarcoat MCP (Model Context Protocol) server enables AI assistants to interact with the component library in real-time. This provides a richer experience than static documentation, allowing AI assistants to search, browse, and retrieve component information dynamically.

What is MCP?#

The Model Context Protocol↗ is an open standard that enables AI assistants to securely connect to external data sources and tools. Sugarcoat's MCP server exposes the component registry as a set of tools that AI assistants can use.

Installation#

Claude Code#

npx @sugarcoat/cli mcp --install claude

This creates a .mcp.json file in your project root:

{
  "mcpServers": {
    "sugarcoat": {
      "command": "npx",
      "args": ["@sugarcoat/mcp"]
    }
  }
}

After creating the config, restart Claude Code to activate the server.

Cursor#

npx @sugarcoat/cli mcp --install cursor

This creates .cursor/mcp.json:

{
  "mcpServers": {
    "sugarcoat": {
      "command": "npx",
      "args": ["@sugarcoat/mcp"]
    }
  }
}

Restart Cursor to activate.

VS Code#

npx @sugarcoat/cli mcp --install vscode

This creates .vscode/mcp.json:

{
  "servers": {
    "sugarcoat": {
      "command": "npx",
      "args": ["@sugarcoat/mcp"]
    }
  }
}

Restart VS Code to activate.

Manual Configuration#

You can also manually add Sugarcoat to your MCP configuration. The server is started with:

npx @sugarcoat/mcp

Or if you have @sugarcoat/cli installed:

npx @sugarcoat/cli mcp

Available Tools#

The MCP server provides six tools for AI assistants:

list_components#

List all available Sugarcoat UI components with optional filtering.

Parameters:

• category (optional): Filter by category (e.g., "forms", "layout", "feedback")
• limit (optional): Maximum number of components to return (default: 50)
• offset (optional): Number of components to skip for pagination

Example prompt: "List all form components in Sugarcoat"

search_components#

Search components by name, description, or tags using fuzzy matching.

Parameters:

• query (required): Search query string
• limit (optional): Maximum number of results (default: 10)

Example prompt: "Search for modal-related components"

view_component#

Get detailed information about a specific component including props and source code.

Parameters:

• name (required): Component name (e.g., "button", "card", "dialog")

Example prompt: "Show me the Button component details"

get_examples#

Get usage examples for a specific component.

Parameters:

• name (required): Component name

Example prompt: "Show me examples of how to use the Card component"

get_add_command#

Get the CLI command to add components to a project.

Parameters:

• components (required): Array of component names

Example prompt: "How do I install the button and card components?"

get_design_tokens#

Get design system tokens including colors, spacing, and typography.

Parameters:

• type (optional): Token type - "colors", "spacing", "typography", or "all" (default: "all")

Example prompt: "What colors are available in the Sugarcoat design system?"

Usage Examples#

Once configured, you can ask your AI assistant questions like:

Finding Components#

"What components does Sugarcoat have for forms?"

The AI will use list_components with category: "forms" to show available form components.

Getting Component Details#

"Show me how to use the Dialog component"

The AI will use view_component and get_examples to retrieve the Dialog component's props, source code, and usage examples.

Installation Help#

"I need to add a button, card, and dialog to my project"

The AI will use get_add_command to generate:

npx @sugarcoat/cli add button card dialog

Design System Reference#

"What's the primary color palette?"

The AI will use get_design_tokens with type: "colors" to show the color scales.

Troubleshooting#

Server Not Starting#

If the MCP server fails to start:

1. Ensure you have Node.js 18+ installed
2. Check that @sugarcoat/mcp is accessible via npx
3. Verify the config file is in the correct location
4. Restart your AI assistant

Tools Not Appearing#

If the Sugarcoat tools don't appear in your AI assistant:

1. Check that the MCP config file exists and is valid JSON
2. Restart the AI assistant completely (not just reload)
3. Check the AI assistant's MCP server logs for errors

Network Issues#

The MCP server fetches component data from https://registry.sugarcoat.dev. If you're behind a firewall or proxy, ensure this URL is accessible.

Running Standalone#

You can run the MCP server standalone for testing:

# Using the MCP package directly
npx @sugarcoat/mcp
 
# Using the CLI
npx @sugarcoat/cli mcp

The server communicates over stdio, so you'll need an MCP client to interact with it.