AI-assisted page creation

Preparing a session context file

Create a SESSION_CONTEXT.md file in the workspace root. This file serves as persistent memory between AI sessions and should contain the following information:

• Paths and commands — workspace path, WinCC OA project path, build command (including the OUT_DIR variable), and language settings (LANG:0, LANG:1).
• Technical rules — constraints the AI cannot know without being told. Examples: ix-icon sizes are limited to 12, 16, 24, and 32; datapoint names in the browser require the System1: prefix while server-side scripts omit it; DPL files must use ISO-8859-1 encoding with CRLF line endings.
• Datapoint inventory — list the datapoints the project uses, including their units and value ranges.
• Completed work — a running log of pages created and bugs fixed, so the AI understands what already exists.

Update SESSION_CONTEXT.md at the end of every session. You can ask the AI itself to update the file with new findings.

Prompt examples

The following prompt templates cover the most common WebUI Runtime development tasks. Copy and adapt them to your project.

Create a new standalone page

Create a new standalone page "Building Monitor" (building-monitor.ts).
The page must:
- Display 4 datapoints: Gebaude.Temp, Gebaude.Feuchte, Gebaude.CO2, Gebaude.Energie
- Use a 2x2 grid layout with KPI cards
- Color scheme: temperature=red, humidity=blue, CO2=green, energy=yellow
- Register in the menu under path /building-monitor
- Build and deploy after creation

Read SESSION_CONTEXT.md first.
Follow the pattern from example pages in the workspace.

Extend an existing page

Add a "Weather" section to the Smart City Overview page (smart-city.ts):
- 3 new DPs: SmartCity.Weather.Temperature, Humidity, WindSpeed
- Position the section to the right of the existing Traffic section
- Use the same KPI card pattern as the existing sections

Customize branding

Change the Dashboard accent color from cyan (#00bde3) to dark blue (#1a56db).
Show me all locations that need updating
(CSS variables, SVG logo colors, login screen, etc.)

Add a trend chart series

Add a new series to the Trend View page (trend-view.ts):
- DP: System1:SmartCity.Water.Quality
- Color: #357fff
- Line style: dashed
- Dedicated Y-axis (range 6.5–9.5)
- Time range: last 2 hours

Debug a build failure

The build fails with this error:
[paste error output]

Analyze the problem and suggest a fix.
The shell is Git Bash (MSYS2) on Windows.

WinCCOA MCP Server

The WinCCOA MCP Server provides AI coding assistants with direct access to WinCC OA functionality through the Model Context Protocol (MCP). When connected, the AI can read and write datapoints, query alerts, and interact with the WinCC OA backend without requiring manual copy-paste of values or error messages. Configure your AI tool to connect to the MCP server to enable richer, context-aware assistance during WebUI Runtime development.

Reusable command files

The WebUI Runtime workspace includes pre-built command files in the .claude/commands directory. These files contain task-specific instructions and context that Claude can execute directly as slash commands. Other AI coding agents can also use these files — point the agent to the .claude/commands directory to read and follow the instructions contained in each file.

This approach encapsulates recurring workflows (for example, creating a new page, setting up alarm handlers, or running a build) as reusable, version-controlled command definitions rather than one-off prompts.

Workspace package

The WebUI Runtime workspace is available as an npm package at @wincc-oa/webui-runtime.

Best practices

1. Keep the session context current. The AI loses context between sessions. The SESSION_CONTEXT.md file is its persistent memory.
2. Always include technical rules. Constraints such as "DPL files require ISO-8859-1 encoding" or "ix-icon only supports sizes 12, 16, 24, 32" must be stated explicitly. The AI cannot know these details on its own.
3. Name reference files. "Follow the pattern from example pages in the workspace" is more effective than a vague description. The AI can read the file and replicate the pattern exactly.
4. Include the build command. Tell the AI the exact build command and which shell you are using (Git Bash, CMD, or PowerShell).
5. Request a build after every change. Adding "Build and verify that the build succeeds" to the prompt ensures that errors are caught immediately.
6. Work incrementally. Break complex tasks into individual prompts: first create the DPL file, then the page, then register it in the menu, then build and deploy.
7. Report errors with full output. "The build fails" alone is not enough — always include the complete error output so the AI can diagnose the problem.
8. Document discoveries. At the end of each session, ask the AI to update SESSION_CONTEXT.md with any new findings.