Our npm create package provides the option to include our AI scaffold, a set of guidance files and an Agent Skill that orients any AI assistant you use to the FrontPanel Platform. Before starting with this guide, ensure you have completed Building with NPM Create since this is a continuation of that.

This guide walks through using the scaffold with Claude Code to build a Counters app for the XEM8320-AU25P.

• Building with NPM Create
• XEM8320-AU25P
• Claude Code

Claude Code auto-discovers skills at .claude/skills/. The scaffold places SKILL.md under ai-scaffold/, so move it into a directory Claude will pick up:

mkdir -p .claude/skills/frontpanel-app
cp SKILL.md .claude/skills/frontpanel-app/

For other agents, use the destination from the table in USING-AI.md instead.

Note: This workflow has only been tested using Claude Code. Behavior with other agents are not guaranteed.

Copy counters.bit in the project root:

counters-app/
├── counters.bit
└── ...

The bitfile is located in "Examples/Counters/FP-Platform/assets/bitfiles/" in your FrontPanel Platform installation

Note: To target a different board, locate counters.bit from the folder matching your device and replace the board name in the prompt.

The skill’s non-negotiables require an authoritative endpoint map for a given bitfile. The agent generates the endpoint map automatically when pointed to the gateware. However, you can also provide the map directly.

In this example, we have provided the ENDPOINT-MAP.md for you. Store it in the project root.

This is the Endpoint Map for AXI enabled devices:

# AXI Address Map — counters.bit
# addr       name         access  bit  field       meaning
0x0000_0000  CTRL         R/W     0    reset1      hold Counter1 at 0x00 while high
0x0000_0000  CTRL         R/W     1    disable1    pause Counter1 while high
0x0000_0000  CTRL         R/W     2    autocount2  Counter2 auto-increments while high
0x0000_0020  COUNT1       R       7:0  count1      Counter1 value
0x0000_0024  COUNT2       R       7:0  count2      Counter2 value
0x0000_0040  TRIG_CTRL    W       0    reset2      reset Counter2 to 0x00
0x0000_0040  TRIG_CTRL    W       1    up2         Counter2 += 1
0x0000_0040  TRIG_CTRL    W       2    down2       Counter2 -= 1
0x0000_0060  TRIG_STATUS  R       0    count1eq00  fires when Counter1 == 0x00
0x0000_0060  TRIG_STATUS  R       1    count1eq80  fires when Counter1 == 0x80
0x0000_0060  TRIG_STATUS  R       2    count2eqFF  fires when Counter2 == 0xFFCode language: PHP (php)

This is the Endpoint Map for classic devices:

# Endpoint Map — counters.bit
# type      addr  bit/range  name         meaning
WireIn      0x00  0          reset1       hold Counter1 at 0x00 while high
WireIn      0x00  1          disable1     pause Counter1 while high
WireIn      0x00  2          autocount2   Counter2 auto-increments while high
WireOut     0x20  7:0        count1       Counter1 value
WireOut     0x21  7:0        count2       Counter2 value
TriggerIn   0x40  0          reset2       reset Counter2 to 0x00
TriggerIn   0x40  1          up2          Counter2 += 1
TriggerIn   0x40  2          down2        Counter2 -= 1
TriggerOut  0x60  0          count1eq00   fires when Counter1 == 0x00
TriggerOut  0x60  1          count1eq80   fires when Counter1 == 0x80
TriggerOut  0x61  0          count2eqFF   fires when Counter2 == 0xFF
Code language: PHP (php)

For more endpoint specific information, refer to the counters example.

Open Claude Code from the project root and paste the following as your prompt.

Create a new FrontPanel Platform app for the **XEM8320-AU25P**.

## FPGA Design
Two 8-bit counters:
- **Counter 1** — Free-running auto-counter. Supports reset and pause. Fires trigger events at `0x00` and `0x80`.
- **Counter 2** — Manual counter. Supports increment, decrement, reset, and an autocount toggle. Fires a trigger event at `0xFF`.

## App Requirements
- The UI displays both counter values.
- **Counter 1 controls:** reset, pause/resume. Note: Reset needs to be held high at least 50ms
- **Counter 2 controls:** increment, decrement, reset, autocount toggle.
- **Trigger event log:** timestamped entries appended as events occur. Each trigger must only log once (debounce repeated firings).Code language: PHP (php)

FPGA Design describes the gateware’s behavior. This covers what each functional block does, how endpoints group together, and any state or timing that the endpoint map can’t express on its own.

App Requirements describes what the app should present and how it should behave, including controls, displays, and any rules the app must enforce (timing, debouncing, validation).

After Claude finishes, the app should be generated in output/app-dev.fpp. Install and run the app with FrontPanel Platform.

The UI will vary as we have not provided any design guidance but the app should have a UI similar to this:

Ensure the app meets the prompt guidelines:

Counter 1

• Free-runs once the app launches.
• Pause/Resume stops and restarts the count.
• Reset holds the value at 0 while the button is pressed.

Counter 2

• Increment, Decrement, and Reset each fire as one-shot actions.
• Autocount toggle starts and stops auto-incrementing.

Event Log

• No entry repeats while the trigger condition holds.
• New entries appear when Counter 1 hits 0x00, 0x80, and Counter 2 hits 0xFF.

The counters app generated might need refinement. Whether its bug fixes, new features, or UI changes, we recommend iteratively working with the AI agent to improve the application.