SAP-samples/ai-seamless-integration
A sample that embeds UI5 Web Components' AI patterns, the AI Button, AI Acknowledgment and AI Quick Prompt, inside an OpenUI5@openui5/sap.ui.coreThe OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.sap official, ui5 application written in TypeScript.
Combines classic OpenUI5 controls with UI5 Web Components inside one SAPUI5 view to show three AI interaction patterns: the AI Button, the AI Acknowledgment pattern and the AI Quick Prompt pattern. It runs as a TypeScript app built and served with npm, with source maps so the original TypeScript is debuggable in the browser.
Facts
Where it sits
Who is behind it
In the atlas: maintains 222@SAP-samplesmaintainerTodor StoyanovContributes to this
In the atlas: contributes to 4@Todor-ads1 contributor
What it declares
Every artifact
- Type
- Sample
- Origin
- By SAP
- Use as
- A reference
As a sample
- Form
- does not say
Connections
Using standards-based custom elements inside an app
Download
README
quoted from SAP-samples/ai-seamless-integration under Apache-2.0, readAI Seamless Integration Sample App
Description
This sample project demonstrates the seamless integration of UI5 Web Components into the OpenUI5 framework showing AI use cases. The goal is to showcase how modern UI5 Web Components can be used alongside classic OpenUI5 controls within a single application, enabling developers to take advantage of AI use cases as per design guidelines.
By using this sample, you can explore best practices for embedding UI5 Web Components in OpenUI5 views, handling interoperability, and leveraging the strengths of both frameworks. It demonstrates AI Button component, AI Acknowledgment Pattern & AI Quick Prompt Pattern.
Requirements
Either npm, yarn, or pnpm for dependency management.
Download and Installation
- Clone the project:
git clone https://github.com/SAP-samples/ai-integration.git
cd ai-integration
(or download from https://github.com/SAP-samples/ai-integration/archive/main.zip)
- Use npm (or any other package manager) to install the dependencies:
npm install
Run the App
Execute the following command to run the app locally for development in watch mode (the browser reloads the app automatically when there are changes in the source code):
npm start
As shown in the terminal after executing this command, the app is then running on http://localhost:8080/index.html.
A browser window with this URL should automatically open.
Debug the App
In the browser, you can directly debug the original TypeScript code, which is supplied via sourcemaps (need to be enabled in the browser's developer console if it does not work straight away).
If the browser doesn't automatically jump to the TypeScript code when setting breakpoints, use e.g. Ctrl/Cmd + P in Chrome to open the *.ts file you want to debug.
Known Issues
No known issues at this time.
How to obtain support
Create an issue in this repository if you find a bug or have questions about the content.
For additional support, ask a question in SAP Community.
Contributing
If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.
License
Copyright (c) 2025 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
Contributors
History in the atlas
- First seen.
For your agent
- Ref
artifact:sap-samples-ai-seamless-integration- JSON
- /artifacts/sap-samples-ai-seamless-integration.json
- MCP
- Connecting an agent