webcomponents-react-mcp-server

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, then execute them. Available templates: - `nextjs-app` — Next.js (App Router) - `nextjs-pages` — Next.js (Pages Router) - `vite-ts` — Vite.js - `preact-vite-ts` — Preact (Vite.js) - `preact-ssr-ts` — Preact (Vite.js + SSR) EXAMPLE INPUT: { "template": "vite-ts", "appName": "my-app" } EXAMPLE INPUT: { "template": "nextjs-app", "appName": "my-dashboard" }

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 fields, or CSS part selectors for a specific component. DO NOT USE FOR: General guidance on styling, events, or architecture — use get_documentation instead. To discover component names — use list_components first. WORKFLOW: Use list_components to find the correct component name, then this tool for full API details. LIMITS: Returns data for one component per call. Returns all props and methods for that component. EXAMPLE INPUT: { "componentName": "Dialog" } **Output Format (JSON):** ```typescript { package: string, // NPM package name description: string, // Full JSDoc description with @tags, examples, notes props: { [propName: string]: { type: { name: string, // Type category (e.g., "string", "boolean", "enum") raw?: string, // Full TypeScript type string value?: Array<{ // For enums: possible values with descriptions value: string, description?: string }> }, required: boolean, // Whether prop is required defaultValue: any, // Default value if specified description: string, // Full prop description with notes eventDetail?: { // Present on event handler props (web components only) params: Array<{ // Fields available on e.detail name: string, // e.g., "targetRef", "escPressed", "item" type: string, // e.g., "HTMLElement", "boolean" description: string // What this detail field contains }>, cancelable: boolean, // true = e.preventDefault() prevents the action bubbles: boolean // true = event bubbles through DOM } } }, methods: Array<{ // Imperative handle methods (access via ref.current.methodName()) name: string, description: string, params: Array<{ name: string, description: string, type: any }>, returns: any }>, cssParts?: Array<{ // CSS ::part() selectors for shadow DOM styling (web components only) name: string, // Use as: componentSelector::part(name) { ... } description: string }>, isAbstract?: boolean, // true = abstract component: renders into its PARENT's DOM, not its own shadow root. For testing, target the node from getDomRef() (parent-owned), not the host placeholder. See the "Testing" knowledge-base section (get_documentation). subTypeDocs?: string // Markdown docs for complex prop types (e.g. column definition properties) docUrl?: string // Upstream docs link for complex behavioral concepts } ``` **Note:** Generic HTML attributes (className, style, onClick, etc.) are filtered out but available via CommonProps. Ref methods are accessed via `componentRef.current.methodName()`. Event detail fields (eventDetail.params) tell you what's on `e.detail` — access via `e.detail.paramName`.

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: Looking up specific component props or methods — use get_component_api instead. For public utilities/hooks from @ui5/webcomponents-react-base — use get_public_utils. WORKFLOW: Call without parameters to see all available sections. Use section parameter for direct access, query for search. LIMITS: When fetchContent is true, full content is returned for at most 3 matching sections to control output size. EXAMPLE INPUT: { "section": "Knowledge Base > Styling", "fetchContent": true } EXAMPLE INPUT: { "query": "i18n", "fetchContent": true } EXAMPLE INPUT: {} (returns catalog of all documentation sections)

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, internationalization hooks, responsive breakpoints, or wrap your own custom web components. DO NOT USE FOR: Looking up component props — use get_component_api. For general styling guidance — use get_documentation with section "Knowledge Base > Styling". LIMITS: Returns documentation for one utility per call, or an overview of all 5 utilities. EXAMPLE INPUT: { "name": "ThemingParameters" } EXAMPLE INPUT: { "name": "withWebComponent" } EXAMPLE INPUT: {} (returns overview of all utilities)

Browse all 217 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 get_component_api. DO NOT USE FOR: Getting detailed props or methods — use get_component_api after finding the component name here. LIMITS: Returns all matching components at once (up to 217). Filter by category or package to reduce output size. EXAMPLE INPUT: { "category": "Inputs" } EXAMPLE INPUT: { "package": "@ui5/webcomponents-react-charts" } EXAMPLE INPUT: {} (returns all components)