UI5 Web Components

Claude Code

1. Ejecútalo en un terminal, en la carpeta de tu proyecto:

claude mcp add --transport stdio ui5-web-components -- npx -y @ui5/webcomponents-mcp-server

1. Inicia Claude Code y escribe /mcp. ui5-web-components debería aparecer como conectado.

Añade --scope user para que esté disponible en todos los proyectos.

Claude Desktop

1. Abre Settings → Developer → Edit Config. Se abre claude_desktop_config.json. Añade:

{
  "mcpServers": {
    "ui5-web-components": {
      "command": "npx",
      "args": [
        "-y",
        "@ui5/webcomponents-mcp-server"
      ]
    }
  }
}

1. Guarda el archivo y reinicia Claude Desktop.

Necesita Node.js en tu equipo. El archivo está en ~/Library/Application Support/Claude/ en macOS y en %APPDATA%\Claude\ en Windows.

Cursor

Añadir a Cursor (se abre en una pestaña nueva)

O añádelo a mano en ~/.cursor/mcp.json (todos los proyectos) o en .cursor/mcp.json (este proyecto):

{
  "mcpServers": {
    "ui5-web-components": {
      "command": "npx",
      "args": [
        "-y",
        "@ui5/webcomponents-mcp-server"
      ]
    }
  }
}

Necesita Node.js en tu equipo.

VS Code

Instalar en VS Code (se abre en una pestaña nueva)

O desde un terminal:

code --add-mcp '{"name":"ui5-web-components","type":"stdio","command":"npx","args":["-y","@ui5/webcomponents-mcp-server"]}'

O haz commit en el repositorio en .vscode/mcp.json:

{
  "servers": {
    "ui5-web-components": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@ui5/webcomponents-mcp-server"
      ]
    }
  }
}

Necesita Node.js en tu equipo.

Devin Desktop

1. Añádelo a ~/.config/devin/mcp_config.json (macOS y Linux) o a %APPDATA%\devin\mcp_config.json (Windows):

{
  "mcpServers": {
    "ui5-web-components": {
      "command": "npx",
      "args": [
        "-y",
        "@ui5/webcomponents-mcp-server"
      ]
    }
  }
}

1. Actualiza la lista de servidores MCP en Cascade.

Devin Desktop es el nuevo nombre de Windsurf.

Codex

codex mcp add ui5-web-components -- npx -y @ui5/webcomponents-mcp-server

O edita directamente ~/.codex/config.toml:

[mcp_servers.ui5-web-components]
command = "npx"
args = ["-y", "@ui5/webcomponents-mcp-server"]

Necesita Node.js en tu equipo.

Gemini CLI

gemini mcp add ui5-web-components npx -- -y @ui5/webcomponents-mcp-server

Así lo añades al proyecto actual. Añade -s user para usarlo en todas partes.

Cualquier cliente

La mayoría de los clientes que inician servidores locales aceptan esta forma:

{
  "mcpServers": {
    "ui5-web-components": {
      "command": "npx",
      "args": [
        "-y",
        "@ui5/webcomponents-mcp-server"
      ]
    }
  }
}

Zed pone los servidores bajo context_servers en sus ajustes, con los mismos campos command, args y env.

Necesita Node.js en tu equipo.

Insignia para README

[![UI5 Web Components on mcp.tc](https://mcp.tc/i/ui5-web-components/badge.svg)](https://mcp.tc/i/ui5-web-components)

<a href="https://mcp.tc/i/ui5-web-components"><img src="https://mcp.tc/i/ui5-web-components/badge.svg" alt="UI5 Web Components on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

<script src="https://mcp.tc/w/ui5-web-components.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

<iframe src="https://mcp.tc/embed/ui5-web-components" title="UI5 Web Components on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, comando de instalación, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/ui5-web-components.json

Qué significa cada campo