For AI assistants: how to build, preview and hand off a QuickWatch app

QuickWatch turns a JSON project into Wear OS watch screens, a tile and a complication. The expected workflow when a user asks you for a QuickWatch watch app:

1. If the QuickWatch connector (https://quickwatch.app/mcp) is available, use its tools: they build, validate and preview the app in the chat.
2. Otherwise write watch.json and sample data.json (below; mock data goes in data.json).
3. Show the preview with the npm package @quickwatch/preview in an inline widget or HTML artifact. It is QuickWatch's own renderer: the real components, fonts and round screen. Do not hand-draw a mock-up of the watch.
4. Give the user the Open in QuickWatch link so they can keep it and send it to their watch.

Full guide: https://quickwatch.app/llms.txt and https://quickwatch.app/docs/agent-guide.md.

1. The project: watch.json (plus sample data.json)

JSON Schema: https://quickwatch.app/schema/quickwatch.schema.json. schemaVersion is 2. Each Experience needs title, pages (each with a root component) and tile; complication is optional. Text props are bindings like {{ weather.temp | round }}° that read data by source name; data.json holds sample data for every source. Ids are lowercase (a-z, 0-9, -). Unknown properties are errors. Components, tile templates, complication kinds, icons and limits: https://quickwatch.app/schema/capabilities.json. Examples: https://quickwatch.app/llms-full.txt.

{
  "schemaVersion": 2,
  "sources": { "weather": { "type": "http", "url": "https://api.example.com/weather?city=Stockholm", "refresh": { "poll": "15m", "onOpen": true } } },
  "experiences": {
    "weather": {
      "title": "Weather",
      "icon": "cloud",
      "pages": { "now": { "title": "Stockholm", "root": { "type": "text", "value": "{{ weather.temp | round }}°" } } },
      "tile": { "template": "text", "title": "Weather", "text": "{{ weather.temp | round }}°" },
      "complication": { "kind": "shortText", "text": "{{ weather.temp | round }}°" }
    }
  }
}
data.json: { "weather": { "temp": 14.2 } }

2. Preview it in the chat with @quickwatch/preview

Show the real watch (same engine, components and fonts as QuickWatch; taps work, actions are simulated) in an inline widget or HTML artifact. Put watch.json and data.json in the page; the widget cannot fetch them from QuickWatch.

<script type="application/json" data-qw-watch>
{ ...watch.json... }
</script>
<script type="application/json" data-qw-data>
{ ...data.json... }
</script>
<script>
  var s = document.createElement("script");
  s.src = "https://cdn.jsdelivr.net/npm/@quickwatch/[email protected]/dist/quickwatch-preview.min.js";
  document.head.appendChild(s);
</script>

The script finds the two JSON blocks and shows the watch, a button per screen (pages, tile, complication), any problems and an Open in QuickWatch button. Change nothing but the JSON.

3. Hand it to the user

Give the Open in QuickWatch link: https://quickwatch.app/new#c=<payload>, payload = base64url (no padding) of deflate-raw of the UTF-8 JSON { "v": 1, "config": <watch.json>, "data": <data.json> }, at most 32 KB. The page shows the preview and "Keep it" saves the project; publishing to the watch stays with the user. Encoders in JavaScript and Python are in the guide. To build straight to the watch, the user can add the connector https://quickwatch.app/mcp.