Sema4.ai Design System MCP Server

The Sema4.ai Design System MCP Server provides AI assistants with direct access to component documentation, color tokens, icons, and hooks through the Model Context Protocol.

Features

The MCP server provides:

  • Component Documentation: Access detailed docs for all components with props, types, and usage examples
  • Layout Documentation: Get documentation for layout components
  • Color Tokens: Query the complete color palette and semantic color tokens
  • Icons: Search and browse available icons from default, logos, and agents icon sets
  • Hooks: Discover utility hooks with usage examples

Cursor

Add the MCP server to your Cursor configuration:

macOS/Linux: ~/.cursor/mcp.json

Windows: %APPDATA%\Cursor\mcp.json

Code block

After configuration, restart Cursor to load the MCP server.

Claude Code

Add the MCP server to your Claude Code configuration file:

macOS/Linux: ~/.config/claude-code/mcp_settings.json

Windows: %APPDATA%\claude-code\mcp_settings.json

Code block

If you installed it globally, you can use:

Code block

After configuration, restart Claude Code to load the MCP server.