Developers

CEM (Custom Elements Manifest multitool) provides AI-powered editor features for Red Hat Design System components. It gives your editor and AI assistant structured knowledge of RHDS elements, including their attributes, slots, events, CSS custom properties, and usage guidelines.

CEM offers two integration modes:

• LSP (Language Server Protocol) adds autocomplete, hover documentation, go-to-definition, and validation to your editor
• MCP (Model Context Protocol) gives AI assistants direct access to component manifests for accurate HTML generation and validation

Install CEM using npm:

npm install -g @pwrs/cem

Or using Go:

go install bennypowers.dev/cem@latest

Verify the installation:

cem version

The CEM plugin for Claude Code provides both LSP and MCP support. Install the plugin with two commands:

/plugin marketplace add bennypowers/cem
/plugin install cem

Once installed, Claude Code gains:

• Editor intelligence for HTML, TypeScript, and JavaScript files, with autocomplete and validation for RHDS elements
• AI-native component understanding, so Claude can generate correct HTML using RHDS components with proper slots, attributes, and design tokens

No additional configuration is needed. The plugin discovers custom-elements.json manifests in your project and in node_modules automatically.

Cursor supports MCP servers for AI-assisted development. Add CEM to your Cursor MCP configuration:

{
  "mcpServers": {
    "cem": {
      "command": "cem",
      "args": ["mcp"]
    }
  }
}

See the Cursor MCP docs for the configuration file location on your platform.

For LSP support in Cursor, configure the language server to run cem lsp for HTML, TypeScript, and JavaScript files.

Install the Custom Elements Language Server extension from the VS Code marketplace. The extension bundles the language server and works out of the box.

For MCP support, add CEM to your MCP configuration the same way as Cursor (above).

For Neovim 0.12+ with native LSP support, create ~/.config/nvim/lsp/cem.lua:

return {
  cmd = { 'cem', 'lsp' },
  root_markers = { 'custom-elements.json', 'package.json', '.git' },
  filetypes = { 'html', 'twig', 'php', 'typescript', 'javascript' },
}

After configuring your editor or AI assistant:

1. Open an HTML file in a project that depends on @rhds/elements
2. Start typing <rh- and confirm that autocomplete suggestions appear
3. If using MCP, ask your AI assistant "What RHDS elements are available in this project?"

If completions do not appear, make sure your project has a custom-elements.json manifest. Generate one with:

cem generate

• CEM documentation
• MCP reference
• LSP reference