webcomponents-react-mcp-server — Claude Code MCP server: setup
Connects an AI agent to API references and guides for UI5 Web Components for React. Use it to inspect components or get help scaffolding an app from your IDE.
claude mcp add webcomponents-react-mcp-server -- npx -y @ui5/webcomponents-react-mcpWhat webcomponents-react-mcp-server does
The server lets an agent browse UI5 Web Components for React components and inspect their APIs, including prop types, event details, and ref methods. It can search guides and knowledge-base pages, and its create_app tool returns setup steps for Vite or Next.js projects. It also covers public library utilities and provides an llms.txt documentation index.
Run it locally with npx. The standard connection uses stdio; clients that need HTTP can start the server with --http. The HTTP listener binds to localhost, and documentation is read from files packaged with the server, so looking up those materials does not require a network request.
You can pin the server to the version used by @ui5/webcomponents-react. When that library is upgraded, update the pinned server version too; otherwise its API reference may describe a different release.
What it helps with
- find components by category or package
- inspect a component’s props, events, and ref methods
- look up guidance on styling or slots
- scaffold a Vite or Next.js application
Example prompts for the agent
- Find the available input components and show their import examples.
- Explain the props, events, and ref methods for
AnalyticalTable. - Set up a Vite app using UI5 Web Components for React.
How to install webcomponents-react-mcp-server
Platform CLI
claude mcp add webcomponents-react-mcp-server -- npx -y @ui5/webcomponents-react-mcpPlatform CLI
codex mcp add mcp-server -- npx -y @ui5/webcomponents-react-mcpConfig file
{
"mcpServers": {
"mcp-server": {
"command": "npx",
"args": [
"-y",
"@ui5/webcomponents-react-mcp"
]
}
}
}Config file
{
"servers": {
"mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ui5/webcomponents-react-mcp"
]
}
}
}Platform CLI
gemini mcp add mcp-server npx -y @ui5/webcomponents-react-mcpStep 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-react-mcp-server
How do I install webcomponents-react-mcp-server in Claude Code?
Run claude mcp add webcomponents-react-mcp-server -- npx -y @ui5/webcomponents-react-mcp. Then reload the Claude Code configuration to connect the server.
What does webcomponents-react-mcp-server do?
It gives an agent access to UI5 Web Components for React API references, guides, and public utility details. It can also provide steps for setting up an application.
How can I keep the server documentation aligned with my library version?
Pin the MCP server to the same version as @ui5/webcomponents-react. Update the pinned server version when you upgrade the library.
