webcomponents-mcp-server — Claude Code MCP server for UI5 component API
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.
claude mcp add webcomponents-mcp-server -- npx -y @ui5/webcomponents-mcp-serverWhat webcomponents-mcp-server 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.
What it helps with
- 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 for the agent
- Show me the API of the
ui5-buttoncomponent. - How do I use UI5 Web Components in a React project?
- What theming docs are available?
How to install webcomponents-mcp-server
Platform CLI
claude mcp add webcomponents-mcp-server -- npx -y @ui5/webcomponents-mcp-serverPlatform CLI
codex mcp add webcomponents-mcp-server -- npx -y @ui5/webcomponents-mcp-serverConfig file
{
"mcpServers": {
"webcomponents-mcp-server": {
"command": "npx",
"args": [
"-y",
"@ui5/webcomponents-mcp-server"
]
}
}
}Config file
{
"servers": {
"webcomponents-mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ui5/webcomponents-mcp-server"
]
}
}
}Platform CLI
gemini mcp add webcomponents-mcp-server npx -y @ui5/webcomponents-mcp-serverStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about webcomponents-mcp-server
How do I install webcomponents-mcp-server in Claude Code?
Run claude mcp add webcomponents-mcp-server -- npx -y @ui5/webcomponents-mcp-server. The server starts via npx the next time Claude Code launches.
What does webcomponents-mcp-server do?
It gives your AI assistant access to UI5 Web Components docs: component APIs, integration guides for React, Angular and JavaScript, a list of doc files, and full file contents.
What do I need to run it?
Node.js v20.17.0, v22.9.0 or newer and npm v8.0.0+. On native Windows without WSL, wrap npx in cmd /c.
