AI Integration

Sugarcoat provides first-class AI integration to help you build faster with AI-powered coding assistants. Whether you're using Claude Code, Cursor, VS Code Copilot, or other AI tools, Sugarcoat can provide context about components, design tokens, and usage patterns.

Overview#

Sugarcoat offers two complementary approaches for AI integration:

MCP Server#

The Model Context Protocol (MCP) server enables real-time, interactive communication between AI assistants and the Sugarcoat component library. AI assistants can:

• Search and browse available components
• View component source code and props
• Get usage examples
• Access design tokens (colors, spacing, typography)
• Generate installation commands

Learn more about MCP Server setup →

LLM Documentation Files#

The llm.txt files provide static documentation that can be included in AI assistant context. These files follow the emerging llms.txt standard↗ and contain:

• Complete component reference
• Installation instructions
• Design token documentation
• Usage examples

Learn more about LLM files →

Quick Start#

For Claude Code Users#

# Configure MCP server for Claude Code
npx @sugarcoat/cli mcp --install claude

This creates a .mcp.json file in your project root. Restart Claude Code to activate the Sugarcoat MCP server.

For Cursor Users#

# Configure MCP server for Cursor
npx @sugarcoat/cli mcp --install cursor

This creates .cursor/mcp.json. Restart Cursor to activate.

For VS Code Users#

# Configure MCP server for VS Code
npx @sugarcoat/cli mcp --install vscode

This creates .vscode/mcp.json. Restart VS Code to activate.

For Other AI Tools#

Sugarcoat hosts LLM documentation files that any AI tool can reference:

• Concise: sugarcoatui.com/llm.txt↗
• Complete: sugarcoatui.com/llm-full.txt↗

Simply ask your AI assistant to read these URLs for Sugarcoat documentation.

When to Use Each Approach#

Both approaches can be used together for maximum AI assistance coverage.

Supported AI Assistants#