MCP Server

Cotton includes an MCP (Model Context Protocol) server that lets AI assistants like Claude understand and generate Cotton-compliant code.

What is MCP?

MCP is a protocol that allows AI assistants to access external tools and data sources. The Cotton MCP server provides:

• Component introspection (props, variants, accessibility)
• Design token queries
• Coding standards and preferences
• Code validation against Cotton conventions

Installation

npm install -g @akrade/cotton-mcp

Claude Desktop Setup

Add to your Claude Desktop config (~/.claude/claude_desktop_config.json):

{
  "mcpServers": {
    "cotton": {
      "command": "cotton-mcp",
      "args": []
    }
  }
}

Restart Claude Desktop to activate.

Available Tools

Once connected, Claude can use these tools:

Component Introspection

• component_introspect — Get component props, variants, and usage
• react_component — Get React-specific documentation
• figma_structure — Get Figma layer structure

Design Tokens

• css_classes — Get recommended CSS tokens
• suggest_token — Suggest semantic tokens for values
• validate_tokens — Validate code against token rules

Coding Standards

• get_preferences — Get all coding preferences
• get_critical_rules — Get MUST/NEVER rules for a context
• validate_code — Validate code against standards

Example Usage

With the MCP server connected, you can ask Claude:

• "Create a login form using Cotton components"
• "What props does CottonButton accept?"
• "Check if this CSS follows Cotton token conventions"
• "What's the semantic token for error text?"

API Endpoint

The MCP server is also available as a REST API at api.withcotton.io