MCP server that exposes Elena scaffolding and authoring guidance

[!WARNING] Please note that @elenajs/mcp is an experimental package and not yet ready for production use. APIs may change without notice.

Table of contents

• Install
• Configuration
  • Claude Code
  • Claude Desktop
• Resources
  • elena://components
  • elena://components/{tagName}
  • elena://patterns
  • elena://frameworks
  • elena://ssr
  • elena://api
• Tools
  • scaffold-component
  • lookup-component
  • get-patterns
  • get-api-reference
  • get-frameworks-guide
  • get-ssr-guide
• Prompts
  • create-component
  • review-component
• Programmatic usage

Install

npm install --save-dev @elenajs/mcp

Configuration

Claude Code

Add to .mcp.json in your project root:

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

Claude Desktop

Add to claude_desktop_config.json:

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

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

{
  "mcpServers": {
    "elena": {
      "command": "npx",
      "args": ["@elenajs/mcp", "./path/to/component-library"]
    }
  }
}

[!NOTE] The MCP server reads custom-elements.json from the project’s dist/ directory. Run elena build first to generate it.

Resources

elena://components

Returns a JSON array of all components in the project with summary information (name, tag name, description, status, type).

elena://components/{tagName}

Returns full API details for a specific component, including props with types and defaults, events, CSS custom properties, and slots.

elena://patterns

Returns a comprehensive Elena component authoring guide covering component types, static class fields, props, events, templates, CSS encapsulation patterns, lifecycle methods, SSR, framework compatibility, and best practices.

elena://frameworks

Returns a framework integration guide covering Plain HTML, Eleventy, Next.js, React, Svelte, Vue and Angular, including TypeScript declaration setup for each framework.

elena://ssr

Returns a server-side rendering guide: layout shift avoidance strategies, the @elenajs/ssr package API (register() and ssr()), Eleventy transform and shortcode patterns, and how client-side hydration works.

elena://api

Returns the full API reference for all Elena packages: @elenajs/core, @elenajs/bundler, @elenajs/ssr, @elenajs/mcp, and the build plugins.

Tools

scaffold-component

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

Parameters:

| 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.

Parameters:

| 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). Covers component types, static class fields, props, events, templates, CSS encapsulation, lifecycle, and best practices.

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). Covers Plain HTML, Eleventy, Next.js, React, Svelte, Vue, Angular, and TypeScript setup for each.

get-ssr-guide

Returns the server-side rendering guide (same content as elena://ssr). Covers layout shift avoidance, the @elenajs/ssr API, and Eleventy patterns.

Prompts

create-component

A guided workflow for creating new Elena components. The AI assistant will ask about props, events, and CSS properties, then generate 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.

Programmatic usage

import { createServer } from "@elenajs/mcp";

const server = createServer({ projectRoot: "./my-components" });

License

MIT

Copyright

Copyright © 2026 Ariel Salminen