Webcomponents React Mcp Server

ui5/webcomponents-react

Brings SAP's Fiori design system to Claude through the UI5 Web Components for React library. You get documentation lookup, component API references, and implementation guidance for building React apps with enterprise UI patterns. Useful when you're wiring up Tables, Buttons, Dialogs, or any of the 100+ Fiori components and need prop signatures, event handlers, or styling conventions without leaving your conversation. The server wraps the official UI5 documentation, so you're getting the same API details you'd find at ui5.github.io but surfaced inline as you code. Covers the main package plus charts, base utilities, and the newer AI components package.

GitHub stars: 542
tools: 5
transport: STDIO, HTTP
last updated: Oct 27, 2026

View on GitHub

Install

From registry metadata

$ npx add-mcp @ui5/webcomponents-react-mcp --name webcomponents-react

Run in your terminal. add-mcp asks which agents to add it to (Claude Code, Codex, Cursor and more). Add -g to install it for every project.

Review the command, arguments and environment values before installing. MCP servers run with your local permissions.

Other ways

Claude Code

$ claude mcp add webcomponents-react -- npx -y @ui5/webcomponents-react-mcp

Run in your terminal. Replace YOUR_* placeholders with real values; add --scope user to install for every project.

Tools

Verified live · 5 tools

Verified live against the running server on Jun 11, 2026.

create_appGet scaffolding instructions for a new UI5 Web Components for React application from an official template. WHEN TO USE: The user wants to create a new app, project, or starter using UI5 Web Components for React. WORKFLOW: Call this tool to get the template setup instructions,...2 params

Get scaffolding instructions for a new UI5 Web Components for React application from an official template. WHEN TO USE: The user wants to create a new app, project, or starter using UI5 Web Components for React. WORKFLOW: Call this tool to get the template setup instructions,...

Parameters* required

appName*string

Name for the new application directory

template*string

Template to use. Available: nextjs-app, nextjs-pages, vite-tsone of nextjs-app · nextjs-pages · vite-ts

get_component_apiGet comprehensive API documentation for a UI5 Web Components React component including props, ref methods, types, event detail parameters, and CSS parts for shadow DOM styling. WHEN TO USE: You need exact prop names, types, default values, method signatures, event detail field...1 params

Get comprehensive API documentation for a UI5 Web Components React component including props, ref methods, types, event detail parameters, and CSS parts for shadow DOM styling. WHEN TO USE: You need exact prop names, types, default values, method signatures, event detail field...

Parameters* required

componentName*string

Component name (e.g., "Button", "AnalyticalTable"). Case-insensitive. Must match a component from @ui5/webcomponents-react, @ui5/webcomponents-react-charts, or @ui5/webcomponents-ai-react.

get_documentationRetrieve UI5 Web Components for React documentation, guides, and knowledge base articles. Documentation is bundled locally for instant offline access. WHEN TO USE: You need guidance on how to use the library — setup, styling, event handling, SSR, slots, i18n. DO NOT USE FOR: L...5 params

Retrieve UI5 Web Components for React documentation, guides, and knowledge base articles. Documentation is bundled locally for instant offline access. WHEN TO USE: You need guidance on how to use the library — setup, styling, event handling, SSR, slots, i18n. DO NOT USE FOR: L...

Parameters* required

endLineinteger

End line number (1-based, inclusive) for reading a portion of the documentation. Requires fetchContent: true. If omitted with startLine, reads to end of file.

fetchContentboolean

Whether to include the full documentation markdown content. Set to true to retrieve full documentation text in addition to metadata. Content is read from bundled local files (no network required)....default: false

querystring

Free-form search query to find relevant documentation. Searches across section names, descriptions, tags, and content topics. Examples: "styling", "migration", "i18n", "ssr", "slots", "forms". Use...

sectionstring

Specific documentation section to retrieve by exact name. Use this for direct access when you know which section you need. Examples: "Getting Started", "Migration Guide", "Knowledge Base > Styling"...one of

Getting Started · Project Templates & Examples · Knowledge Base > Bring Your Own Web Components · Knowledge Base > Common CSS · Knowledge Base > FAQ · Knowledge Base > Handling Slots

startLineinteger

Start line number (1-based, inclusive) for reading a portion of the documentation. Requires fetchContent: true. Useful for large documents like the Change Log or Migration Guide.

get_public_utilsGet documentation for public utilities and hooks from @ui5/webcomponents-react-base. Covers Device API, ThemingParameters, useI18nBundle, useViewportRange, and withWebComponent. WHEN TO USE: You need to use device detection, theme-aware CSS variables in JS, internationalizatio...1 params

Get documentation for public utilities and hooks from @ui5/webcomponents-react-base. Covers Device API, ThemingParameters, useI18nBundle, useViewportRange, and withWebComponent. WHEN TO USE: You need to use device detection, theme-aware CSS variables in JS, internationalizatio...

Parameters* required

namestring

Specific utility/hook name. Omit to see all available utilities.one of Device · ThemingParameters · useI18nBundle · useViewportRange · withWebComponent

list_componentsBrowse all 209 available UI5 Web Components for React components across 4 packages with descriptions, categories, and import statements. WHEN TO USE: You need to discover which components exist, find the right component for a use case, or verify a component name before calling...2 params

Browse all 209 available UI5 Web Components for React components across 4 packages with descriptions, categories, and import statements. WHEN TO USE: You need to discover which components exist, find the right component for a use case, or verify a component name before calling...

Parameters* required

categorystring

Filter components by category. Omit to show all categories.one of Data Display · Layouts & Floorplans · Inputs · Modals & Popovers · User Feedback · Charts

packagestring

Filter components by npm package name. Omit to show all packages.one of @ui5/webcomponents-react · @ui5/webcomponents-react-charts · @ui5/webcomponents-ai-react