Hands-on | Agentic app development with common AI clients and SAP’s MCP servers

Description

This repository contains the material for the SAP Fiori Innovation Day Hands-on | Agentic app development with common AI clients and SAP’s MCP servers.

---

Overview

In this hands-on tutorial you will work through a set of exercises that highlight the benefits and capabilities of the MCP servers developed by SAP to create and modify SAP Fiori applications with the help of AI coding assistants.

You will gain comprehensive knowledge of AI assisted full-stack development, and learn how to use AI Clients to kickstart your SAP Fiori elements agentic application development.

Using AI during Agentic app Development

We are using Cline as AI client within SBAS and Anthropic claude-4-sonnet LLM (Large Language Model) throughout the exercises. When developing SAP Fiori applications with LLMs, you may encounter situations where a prompt is not executed as intended, or technical errors occur when calling MCP server tools. Knowing how to approach these issues systematically can save time and prevent disruption. Cline and the choosen LLM are powerful assistants for problem resolution.

General steps in case of issues:

Detailed steps and examples of resolving common issues

1. Verify connectivity:

   • Check if your machine has network access.
   • Confirm that the MCP server is up and running.

2. Approach errors systematically

   • Pause before panicking
     • Use natural pauses when the client asks for approval to inspect the current results and chat history.
     • Stop execution with the "Cancel" button. You can always proceed from there with a new prompt
   • Identify the source: Check if the issue is:
     • CDS compiler error
     • SQLite/database error
     • Console/browser runtime error

3. Using the LLM to solve an issue

   • The LLM occasionally makes mistakes, or forgets required steps leading to error situations
   • But the LLM can read the terminal output and react to API reponses, and correct error visible there
   • Other issues, like from browser console output, can be resolved by copy-pasting the full error message into the chat and ask for a fix in a prompt
   • LLM works best when exact messages are provided rather than manual descriptions.

4. Use Restore Points if Needed

   • If a solution strategy does not work, you can always restore the files and chat to a previous checkpoint using Cline’s restore functionality.

5. Don’t be afraid to retry an exercise or step after restoring to a checkpoint.

Exercises

Begin your exercises here. At the end of each section, there is a link to continue to the next section.

• Getting Started - Setting up your AI Development Environment

• Exercise 1 - Create CAP Project and Fiori List Report App based on Image

  • Exercise 1.1 Enable automatic data loading in List Report
  • Exercise 1.2 Add new column destination to list report table
  • Exercise 1.3 Add Analytical chart to list report page

• Exercise 2 - Modify travel object page based on Image

  • Exercise 2.1 Add Custom Section with RichTextEditor Building Block