# webcomponents-mcp-server

An MCP server that feeds UI5 Web Components docs into your AI assistant. It helps when you build with React, Angular or plain JavaScript and want the API without digging through a browser.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 20
- Author: UI5
- License: Apache-2.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/UI5/webcomponents-mcp-server
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/mcp/webcomponents-mcp-server

## What it does

The server plugs into any MCP client and exposes four tools. `get_component_api` returns the API of a given component: properties, slots, events, methods. It searches across `@ui5/webcomponents`, `@ui5/webcomponents-fiori` and `@ui5/webcomponents-ai`. `get_guidelines` hands back integration guides for React, Angular or native JavaScript, covering setup and imports. `list_docs` enumerates every documentation file with a short summary, and `get_doc` pulls the full text of one file.

You need Node.js v20.17.0, v22.9.0 or newer, plus npm v8.0.0+. Since the server runs through `npx`, there is no package to install beforehand — the command fetches a fresh copy on first run. On native Windows, outside WSL, prefix `npx` with `cmd /c`.

The agent does not browse for docs at runtime. The server ships its own copy, refreshed via `npm run prepare:docs`. If the upstream UI5 repo changes, your local docs go stale until you rebuild.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add webcomponents-mcp-server -- npx -y @ui5/webcomponents-mcp-server
```

### Codex

**Platform CLI**
```bash
codex mcp add webcomponents-mcp-server -- npx -y @ui5/webcomponents-mcp-server
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "webcomponents-mcp-server": {
            "command": "npx",
            "args": [
                "-y",
                "@ui5/webcomponents-mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "webcomponents-mcp-server": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@ui5/webcomponents-mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add webcomponents-mcp-server npx -y @ui5/webcomponents-mcp-server
```

## When to use it
- pull the API of a component like ui5-button into the chat
- get React or Angular integration guides for UI5 Web Components
- list all documentation files with summaries
- fetch the full text of one documentation file
- skip manual browser lookups for props and events

## Example prompts
- Show me the API of the `ui5-button` component.
- How do I use UI5 Web Components in a React project?
- What theming docs are available?

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md