Interactive project scaffolding for UI5 applications and Integration Cards
Scaffolds UI5 projects with interactive setup for applications and Integration Cards.
/plugin marketplace add secondsky/sap-skills/plugin install sapui5@sap-skills{{#if type}} Creating {{type}} project{{#if lang}} in {{lang}}{{/if}}{{#if backend}} with {{backend}} backend{{/if}}... {{else}} Starting interactive project scaffolding... {{/if}}
I'll invoke the ui5-app-scaffolder agent to create your UI5 project.
The agent will:
sapui5.local.md (if available){{#if type}} Parameters provided:
{{type}}
{{#if lang}}- Language: {{lang}}{{/if}}
{{#if backend}}- Backend: {{backend}}{{/if}}
{{#if name}}- Name: {{name}}{{/if}}The agent will use these as defaults and may ask for additional details. {{else}} No parameters provided - The agent will guide you through an interactive setup. {{/if}}
Invoking ui5-app-scaffolder agent...
Agent will scaffold your project and provide complete setup instructions.
If the agent cannot be invoked, you can use these manual commands:
# Install MCP server globally
npm install -g @ui5/mcp-server
# Create freestyle JavaScript app
npx @ui5/mcp-server create_ui5_app \
--template="freestyle-js" \
--projectName="my-ui5-app" \
--namespace="com.mycompany.myapp"
# Create Fiori Elements TypeScript app
npx @ui5/mcp-server create_ui5_app \
--template="fiori-elements-list-report-ts" \
--projectName="my-fiori-app" \
--namespace="com.mycompany.fiori" \
--enableCAP=true
# Install Yeoman and Easy-UI5 generator
npm install -g yo generator-easy-ui5
# Interactive scaffolding
yo easy-ui5
# Install Fiori Tools globally
npm install -g @sap/generator-fiori
# Create project
yo @sap/fiori
Freestyle Applications:
freestyle-js - JavaScript freestyle appfreestyle-ts - TypeScript freestyle appFiori Elements:
fiori-elements-list-report - List Report (most common)fiori-elements-object-page - Object Pagefiori-elements-analytical-list-page - Analytical List Pagefiori-elements-overview-page - Overview Pagefiori-elements-worklist - WorklistIntegration Cards:
integration-card-list - List Cardintegration-card-table - Table Cardintegration-card-object - Object Cardintegration-card-timeline - Timeline Cardintegration-card-analytical - Analytical CardCAP Full-Stack:
cap-full-stack-js - CAP backend + UI5 frontend (JavaScript)cap-full-stack-ts - CAP backend + UI5 frontend (TypeScript)/ui5-scaffold --type=freestyle --lang=typescript --name=product-catalog
Creates:
product-catalog/
├── webapp/
│ ├── controller/
│ │ └── App.controller.ts
│ ├── view/
│ │ └── App.view.xml
│ ├── Component.ts
│ ├── manifest.json
│ └── index.html
├── ui5.yaml
├── package.json
└── tsconfig.json
/ui5-scaffold --type=fiori-elements --backend=cap --name=orders-app
Creates full-stack application with:
/ui5-scaffold --type=integration-card --name=sales-dashboard
Creates standalone Integration Card for Work Zone or launchpad.
Once your project is created, follow these steps:
cd {{name}}
npm install
npm start
# or
ui5 serve --port 8080
http://localhost:8080
webapp/view/webapp/controller/webapp/i18n/i18n.propertieswebapp/css/style.cssnpm run build
# Output in dist/
After scaffolding, use these commands:
/ui5-api sap.m.TableHappy coding! 🚀