About this Server
This server implements the Model Context Protocol (MCP), providing a bridge between LLMs (like Claude, GPT, etc.) and the EOxElements component library.
Through rich metadata, descriptions, real-world stories, and usage code snippets, coding agents can effortlessly explore, instantiate, configure, and troubleshoot EOxElements custom elements in any web environment.
Registry Overview
Connect EOxElements to your Coding Agent
To use these tools with Claude Desktop, add the following configuration to your claude_desktop_config.json:
{
"mcpServers": {
"eox-elements": {
"command": "node",
"args": [
"/absolute/path/to/EOxElements/mcp-server/index.js",
"--manifest",
"/absolute/path/to/EOxElements/custom-elements.json",
"--snippets",
"/absolute/path/to/EOxElements/story-snippets.json"
]
}
}
}Supported MCP Tools
List all available EOxElements custom elements.
Get the full custom-elements-manifest details for a specific tag name.
Get stories/snippets (descriptions and functional code) for an element.
Get the HTML attributes supported by a specific element.
Get reactive JS properties (and their type JSDocs) for an element.
Get all custom events dispatched by a specific element.
Available Components (16)
EOxChart
Chart component based on [Vega-Lite](https://vega.github.io/vega-lite/)/[Vega-Embed](https://github.com/vega/vega-embed). Pass a valid Vega spec as `spec` property or attribute in order to render a chart. Optionally for transfer of chart definitions with both single and double quote as attribute, use the `spec` as base64 encoded string. The `eox-chart` provides some default `spec` settings (merged with the provided `spec` property/attribute) and helper functionalities on top of Vega-Lite. Default `spec` settings (see the file `src/enums/default-spec.js`): - `width`: "container" (make the chart width responsive to the parent) - `height`: "container" (make the chart height responsive to the parent) - `autosize`: "fit" (automatically adjust the layout in an attempt to force the total visualization size to fit within the given width, height and padding values) - `resize`: true (autosize layout is re-calculated on every view update) - `padding`: 16 (the padding in pixels to add around the visualization) These default `spec` settings can be overwritten by setting them to a differnt value in the `spec` property/attribute passed to `eox-chart`. Also, there are default Vega-Embed options (see the file `src/enums/default-opt.js`), which can also be overwritten in the passed `opt` property/attribute. Helper functionalities: The `eox-chart` automatically emits mouse/pointer events from the Vega-Lite chart. See below for the emitted events. For working with base64 encoded `spec` or `dataValues` attributes, `eox-chart` exports two helper methods: `base64EncodeSpec` (encoding), `parseSpec` (decoding).
EOxDrawTools
The `eox-drawtools` element provides a comprehensive set of drawing, editing, selection, and import tools for vector features on an `eox-map`. It supports drawing multiple feature types (Polygon, Box, Point, Circle, LineString), continuous drawing, feature modification, selection from existing layers, and import/export in various formats (GeoJSON, WKT, native OL feature). Key features: - Draw polygons, boxes, points, circles, and lines on the map - Draw multiple features at once (set `multiple-features`) - Continuous drawing mode (set `continuous`) - Modify drawn features (set `allow-modify`) - Select features from a specified layer (`layer-id`) - Display a list of drawn/selected features (`show-list`) - Edit features as GeoJSON in a text editor (`show-editor`) - Import features via drag-and-drop or file upload (`import-features`) - Emit drawn features in different formats (`format`: `feature`, `geojson`, `wkt`) - Emit features in a specified projection (`projection`) - Customizable feature styles (`featureStyles`) - Unstyled and no-shadow variants for easy integration Usage examples and visual demos are available in Storybook stories, including scenarios for multi-feature drawing, feature modification, selection, import/export, continuous drawing, format and projection control, and style customization. ## Methods - `startDrawing`: Triggers starting the drawing interaction on the map. - `stopDrawing`: Triggers stopping the drawing interaction on the map (same as pressing the Escape key). - `discardDrawing`: Triggers discarding/stopping the drawing interaction and deleting the drawn shapes. - `removeFeature`: Removes a feature from the drawn features. - `removeFeatureByIndex`: Removes a feature from the drawn features by its index. Usage: `document.querySelector("eox-drawtools").startDrawing();`
EOxFeedback
The `eox-feedback` element provides a modal dialog for collecting user feedback.
It supports screenshot capture, customizable endpoint, and flexible styling.
The feedback modal (`
EOxGeoSearch
`eox-geosearch` provides a flexible geocoding and location search interface using the OpenCage API. It can be used standalone or integrated with `eox-map` for interactive map zooming and result visualization. Main features: - Search for locations using OpenCage API - Integrate with `eox-map` for zooming to results - Customizable loader SVG - Geographic extent limiting - Tooltip support - Additional OpenCage API parameters via args - Button mode for compact UI - Flexible alignment and direction options
EOxItemFilter
The `eox-itemfilter` element provides a comprehensive item filtering system for lists of items with flexible filter types, result aggregation, and customizable display modes. Features: - Supports `text`, `select`, `multiselect`, `range` (including date), and `spatial` filters - Aggregates results by a property key (e.g. themes) - Inline mode for compact UI - Pre-set filter state via `state` in `filterProperties` property/attribute - Nested property filtering using dot notation - External search API endpoint support via `externalFilter` property - Auto-spreading of single-item aggregations to root level - Card display mode for results (`result-type="cards"`) - Secondary result action button with custom icon and event handler (`click:result-action`) - Custom result sorting via `resultSorting` property/attribute - Customizable layout and styling via CSS variables Usage examples and visual demos are available in Storybook stories, including scenarios for inline mode, external filtering, nested properties, card display, CSS variable customization, and result actions.
EOxJSONForm
`eox-jsonform` is a flexible and extensible web component for rendering dynamic forms based on JSON schema definitions. It is based on [JSON Editor](https://github.com/json-editor/json-editor) and extends its functionality to support various advanced features. Also check out the [JSON Editor documentation](https://github.com/json-editor/json-editor?tab=readme-ov-file#options) for more details on the available options and configurations. Features: - Renders forms from JSON schema, supporting complex nested structures and custom validation. - All properties and event handlers are passed via args, enabling dynamic configuration and integration. Properties can also be passed as stringified JSON attributes (e.g. `schema`, `value`, `options`). - Supports custom editor interfaces for advanced input types and external editor integration (e.g., Ace, Markdown, spatial drawtools). - Handles spatial inputs (bounding box, polygons, points, lines) and outputs in various formats (GeoJSON, WKT). - Allows toggling and opt-in/optional properties, with dynamic visibility and value updates. - Can load schema and values from external URLs, supporting async loading and ready events. - Integrates with `eox-map` for spatial feature selection when required. - Supports unstyled rendering for custom design integration. See the stories for usage examples covering validation, custom editors, spatial inputs, opt-in/optional properties, external loading, and more.
EOxLayerControl
The `eox-layercontrol` element provides a user interface for managing and configuring layers of an `eox-map`. It connects to the underlying OpenLayers map instance and displays a list of layers, supporting advanced features such as optional layers, exclusive layers, layer tools, dynamic legends, time controls, and external layer addition.
## Usage
Place `
EOxLayout
The `eox-layout` element provides a flexible grid-based layout system for web applications, based on a 12x12 grid. It consists of two elements:
- `eox-layout`: the container holding all layout items
- `eox-layout-item`: the individual items placed on the grid, with defined x/y coordinates and w(idth)/h(eight) dimensions
## Usage
Place `
EOxLayoutItem
No description available.
EOxMap
The `eox-map` element is a powerful wrapper around [OpenLayers](https://openlayers.org/) that provides a declarative, highly configurable map element for web applications. It supports a wide range of layer types, sources, controls, and advanced features, making it suitable for interactive mapping, data visualization, and geospatial analysis.
## Basic usage:
```
import "@eox/map"
EOxStacInfo
### Introduction
Working with STAC catalogs, collections and items often times requires
to fetch a JSON file, parse its contents and display some of its fields
in some formatted way. To make these steps reusable, the `eox-stacinfo`
element offers a set of functionalities:
- **automatically fetch a STAC file** as soon as the element loads
- offer a **property whitelist** functionality to choose which properties to display
- display the properties in **configurable sections** (header, body, featured, footer)
- allow to **override** any property display for application-specific custom needs
The use case for this element is alongside a map which displays STAC files
or in a catalog browsing scenario where a quick look at the most important properties
is needed.
#### Technology
Under the hood, this element uses [stac-fields](https://github.com/stac-utils/stac-fields) for parsing and pre-formatting properties.
#### Usage
Place `
EOxStoryTelling
The `eox-storytelling` element enables the creation of interactive, multimedia-rich stories using Markdown and custom sections. It supports advanced features such as slot-based content, remote Markdown loading, and custom initialization logic via events.
## Usage
Place `
EOxTimeControl
The `eox-timecontrol` element provides interactive time navigation for map layers, supporting animation, a simple time slider, timeline visualization, date picker, and custom date formatting.
## Basic usage:
```
import "@eox/timecontrol"
EOxTour
The `eox-tour` element uses [driver.js](https://driverjs.com/) to create interactive product tours.
It supports cross-iframe handoffs (start a tour in a "parent" and continue inside an iframe),
persistent "seen" state via `localStorage`, and styling based on EOxUI.
Features:
- Define a series of steps to guide users through an application.
- Highlight target elements and display customizable popovers.
- Cross-iframe handoff logic seamlessly transitioning between parent window and iframe (supports both a "simple mode" defined entirely in the parent config, and an "advanced mode" with individual configs in both frames).
- Persistent state tracking using `localStorage` to avoid repeatedly showing completed tours.
- Prevent automatic start on mount for manual control over when the tour begins.
The `eox-tour` element does not render any visible content itself; it operates entirely through the driver.js popovers and highlights.
Therefore it doesn't matter where in the DOM you place the `
EOxA2uiElement
No description available.
EOxA2uiWrapper
A wrapper custom element that accepts a2ui stream/messages data and renders the elements inside.