Your AI, finally fluent in web components.

A comprehensive MCP tool catalog that gives your AI real component docs — straight from the source. Zero invented attributes. Zero framework lock-in. Local-only, no account required.

v0.6.1 GitHub MIT

$ npx helixir init

Connect in 60 seconds

View on GitHub

npm package →

terminal

$ npx helixir init

✓ Detected framework: Lit

✓ Found custom-elements.json

✓ Generated mcpwc.config.json

✓ Wrote mcpwc.config.json — restart your AI editor to connect

The Problem

AI invents APIs. HELiXiR grounds them in truth.

Without HELiXiR, your AI guesses. It invents attributes, makes up events, hallucinates prop names that don’t exist. With HELiXiR, every component call comes from the Custom Elements Manifest — the ground truth for your library. Every attribute, event, slot, CSS part, and dependency, surfaced through your MCP client.

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.

Comprehensive Tool Catalog

Full situational awareness for your design system.

Six representative categories below — a sampling from the tool catalog, spanning discovery, deep introspection, health scoring, composition safety, framework detection, and tokens. Theme scaffolding, styling, type generation, and breaking-change detection live on the full reference on GitHub.

◀

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

10 tools

Full introspection of any component.

get_component
validate_cem
suggest_usage
generate_import
get_component_narrative
get_prop_constraints
find_components_by_token
find_components_using_token
get_component_dependencies
validate_usage

◆

Health & Quality

7 tools

A–F quality grades with dimensional scoring.

score_component
score_all_components
analyze_accessibility
get_health_trend
get_health_diff
get_health_summary
audit_library

■

Composition & Safety

4 tools

Safe assembly and change detection.

get_composition_example
validate_usage
diff_cem
check_breaking_changes

●

Framework & Build

4 tools

Framework detection and code generation.

detect_framework
generate_story
estimate_bundle_size
get_component_dependencies

★

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

Vaadin

∗

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

Your component library never leaves your machine. HELiXiR runs as a local MCP server with no telemetry, no cloud indexing, and no account required. Path containment, Zod validation on every argument, and zero shell execution on user input.

▲

Health Scoring

14-dimension A–F health scoring with configurable weights per team. Accessibility-first teams can run at 3x weight. Trend tracking shows score drift over time before it becomes a production problem.

★

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 any MCP-compatible AI editor in 60 seconds.

$ npx helixir init

GitHub npm Issues