# UI5 Web Components MCP server

> Look up UI5 Web Components API docs and integration guides for React, Angular and plain JavaScript from your assistant.

- Listing: https://mcp.tc/i/ui5-web-components
- Connect: this is a local (stdio) server; install it on your machine (see Install). The listing link is a page, not an MCP endpoint.
- Type: local (stdio)
- Auth: no API key needed
- Category: [Docs & Knowledge](https://mcp.tc/c/docs-knowledge)
- Vendor: UI5 (SAP)
- Repository: <https://github.com/UI5/webcomponents-mcp-server>
- Package: npm `@ui5/webcomponents-mcp-server`

## About

Gives an AI assistant access to documentation for the UI5 Web Components framework. It can fetch the API of a component (properties, slots, events, methods) from the @ui5/webcomponents, @ui5/webcomponents-fiori and @ui5/webcomponents-ai packages, return integration guides, and list or read the documentation files.

Runs locally over stdio through npx using the @ui5/webcomponents-mcp-server npm package. It needs Node.js v20.17.0, v22.9.0 or higher and npm v8 or higher. No sign-in or API key is required.

## What it can do

- Fetch API docs for a UI5 component: properties, slots, events, methods
- Search across the base, fiori and ai component packages
- Get integration guides for React, Angular or native JavaScript
- List available UI5 Web Components documentation with summaries
- Read the full content of a specific documentation file

## Example prompts

- "Show me the API for ui5-button"
- "How do I use UI5 Web Components with React?"
- "Show me the available documentation"
- "Get the theming documentation"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

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

2. Start Claude Code and type `/mcp`. **ui5-web-components** should show as connected.

Add `--scope user` to make it available in every project.

### Claude Desktop

1. Open **Settings → Developer → Edit Config**. It opens `claude_desktop_config.json`. Add:

`claude_desktop_config.json`:

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

2. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in `~/Library/Application Support/Claude/` on macOS and `%APPDATA%\Claude\` on Windows.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=ui5-web-components&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkB1aTUvd2ViY29tcG9uZW50cy1tY3Atc2VydmVyIl19>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

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

Needs Node.js on your computer.

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=ui5-web-components&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40ui5%2Fwebcomponents-mcp-server%22%5D%7D>) (opens VS Code)

Or from a terminal:

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

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

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

Needs Node.js on your computer.

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

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

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

### Codex

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

Or edit `~/.codex/config.toml` directly:

`config.toml`:

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

Needs Node.js on your computer.

### Gemini CLI

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

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients that start local servers accept this shape:

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

Zed puts servers under `context_servers` in its settings, with the same `command`, `args` and `env` fields.

Needs Node.js on your computer.

## Details

- Server version: 0.1.2
- Last checked: 2026-10-04
- Listed: 2026-10-04
- Updated: 2026-10-04

---
Source: https://mcp.tc/i/ui5-web-components (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report