How to Use the Fiori AI Prototyper — Step-by-Step Guide

What This Project Does

This project uses Claude Code (Anthropic's command-line AI coding tool) to generate fully working SAP Fiori / SAPUI5 prototype applications from a simple specification file. You describe what you want in a markdown file, and Claude Code builds the entire UI project for you.

The project contains two key files:

• CLAUDE.md — Instructions that tell Claude Code how to build Fiori apps (coding standards, patterns, project structure). Think of it as the "brain" that knows SAP Fiori development.
• PROTOTYPE_SPEC.md — A specification describing what app to build (fields, filters, mock data, actions, navigation). This is the file you customize for each new prototype.

---

Prerequisites

1. VS Code installed on your machine.
2. Claude Code extension installed in VS Code. You can install it from the VS Code marketplace by searching for "Claude Code" or install the CLI tool by running:

   npm install -g @anthropic-ai/claude-code
   

   (You'll need an Anthropic API key or a Claude Pro/Max subscription to use Claude Code.)
3. Node.js installed (for running a local server to preview your app).

---

Step-by-Step Instructions

Step 1: Create a New Project Folder

Open your terminal or VS Code and create a new empty folder for your project:

mkdir my-fiori-prototype
cd my-fiori-prototype

Open this folder in VS Code (code . from the terminal, or File → Open Folder).

Step 2: Add the Two Key Files

Copy CLAUDE.md and PROTOTYPE_SPEC.md into the root of your new project folder. Your folder should now look like this:

my-fiori-prototype/
├── CLAUDE.md
└── PROTOTYPE_SPEC.md

CLAUDE.md is a special file — Claude Code automatically reads any file named CLAUDE.md at the root of your project as persistent instructions. You don't need to reference it manually; it's picked up automatically every time Claude Code runs in that folder.

Step 3: Customize the Prototype Spec (Optional)

The included PROTOTYPE_SPEC.md is an example that generates a "Purchase Order Items — Goods Receipt" app. If you want a different app, edit PROTOTYPE_SPEC.md to describe your own application. Follow the same structure:

• Application Type — pick a Fiori floorplan (List Report, Worklist, Overview Page, etc.)
• Main Entity — the business object and its technical name
• Filters — what filter fields appear in the filter bar, their types and possible values
• Table Columns — the fields shown in the list/table
• Mock Data — sample records (aim for 5–10 rows of realistic data)
• Actions — buttons, dialogs, and confirmation flows
• Object Page — the detail view layout with sections and fields
• Application Title — what appears in the shell bar

If you're happy with the example, skip this step and just generate it as-is to see how it works.

Step 4: Launch Claude Code

Open the integrated terminal in VS Code (Terminal → New Terminal) and start Claude Code:

claude

This starts an interactive Claude Code session in your project directory. Claude Code will automatically detect and read the CLAUDE.md file.

Step 5: Ask Claude Code to Generate the App

Type a prompt like:

Generate the Fiori prototype based on the PROTOTYPE_SPEC.md file.

or simply:

Build the prototype.

Because CLAUDE.md contains the instruction "If a PROTOTYPE_SPEC.md file exists in the project root and it's not empty, use it as the specification," Claude Code will read your spec and generate the full project without asking additional questions.

Claude Code will create a webapp/ folder with all the necessary files:

webapp/
├── Component.js
├── manifest.json
├── index.html
├── i18n/
│   └── i18n.properties
├── model/
│   └── models.js
├── controller/
│   ├── App.controller.js
│   ├── List.controller.js
│   └── Detail.controller.js
├── view/
│   ├── App.view.xml
│   ├── List.view.xml
│   └── Detail.view.xml
└── fragment/
    └── CreateGRDialog.fragment.xml

Step 6: Preview the App Locally

Once generation is complete, serve the app with a simple static file server:

npx serve webapp/

This starts a local server (usually at http://localhost:3000). Open that URL in your browser and you should see your working Fiori prototype with the Horizon theme, filters, table, navigation, and dialogs — all fully functional with mock data.

Alternatively, you can open webapp/index.html directly in your browser, though some browsers may block local file loading.

Step 7: Iterate and Refine

If you want to make changes (add a column, change a filter, tweak a dialog), just tell Claude Code what to modify:

Add a "Quantity" column to the table and include quantity values in the mock data.

Change the date format to MM/DD/YYYY instead of DD.MM.YYYY.

Add a "Delete" button that shows a confirmation dialog before removing selected rows.

Claude Code will update only the affected files and keep everything else consistent.

Step 8: Deploy (Optional)

Since the project uses the SAPUI5 CDN (no build step required), you can deploy the webapp/ folder directly to any static hosting service:

• Vercel: Run npx vercel webapp/ or connect your repo and set the root directory to webapp.
• Netlify: Drag and drop the webapp/ folder into the Netlify dashboard.
• StackBlitz: Drag the webapp/ folder into StackBlitz for an instant online editor.
• GitHub Pages: Push the webapp/ folder and enable Pages in your repo settings.

---

Tips

• Start with the example first. Generate the included Purchase Order spec as-is before writing your own, so you understand what the output looks like and how the pieces fit together.
• Be specific in your spec. The more detail you put in PROTOTYPE_SPEC.md (exact field names, mock data values, dialog flows), the better the generated result.
• Use Value Help dialogs for dropdowns. The CLAUDE.md instructions prefer SelectDialog (F4-style) over simple Select dropdowns for a more authentic Fiori experience.
• Keep mock data realistic. Use real-looking IDs, names, dates, and amounts — not "Test 1", "Test 2". The instructions enforce this, but it helps to model it in your spec too.
• You don't need SAP knowledge to use this. The CLAUDE.md file contains all the Fiori patterns and best practices. You just describe what you want in business terms.

---

Troubleshooting

Problem	Solution
App shows a blank page	Open the browser console (F12) and check for errors. Usually a namespace mismatch between index.html, manifest.json, and Component.js. Ask Claude Code to fix it.
"Resource could not be loaded" error	The resourceroots JSON in index.html is likely malformed or multi-line. It must be a single line. Ask Claude Code to check index.html.
Table shows no data	This is expected — the table starts empty by design. Click the Go button to load data.
Filters don't work	Make sure you clicked Go after setting filter values. Filters are applied on the Go action, not live.
npx serve command not found	Install Node.js from nodejs.org, then try again.