The chat responses are generated using Generative AI technology for intuitive search and may not be entirely accurate. They are not intended as professional advice. For full details, including our use rights, privacy practices and potential export control restrictions, please refer to our Generative AI Service Terms of Use and Generative AI Service Privacy Information. As this is a test version, please let us know if something irritating comes up. Like you get recommended a chocolate fudge ice cream instead of an energy managing application. If that occurs, please use the feedback button in our contact form!
Skip to content
Siemens Xcelerator Marketplace

Siemens Element MCP Server

The Siemens Element MCP server provides AI assistants and agents with access to the Siemens Element design system and component API documentation through Retrieval-Augmented Generation (RAG). This enables more accurate and relevant assistance when working with Element components and the Smart Infrastructure design system.

Siemens Element

Overview

  • Local MCP server that ships with all Element design system documentation, component APIs, examples, and icon information
  • Integrates with your IDE and AI agent setup (VS Code / GitHub Copilot, Cline, Zed, and others)
  • Use cases include:
    • Get design system best practice information
    • Generate or modify pages using Element components
    • Export components to your project
    • Review project text according to UX writing guidelines
    • Find icons related to a topic

Prerequisites

  • Node.js 20+
  • An LLM token from my.siemens.com with the llm scope (used for embedding generation)
  • An IDE or agent setup of your choice (VS Code with GitHub Copilot, Cline, Zed, etc.)

Installation

The MCP package version must match your @siemens/element-ng version. Use the npm distribution tag @element<version> to always get the latest compatible MCP package for your Element version.

Project installation

npm install --save-dev --save-exact @siemens/element-mcp@element48.2.0

# Or with yarn
yarn add -D --exact @siemens/element-mcp@element48.2.0

Global installation

npm install -g @siemens/element-mcp@element48.2.0

Quick Start

  1. Navigate to your project directory and run the initial setup:

    npx @siemens/element-mcp init

    If your token is already configured, use:

    npx @siemens/element-mcp setup

    Note

    Run this command in the root of every project where you want to use the MCP server.

  2. Follow the prompts to enter your LLM token and choose which tools to configure.

  3. Restart your AI tool and start prompting:

    • "How do I use the Filtered-Search component from @siemens/element-ng?"
    • "Show me examples of @siemens/charts-ng usage"
    • "Implement a dashboard with different widgets"
    • "Find icons related to AI or machine learning"
    • "Review the texts of this project"

Further Reading

Contact us