A FrontPanel Platform App is a packaged collection of JavaScript, HTML, and CSS that uses the FrontPanel Platform JavaScript API to communicate with FrontPanel-enabled devices.

There are two methods for developing an application for the FrontPanel Platform:

• Use a text editor and begin writing HTML, CSS, and JavaScript.
• Use an open-source JavaScript user interface library or framework.

The tutorials and how-to guides presented use the React JavaScript user interface library combined with TypeScript and Webpack. They are used because they simplify application development, but their use is not mandatory.

Used because it applies type checking to JavaScript, which improves the ability to catch coding errors early in the development process.

Used because of its ability to produce optimized bundled applications and its broad support among the web development community.

Used for its versatility, robustness, and popularity among application developers. It also provides a complete set of documentation and tutorials that carry useful information for new developers.

Two libraries are available to assist in the development of FrontPanel applications. These libraries are optional but offer a basic set of elements useful for most applications. They can be installed using the Node Package Manager (NPM).

• @opalkelly/frontpanel-platform-api

Provides TypeScript definitions for methods of the FrontPanel Platform API and some utilities that are useful in some common use case scenarios.

• @opalkelly/create-frontpanel-app

A scaffolding tool that generates a new FrontPanel Platform application project. Prompts for project details and populates fields in the application manifest.

We have provided a few files to assist an AI agent in creating well-structured software designed for the software <> gateware interface that the FrontPanel SDK provides.

• DEVICE-REFERENCE.md – A comprehensive, but efficient, guide to Opal Kelly devices, product capabilities, and FrontPanel interfaces. This knowledge helps prime an agent to recognize which approaches are best suited to your product.
• ARCHITECTURE-SOFTWARE.md – A summary of the software communication layer (FrontPanel) to the hardware and layered architecture that we recommend for well-abstracted, high-performance communication.
• ARCHITECTURE-GATEWARE.md – A summary of the high-level gateware architecture designed to expose a CSR (command status register) interface compatible with the software-side driver layer via FrontPanel HDL and the FrontPanel HostInterface.
• BOOTSTRAPPING.md – Agent instructions for bootstrapping a new project and building the software (and possibly gateware) from the ground up.
• SKILL.md – Instructions guiding agents to BOOTSTRAPPING.md and rules for engaging with users.