UI5 MCP Server Development Assistant
Leverage the UI5 Model Context Protocol (MCP) server to streamline UI5 application development with AI-assisted scaffolding, linting, API documentation access, and best practices guidance.
What This Skill Does
This skill enables AI agents to assist developers working with UI5 (OpenUI5/SAPUI5) applications by providing direct access to the `@ui5/mcp-server` tools. The agent can scaffold new projects, analyze code for issues, fetch API documentation, retrieve development guidelines, validate manifests, and provide TypeScript conversion guidance.
Prerequisites
The user must have the UI5 MCP server configured in their MCP client. Standard configuration:
```json
{
"mcpServers": {
"@ui5/mcp-server": {
"type": "stdio",
"command": "npx",
"args": ["@ui5/mcp-server"]
}
}
}
```
Instructions for AI Agent
1. Project Creation
When the user wants to create a new UI5 application:
Use the `create_ui5_app` tool from the UI5 MCP serverAsk the user for required parameters: project name, template preference, namespaceCommon templates include standard UI5 applications, Fiori elements, and TypeScript variantsThe tool will scaffold a complete project structure with configuration files2. Code Analysis and Linting
When the user asks to check for UI5-specific issues or wants code quality analysis:
Use the `run_ui5_linter` tool to analyze UI5 projectsThis integrates with `@ui5/linter` to detect UI5-specific problemsReport findings clearly, categorizing by severity (error, warning, info)Suggest fixes based on the linter output3. API Reference Lookup
When the user needs information about UI5 APIs, classes, or methods:
Use the `get_api_reference` tool with the specific UI5 API symbolExamples: `sap.ui.core.Control`, `sap.m.Button`, `sap.ui.model.json.JSONModel`Present the formatted documentation including parameters, return types, and examplesCross-reference related APIs when relevant4. Development Guidelines
When the user asks about UI5 best practices, coding standards, or development patterns:
Use the `get_guidelines` tool to retrieve official UI5 development guidelinesTopics may include: naming conventions, project structure, performance optimization, accessibilityAlways reference the latest official guidelines from the MCP serverProvide concrete examples that align with the guidelines5. Project Information
When analyzing an existing UI5 project:
Use the `get_project_info` tool to extract metadata and configurationThis reveals the project structure, dependencies, UI5 version, and build configurationUse this information to provide context-aware suggestions6. Version Information
When the user needs to know about UI5 framework versions:
Use the `get_version_info` tool to retrieve current UI5 version informationHelp the user understand version compatibility and migration paths7. TypeScript Conversion
When the user wants to convert a JavaScript UI5 project to TypeScript:
Use the `get_typescript_conversion_guidelines` toolProvide step-by-step conversion guidanceHighlight common pitfalls and type definition requirements for UI5 controls8. Integration Cards
When working with UI Integration Cards:
Use `get_integration_cards_guidelines` for best practicesUse `create_integration_card` to scaffold new Integration CardsProvide guidance on card types, data binding, and configuration9. Manifest Validation
When the user needs to validate a UI5 manifest file:
Use the `run_manifest_validation` toolReport validation errors against the UI5 Manifest schemaSuggest corrections for invalid configurationsWorkflow Example
**User:** "Create a new UI5 app called 'my-dashboard' with TypeScript"
**Agent Actions:**
1. Use `create_ui5_app` with TypeScript template
2. After creation, use `get_project_info` to confirm setup
3. Suggest next steps: install dependencies, run development server
**User:** "Check my UI5 code for issues"
**Agent Actions:**
1. Use `run_ui5_linter` on the project
2. Parse and present findings by severity
3. For each issue, use `get_guidelines` if clarification is needed
4. Suggest specific code fixes
**User:** "How do I use sap.m.Table?"
**Agent Actions:**
1. Use `get_api_reference` with `sap.m.Table`
2. Present documentation including properties, events, and aggregations
3. Provide a code example if applicable
Important Notes
Always use the MCP server tools rather than guessing or relying on outdated informationThe `get_guidelines` tool provides the most current best practicesWhen scaffolding projects, respect domain restrictions (default allows localhost and services.odata.org for OData services)For linting, ensure the project has a valid UI5 structure with proper configuration filesAPI references are cached locally in the `.ui5` directory for performanceConfiguration Considerations
If the user reports issues with the MCP server:
Verify the server is properly configured in their MCP client settingsCheck that Node.js version is v20.17.0, v22.9.0 or higherReview environment variables if custom configuration is needed: - `UI5_MCP_SERVER_ALLOWED_ODATA_DOMAINS` for OData service restrictions
- `UI5_LOG_LVL` for debugging (default: `info`)
- `UI5_DATA_DIR` for custom cache location
Success Criteria
Projects are scaffolded correctly with proper UI5 structureLinting identifies real issues and suggestions are actionableAPI documentation is accurate and helpfulGuidelines provided match official UI5 standardsUser can successfully develop, debug, and optimize UI5 applications with AI assistance