Countdown timer widget for MCP Apps

#When to use a countdown widget

A countdown answers one question, "how long until?", and keeps answering it after the model has stopped talking. A text reply is stale the moment it is written. This widget keeps counting, because the timer runs in the browser of whoever is looking at the chat.

Good fits:

• Launches and release dates the team keeps asking about.
• Deadlines: a filing date, the end of a sale, the close of a call for papers.
• Trips and events with a fixed start: a flight, a workshop, a conference keynote.

#How the model fills it

The data schema has two required fields, title and date, and two optional ones, kicker (the small line above the title) and place (shown after the date).

date is the field that matters. Its schema description asks for an ISO 8601 date and time with offset, so the model writes a full timestamp with its time zone instead of "next Tuesday at ten". The offset is what makes the count right for every viewer, wherever they are: the browser converts it to an exact instant before it starts subtracting.

The tool description tells the model when to reach for this widget: launches, deadlines, trips or any event with a start time. If you adapt the widget for one narrow job (say, only shipping cutoffs), rewrite that description to match. The model reads it to decide whether to call the tool, so a specific description means fewer wrong calls.

#What it does in the chat

Four tiles show days, hours, minutes and seconds. A small script updates them every second, and each digit that changes does a short jump. The date under the title is formatted in the browser, in the language the host reports, not shown as a raw timestamp. When the time runs out, the counters stop at zero and switch to the design's positive color.

A few details you get for free:

• The script returns a cleanup function, so when the host sends new data the old timer stops instead of running twice.
• With reduced motion turned on in the operating system, the digits change without the jump.
• No libraries, no external origins: the widget runs under the default MCP Apps CSP with nothing to declare.

The template declares no host actions. It is a display, not a control.

#Make it yours

Every widget type works in every design. The five classic designs each have their own take on this one: thin numerals on hairline tiles in Nordic, gradient digits over a soft halo in Aurora, tilted sticker boxes with colored bands in Brutalist, Didot numerals between rules like a printed timetable in Editorial, and glowing digits with blinking colons in Neon.

The unit labels follow the host's language too (English and Spanish out of the box), and they live in the markup, so rewording them or adding another language is a small edit. You could add a url field to the schema and a button with data-wg-link that opens the event page, or a data-wg-message that asks the model to add the event to a calendar.

After the event, the milestones template is the natural follow-up for the results.

#Take it to your server

Publish the widget and link it from your own MCP server: one function registers the show_<slug> tool and its ui:// resource, and every change you publish reaches the server without a deploy. The guide to adding a UI to your MCP server walks through it, including the download-and-copy path. If you prefer to let your agent build and publish it for you, see creating MCP App widgets with an AI agent.

{
  "kicker": "Starts in",
  "title": "Widgetry launch",
  "date": "2026-12-01T10:00:00+01:00",
  "place": "Madrid and online"
}

{
  "name": "show_countdown",
  "title": "Countdown",
  "description": "Shows a live countdown to an event: its name, date and place, and the days, hours, minutes and seconds left. Use it for launches, deadlines, trips or any event with a start time.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "date"
    ],
    "properties": {
      "kicker": {
        "type": "string"
      },
      "title": {
        "type": "string"
      },
      "date": {
        "type": "string",
        "description": "ISO 8601 date and time of the event, with offset"
      },
      "place": {
        "type": "string"
      }
    }
  }
}