Your AI just stopped hallucinating about web components.

37 MCP tools. Zero guesswork. Connect any CEM-compliant library to Claude, Cursor, or any MCP client in 60 seconds.

npx helixir init View on GitHub

terminal

$ npx helixir init

✓ Detected framework: Lit

✓ Found custom-elements.json

✓ Generated mcpwc.config.json

✓ Ready in 3.2s — 87 components loaded

The Problem

AI invents APIs. HELiXiR grounds them in truth.

Without access to your actual component library, AI tools make things up. Wrong attribute names, non-existent events, invented slot signatures. HELiXiR eliminates that entirely.

Before HELiXiR

AI response — hallucinated

// AI-generated — none of this is real<my-button
 on-clicked="handleClick" 
 color-scheme="primary" 
 size-variant="large" 
>
 /* slot: "label" -- invented */ 
</my-button>

✗ Event doesn't exist. Attribute names wrong. Slot invented.

After HELiXiR

AI response — grounded in CEM

// Sourced from custom-elements.json<my-button
 @click="handleClick" 
 variant="primary" 
 size="lg" 
>
 /* default slot */ 
</my-button>

✓ Every attribute, event, and slot verified against live CEM metadata.

37 MCP Tools

Full situational awareness for your design system.

Six tool categories covering everything from component discovery to health scoring, breaking change detection, and framework-specific code generation.

◀

Discovery

7 tools

Explore and navigate your component library.

list_components
find_component
get_library_summary
list_components_by_category
list_events
list_slots
list_css_parts

▲

Component Deep Dives

4 tools

Full introspection of any component.

get_component
validate_cem
suggest_usage
generate_import

◆

Health & Quality

5 tools

A–F quality grades with dimensional scoring.

score_component
score_all_components
analyze_accessibility
check_breaking_changes
get_health_trend

■

Composition & Safety

3 tools

Safe assembly and change detection.

get_composition_example
validate_usage
diff_cem

●

Framework & Build

4 tools

Framework detection and code generation.

detect_framework
generate_story
estimate_bundle_size
get_project_diagnostics

★

Tokens & CDN

4 tools

Design tokens and remote library loading.

get_design_tokens
find_token
resolve_cdn_cem
benchmark_libraries

Editor Support

Works wherever you code.

Any MCP-compatible client can connect to HELiXiR. One config, every tool.

Claude Desktop

Supported

CLI

Claude Code

Supported

Cursor

Supported

VS Code

via Cline / Continue

Supported

Zed

Supported

MCP

Any MCP Client

Supported

Framework Compatibility

Works with any CEM-compliant library.

Load from CDN, npm, or a local path. Point HELiXiR at any CEM and start building.

Lit

Lit / Helix

Stencil

FAST

Shoelace

Spectrum

∗

Works with any component library If it ships a custom-elements.json, HELiXiR can load it.

Quick Start

Zero to component-aware AI in 60 seconds.

Initialize

Run the init command. HELiXiR detects your framework and generates a config.

bash

$ npx helixir init

Configure

Edit the generated config to point at your component library.

json mcpwc.config.json

{
  "cemPath": "custom-elements.json",
  "projectRoot": "/path/to/library",
  "componentPrefix": "hx-"
}

Add to Claude

Add HELiXiR to your Claude Desktop or Claude Code configuration.

json claude_desktop_config.json

{
  "mcpServers": {
    "helixir": {
      "command": "npx",
      "args": ["helixir"]
    }
  }
}

Why HELiXiR

Ground truth, not guesswork.

◆

Ground Truth, Not Guesswork

Every AI response sourced directly from authoritative CEM metadata. No inventing attributes, no fabricated events, no hallucinated slot names.

▶

60-Second Setup

npx helixir init detects your framework, finds your CEM, and generates the config. No boilerplate. No ceremony.

■

Enterprise Security

Defense-in-depth: path containment, Zod schema validation, zero shell execution. Runs locally — your component data never leaves your machine.

▲

Health Scoring

Automated A–F quality grades with dimensional scoring for every component. Track accessibility, documentation completeness, and API stability.

★

Breaking Change Detection

Diff your CEM across versions before upgrading. Know exactly what changed, what broke, and what your consumers need to update.

●

Open Source, MIT

Free to use, fork, and extend. Built by Booked Solid Technology and the open source community. No vendor lock-in.

Give your AI x-ray vision.

Stop accepting hallucinated APIs. Connect your design system to Claude in 60 seconds.

$ npx helixir init

GitHub npm Issues