Building Gadgets & Webapps with Revel Digital AI Skills

Revel Digital publishes a set of AI Skills that let you scaffold complete, deployable signage applications from a natural-language description. A skill teaches an AI coding assistant (such as Claude) the exact project structure, dependencies, client SDK wiring, and deployment steps for a Revel Digital app, so you can go from an idea to a working build in a single session. There are two skills, covering the two kinds of custom content you can build:

• Gadget skill — builds gadgets: embeddable widgets defined by a gadget.yaml file, hosted on GitHub Pages, that expose configurable preferences to signage designers.
• Webapp skill — builds webapps: full-screen apps deployed to the CMS as a .webapp media asset, with content driven by a configuration file rather than a preferences panel.

Gadgets vs. Webapps: Which Should I Build?

Both run on the player and both use the Revel Digital client SDK. The difference is how they are configured and deployed.

Before You Start

• An AI assistant that supports Skills — Claude.ai (Web / Desktop / Mobile) or Claude Code.
• The Code Execution capability enabled in your Claude settings.
• Node.js and npm installed locally.
• A GitHub account (required for gadget hosting on GitHub Pages).
• The relevant skill installed (see below).

Installing the Skills

Both skills are published as open-source repositories. Install the one you need, then describe what you want to build.

Claude.ai (Web / Desktop / Mobile)

1. Download the latest release ZIP from the skill's Releases page on GitHub.
2. In Claude, go to Settings → Capabilities → Skills and click Upload skill.
3. Select the ZIP, then toggle the skill on. Ensure Code Execution is enabled under Capabilities.

Claude Code

Install from the plugin marketplace. For the gadget skill:

/plugin marketplace add RevelDigital/reveldigital-gadget-skill
/plugin install revel-gadget@reveldigital

For the webapp skill:

/plugin marketplace add RevelDigital/reveldigital-webapp-skill
/plugin install revel-webapp@reveldigital

Update later with /plugin marketplace update reveldigital.

Creating a Gadget

With the gadget skill active, describe the gadget you want (for example, "build a meeting-room schedule gadget"). The skill will confirm a few details, then scaffold the full project.

1. Choose a framework

The skill supports four frontend frameworks, each wired to the appropriate SDK library:

You will also be asked for a gadget name and whether you want to host on GitHub Pages (which adds Gadgetizer integration and a GitHub Actions deploy workflow).

2. Review the scaffold

The skill generates a complete project: the chosen framework with the SDK already wired in, a demo UI showing device info, preferences, and player actions, and a gadget.yaml in the project root. The gadget.yaml file defines the preferences signage designers will see in the CMS — it ships with sample preference types (string, boolean, style, enum), including conditional depends visibility — so edit it to add the settings your gadget needs.

Every scaffold also includes, out of the box:

• Live data tables — read CMS data tables with filtering, sorting, and real-time row-change events via createDataTable() (gadget-only).
• Signage best practices — a theme-token system, Section 508 / WCAG contrast, distance-readable type, and reduced-motion handling.

3. Package with Gadgetizer

Gadgetizer turns the web build into a Revel Digital gadget package. It runs in two phases:

1. Initial setup (run once, after creating your GitHub repo): run npx gadgetizer. This interactive command detects the project type, prompts for your GitHub Pages deployment URL, installs the SDK dependencies, and generates the initial gadget XML. Create the GitHub repo first so the correct Pages URL is known — that URL is embedded in the gadget XML and is how the CMS locates your gadget's assets.
2. Subsequent builds: run npm run build:gadget, which calls Gadgetizer with the --build-only flag. The GitHub Actions workflow uses the same flag, since the deployment URL is already configured.

4. Deploy and add to a template

Push to GitHub to publish on GitHub Pages, then add the gadget to a template in the CMS and configure its preferences per screen.

Creating a Webapp

Webapps are the right choice when you want a purpose-built display whose content is managed as data rather than through a preferences panel. With the webapp skill active, describe what you want (for example, "build a building directory").

1. Confirm the basics

The skill asks for the essentials — framework, app name, brand color, theme (light / dark / auto), and deployment method — then scaffolds a complete project with the theme applied, the client SDK wired in, a config loader, and your layout. React is the recommended default.

The same signage baseline as the gadget skill is built in: a theme system, Section 508 / WCAG 2.1 AA accessibility, and distance-readable typography sized for viewing distance with overscan-safe margins.

2. Manage content in config.json

Webapps have no preferences panel, so content lives in a config.json file that ships alongside the build and can be edited without recompiling. Updating the displayed content is a matter of editing that file, not rebuilding the app.

3. Device-aware content via the SDK

The generated SDK integration reads device context from the player and falls back to sane defaults via isPreviewMode() when running in the browser during development:

• Time: a live clock driven by the player's device time (getDeviceTime), falling back to local browser time off-device.
• Device & location: device details and coordinates via getDevice, enabling geo-aware content such as local weather.
• Commands: player command handling via EventType.COMMAND, so the app can respond to commands sent from the CMS or a schedule.

Because the device exposes its coordinates, location-aware features follow the screen wherever it physically is — for example, current conditions pulled from a free, keyless weather source.

4. Deploy to the CMS

A webapp is uploaded to the CMS as a .webapp media asset. There are three ways to deploy:

1. Via the MCP server (recommended). Build and deploy without leaving the conversation, authenticated by OAuth browser login — no CI and no repo secrets. Connect the endpoint https://mcp.reveldigital.io/mcp (in Claude Code: claude mcp add --transport http reveldigital https://mcp.reveldigital.io/mcp). The preferred flow uploads the packaged .webapp directly to the CMS via a presigned upload, so the binary never passes through the model.
2. GitHub Action (CI). Automated redeploy on every push using the RevelDigital/webapp-action, which reads a Revel_API_Key repository secret. Use this when you want deployment wired into your git workflow.
3. Direct REST upload. A one-off local multipart upload with your API key — no MCP, no CI.

Once uploaded, assign the webapp to your devices like any other media asset.

Reference

• Gadget skill: github.com/RevelDigital/reveldigital-gadget-skill
• Webapp skill: github.com/RevelDigital/reveldigital-webapp-skill
• Developer portal: developer.reveldigital.com
• Client SDK docs: reveldigital.github.io/reveldigital-client-sdk
• Revel Digital MCP server: reveldigital.github.io/reveldigital-mcp-cloudflare
• Webapp deploy action: github.com/RevelDigital/webapp-action