Over the past two years, we have introduced AI capabilities across virtually every phase of SAPUI5 application development and beyond. What started with Joule in SAP Build Code has grown into a comprehensive set of tools, from AI-powered coding agents and MCP servers to Joule interacting with applications at runtime.

AI in the context of SAPUI5 touches different personas in different phases, and the best entry point depends on your role. Let us walk through what is available, organized by who benefits and when.

For the Developer: AI-Assisted UI5 Development

UI5 Plugins for Coding Agents

Agentic AI: MCP Server and Plugins for Coding Agents

Joule in SAP Build Code is one path. But many developers use external coding agents like Claude Code, GitHub Copilot, or others, as part of their daily workflow. Generic AI tools do not understand the specifics of SAPUI5: the class system, the module loader, the manifest structure, the linter rules. That is where the UI5 MCP Server and the UI5 Plugins for Coding Agents come in.

The UI5 Plugins for Coding Agents are an open-source collection of plugins, introduced for Claude Code, also available for GitHub Copilot. The plugin family currently includes these plugins:

• UI5 plugin, your general development companion: project scaffolding, API documentation, linting, best-practice guidelines, UI integration cards, OPA5 integration tests and UI5 tables, wrapping the UI5 MCP server
• UI5 TypeScript Conversion plugin, a step-by-step TypeScript migration with UI5-specific rules
• UI5 Modernization plugin, a five-phase autonomous workflow that modernizes a legacy SAPUI5 app to current best practices: replacing deprecated APIs, eliminating global namespaces, updating the manifest, and preparing for Content Security Policy compliance. What used to take weeks can now be accomplished in hours.

The UI5 MCP Server is an open-source Model Context Protocol server that gives any MCP-compatible AI agent deep SAPUI5 knowledge, which is official, correct and up to date. This provides UI5-specifics that generic tools consistently get wrong. The UI5 MCP server provides tools for:

• Creating UI5 apps by scaffolding new applications based on latest best practices,
• Fetching necessary data like current SAPUI5 version information, latest development best practices as well as the applicable UI5 API documentation,
• Running the UI5 linter to analyze and report issues your existing UI5 application code,
• Migrating apps to TypeScript by guiding the agent through a correct JavaScript-to-TypeScript conversion, and
• UI Integration Cards to scaffold and validate UI Integration Cards following official best practices.

The key design principle here is that these tools are agent-agnostic. The same SAPUI5 knowledge is available regardless of which coding agent you prefer. And they are open source: contributions welcome.

Agentic SAPUI5 development in SAP Build Code

Joule in SAP Build Code offers agentic development in SAP Business Application Studio (BAS) via the AI Chat, which leverages a configured provider (such as SAP AI Core, a third-party LLM provider, or GitHub Copilot). This uses the UI5 MCP Server to bring the mentioned UI5 qualities into your development flow.

Developing Apps with UI5 Web Components

The AI tooling story extends to UI5 Web Components as well. The UI5 Web Components MCP Server gives AI coding agents direct access to component APIs, framework integration guides for React, Angular, and vanilla JavaScript, and the full documentation corpus. Complementing the MCP server, three installable Agent Skills provide domain-specific best practices for styling, accessibility, and visual testing. Together, they ensure your AI assistant generates accurate UI5 Web Components code regardless of the framework you use.

Summarizing:

At Runtime: AI Meets the Running Application

Joule in UI Theme Designer

AI does not stop at the IDE. Several capabilities bring intelligence to the running application itself, whether it is an SAP Fiori app, an SAP GUI transaction, or via the UI theme designer.

Joule Frontend Actions

With Frontend Actions, Joule can interact directly with the application UI running in the user's browser or desktop client. Joule can execute scripted interactions, guide users step by step through a process, or read and summarize the current screen. This works across UI technologies, in SAPUI5, SAP GUI for HTML, and Web Dynpro.

The pattern is the same: an application exposes actions to Joule, and Joule orchestrates them in response to the user's natural-language request. A user might type “create a new product” and Joule navigates the transaction, fills fields, switches tabs, and confirms dialogs on the user's behalf.

SAPUI5 provides a unified API for registering custom actions with SAP Joule (planned feature). Generic actions (such as describeUI, describeUIElement, setFields, executeAction) are registered automatically. See the details in Joule Frontend Actions – Let SAP's AI Assistant Talk to Your Application UI in SAPUI5 and Beyond .

AI-Ready UI5 Web Components for Your Apps

If you are building AI capabilities into your own applications, the @ui5/webcomponents-ai package provides dedicated UI building blocks for AI interaction workflows. One example is the AI Prompt Input giving users a natural-language entry field with a submit action. Accompanying these components, the AI Patterns catalog defines interaction blueprints, from first-use acknowledgement dialogs and quick-prompt templates to guided prompts and regeneration loops, so you do not have to design the AI UX from scratch.

Theming with AI Support

Theming is a critical but often underestimated part of customizing enterprise apps. Two new capabilities bring AI to this space:

The UI Theme Designer plugin for coding agents gives AI assistants grounded knowledge of the SAP design system: design tokens, theme parameters, and how they map to SAPUI5 controls, SAP Build Work Zone, and SAP S/4HANA. Install it with a single command and your coding agent handles theming tasks with the precision of a theming expert.

Complementing this, Joule is now available directly inside the UI Theme Designer on SAP BTP. You can ask questions about custom theme creation, tool usage, and design concepts in natural language, without leaving the tool. Joule draws on the official documentation to deliver summarized answers and links to relevant help content.

Joule Work and the UI Foundation

Looking ahead, Joule Work represents a shift in how SAP redefines user experiences. Rather than building every UI as a separately coded screen, Joule Work is built on the Compositional Design System: A model where AI can compose user experiences at runtime using reusable components and shared design knowledge.

No matter what UI technology, proven enterprise-grade qualities are a must for solutions in an SAP context. This is still evolving, but the direction is clear: a consistent, scalable development foundation which follows AI-native UX concepts.

For Extensibility: AI-Supported Adaptation

Joule in SAPUI5 Adaptation Editor

SAPUI5 flexibility allows key users and developers to extend standard SAP Fiori applications in an upgrade-safe way, without modifying the original source code. Today, key users can rearrange, hide, or rename fields directly in the running app. Developers can go further in adaptation projects, extending the UI with custom code. We are planning to let Joule support both personas in their adaptation workflows:

For key users, the vision is to let your business describe desired UI changes in natural language (“move the delivery date field next to the order number” or “hide the internal reference section”) and let Joule translate that into the necessary changes in the system. This lowers the barrier to entry for users who are not familiar with the drag-and-drop adaptation mode and makes adaptations more discoverable.

Developers come into the game if these changes require custom code: Joule decides that an adaptation project is required and supports the next steps:

1. A handover prompt is generated, with which a developer can instruct Joule to create an adaptation project in a pro-code IDE,
2. existing key user changes are moved into that adaptation project to be carried forward in that project structure, and
3. Joule supports within the SAPUI5 Adaptation Editor to create developer adaptations based on the given prompt, e.g. by adding custom code, XML fragment or controller extensions.

Both capabilities are in active development: Joule enablement for key user adaptation and Developer adaptation: MCP support for fragment & controller extensions. See a preview in Agentic UI Extensibility: The Next Chapter of SAPUI5 Flexibility.

Where to Start

If you want to experience AI-powered SAPUI5 development firsthand, try the new tutorial “Agentic UI development with SAPUI5” , which covers the main aspects in a single session: creating a SAPUI5 app with AI, converting it to TypeScript, and modernizing a legacy app, all using the UI5 Plugins for your coding agents.

A quick overview of all entry points:

AI is not replacing what you know about SAPUI5. It is making that knowledge more productive, whether you are building a new app, modernizing an old one, or adapting a standard application. The tools are open source, the entry barrier is low, and the best way to form an opinion is to try them.
We are interested in your feedback via GitHub issues. Let us know what works, what does not, and what you would like to see next.

Source link