MCP server Experimental

@elenajs/mcp is a Model Context Protocol server that exposes Elena component metadata, scaffolding tools, and authoring guidance to AI assistants. It reads the Custom Elements Manifest generated by elena build and provides resources, tools, and prompts for web component development.

WARNING

@elenajs/mcp is an experimental package and not yet ready for production use. APIs may change without notice.

Install

npm

npm install --save-dev @elenajs/mcp

yarn

yarn add --dev @elenajs/mcp

pnpm

pnpm add --save-dev @elenajs/mcp

bun

bun add --dev @elenajs/mcp

Configuration

Claude Code

// .mcp.json
{
  "mcpServers": {
    "elena": {
      "command": "npx",
      "args": ["@elenajs/mcp"]
    }
  }
}

Claude Desktop

// claude_desktop_config.json
{
  "mcpServers": {
    "elena": {
      "command": "npx",
      "args": ["@elenajs/mcp"]
    }
  }
}

You can optionally pass a project root path as an argument:

"args": ["@elenajs/mcp", "./path/to/component-library"]

TIP

Elena MCP server reads custom-elements.json from the project’s dist/ directory. Run elena build first to generate it.

Resources

The server exposes the following resources that AI assistants can read for context:

Resource	Description
elena://components	JSON array of all components with summary info.
elena://components/{tagName}	Full API details for a specific component: props, events, CSS properties, slots.
elena://patterns	Component authoring guide covering types, props, events, CSS, lifecycle, and best practices.
elena://frameworks	Framework integration guide for Plain HTML, Eleventy, Next.js, React, Svelte, Vue, and Angular.
elena://ssr	Server-side rendering guide: layout shift avoidance, @elenajs/ssr API, and Eleventy patterns.
elena://api	Full API reference for all Elena packages.

Tools

scaffold-component

Generates JavaScript and CSS boilerplate for a new Elena component. Returns file contents without writing to disk.

Parameter	Type	Required	Description
name	string	Yes	Component class name in PascalCase (e.g. "DatePicker").
tagName	string	Yes	Custom element tag name (e.g. "elena-date-picker").
props	Array<{ name, type?, default?, description? }>	No	Props to define.
events	string[]	No	Event names to delegate.
cssProperties	Array<{ name, description? }>	No	CSS custom properties.
description	string	No	Component description for JSDoc.
status	"alpha" | "beta" | "stable"	No	Component status (default: "alpha").
cssEncapsulation	boolean	No	Include the all:unset encapsulation reset in CSS (default: true).
ssr	boolean	No	Include :scope:not([hydrated]) pre-hydration styles to avoid layout shift (default: false).

lookup-component

Queries API details for an existing component by tag name or class name. Returns props, events, CSS properties, slots, and metadata.

Parameter	Type	Required	Description
name	string	Yes	Component tag name (e.g. "elena-button") or class name (e.g. "Button").

get-patterns

Returns the Elena component authoring guide (same content as elena://patterns).

get-api-reference

Returns the full API reference for all Elena packages (same content as elena://api).

get-frameworks-guide

Returns the framework integration guide (same content as elena://frameworks).

get-ssr-guide

Returns the server-side rendering guide (same content as elena://ssr).

Prompts

create-component

A guided workflow for creating new Elena components. The AI assistant asks about props, events, and CSS properties, then generates boilerplate using the scaffold-component tool.

review-component

A best-practices review checklist for existing Elena components. Pass your component's JavaScript (and optionally CSS) code to get a structured review covering props, JSDoc, CSS isolation, hydration, and framework compatibility.

Skills Pre-release

Elena also provices agent skills to complement the @elenajs/mcp. Once installed, your coding agent automatically has context on Elena component authoring patterns without additional setup. Use skills for general authoring guidance; use MCP when you need dynamic tools like component scaffolding and CEM lookup.

Install

npx skills add https://elenajs.com

The CLI fetches the skills index and lets you choose which skills to install. Skills are then written into your agent’s configuration and loaded automatically when needed.

Available skills

Skill	Description
elena-authoring	Component types, props, events, templates, lifecycle, mixins and framework compatibility rules.
elena-styles	CSS encapsulation, reset, SSR hydration patterns, theming and browser bug workarounds.
elena-tooling	Bundler config, CLI scaffolding, Custom Elements Manifest, server-side rendering and TypeScript.