A digital signage toolkit for AI agents

signagekit is a toolkit for agents that build dashboards, menus, schedules and alerts for signage screens. The agent writes a short JSON or YAML template. signagekit lays it out for any display, sizes every piece of text, and gives the agent a way to check and see its work.

npm install @514sid/signagekit

Get started Guide for agents

How an agent builds a screen

1
Write the template
The agent writes JSON or YAML against a JSON Schema: named zones and a component in each, from tables and stats to charts, schedules and alerts. No CSS and no pixel values.
```
# yaml-language-server: $schema=https://unpkg.com/@514sid/signagekit/schema.json
```
2
Check it
The checker lists every problem with its exact path, so a model can repair its own template without seeing the screen.
```
npx @514sid/signagekit check menu.layout.yml menu.data.yml
```
3
Look at it
A preview link renders the screen at several resolutions. The agent screenshots it and fixes what looks cramped or empty.
```
npx @514sid/signagekit url menu.layout.yml menu.data.yml --mode sizes
```
4
Update the data
After that, the agent or a script only rewrites the data. The checked template stays as it is, so a new value can never break the layout.
```
await screen.update({ data: { wait: 12 } })
```

One template, every display

A lunch menu from the examples, written once for landscape.

The template and data behind it

# yaml-language-server: $schema=https://unpkg.com/@514sid/signagekit/schema.json
# A canteen screen: the menu, wait time, free seats and notices. Designed for
# landscape; on a portrait screen the zones move onto rows of their own.
colors:
  scheme: dark
  accent: '#2563eb'

layout:
  design: landscape
  flow:
    - { zone: head, span: 9, height: 170px }
    - { zone: clock, span: 3, height: 170px }
    - { zone: menu, span: 6, height: 2 }
    - { zone: info, span: 6, height: 2 }
    - { zone: news, height: 110px }

zones:
  head: { type: heading, text: Today's lunch }
  clock: { type: clock, surface: raised, show_date: true }
  menu:
    type: table
    title: Menu
    columns: [Dish, Diet, Price]
    align: [start, start, end]
    rows: { bind: /menu }
  info:
    type: stack
    items:
      - type: stack
        direction: row
        items:
          - { type: stat, title: Wait time, value: { bind: /wait }, unit: min }
          - { type: stat, title: Seats free, value: { bind: /seats } }
      - type: stack
        direction: row
        items:
          - { type: list, title: Notices, items: { bind: /notices } }
          - type: text
            surface: accent
            title: Allergens
            fit: true
            text: Ask at the counter for allergen information.
  news: { type: cycle, surface: raised, items: { bind: /messages }, seconds: 8 }

# Every value in YAML data is read as text, so 4.50 stays "4.50".
menu:
  - [Tomato soup, VG, 4.50]
  - [Chicken curry, GF, 8.90]
  - [Mushroom risotto, V, 8.20]
  - [Fish and chips, '', 9.50]
  - [Falafel wrap, VG, 6.80]
wait: 6
seats: 42
notices:
  - 'Fire drill Thursday at 10:00'
  - New vegan station opens Monday
messages:
  - 'Coffee bar open until 16:00'
  - 'Card payments only after 14:00'
  - Reusable cups get 20p off

Why it works for agents

Components, not sizes

Agents choose what goes where. signagekit sizes all the text as one design, keeps it readable, and lets long lists say how many rows didn't fit.

Alerts in the data

One alert block covers everything from a fire alarm to a maintenance notice, with an icon and numbered steps. An agent raises or clears it by writing data.

Light enough for players

39 KB of JavaScript, no web fonts, and only the components a screen uses get loaded, so it runs on the low-end devices behind most screens.

Examples to start from

Menus, dashboards, schedules, queues and alerts, each a folder with a layout and its data, ready to copy and change. Browse the examples

A digital signage toolkit for AI agents

How an agent builds a screen

Write the template

Check it

Look at it

Update the data