Announcement card widget for MCP Apps

#When to use an announcement card

Most widgets show many things at once. This one shows one thing well. Reach for it when the answer is a single message that deserves more weight than a line of text:

• Product launches and release notes: the headline, one sentence of context and a link to the full notes.
• Offers and campaigns, where the figure carries the hook (a discount, a deadline, a count).
• The result of a task: after an agent finishes a migration or an import, a card that says what changed and links to it.
• Event invitations, with the date as the figure and the registration page behind the button.

If you need several numbers side by side, use metrics. If the date itself is the story, a countdown ticks down to it.

#How the model fills the card

Only title is required. The rest is optional and the card closes the gaps when a field is missing, so the model can send a bare headline or the full set:

• kicker is the small line above the headline: a category, a product name, "New".
• body is the supporting text. If you want it to stay at one sentence, say so in the field's description in the schema: the model reads it every time it fills the tool.
• figure has a value and a label. The value is a string on purpose, so it can be "13", "+40%", "2.4M" or "Oct 14" without the model forcing it into a number.
• cta has a label and a url for the button.

The tool description says to use it "for launches, offers or a single piece of news", which keeps the model from reaching for it when the user asked for a list.

#What it does in the chat

The button is a host action declared with data-wg-link: clicking it asks the host to open the URL, through the MCP Apps ui/open-link request, instead of navigating inside the sandboxed iframe. The host decides how to open it, and may ask the person first.

The motion belongs to the design. In Aurora the card carries its own slow gradient that drifts behind the glass; in Neon the kicker gets a blinking cursor; in Brutalist the figure becomes a tilted sticker and the button presses down; Editorial turns it into a framed cover with an italic standfirst; Nordic strips it to ink and one giant light figure. All of it is CSS, there is no script or library, and animations stop for people who ask for reduced motion.

#Make it yours

This card is the clearest example of why type and design are separate in Widgetry: the same data reads as a tech launch, a magazine cover or a poster depending on the design you pick, including your organization's own. Markup, styles and schema stay fully editable. Add a second button, an image (declare its origin in the widget's image domains so the host lets it load) or a date line.

#Take it to your server

Link the published card from your MCP server so edits reach it without a deploy, or export the HTML and manifest: add UI to your MCP server has both paths. To see how one data set changes with each design, read theming MCP Apps.

{
  "kicker": "New in Widgetry",
  "title": "Your widgets, on your own MCP server",
  "body": "Design them here, download two files and register them with a few lines of code.",
  "figure": {
    "value": "13",
    "label": "templates to start from"
  },
  "cta": {
    "label": "See the gallery",
    "url": "https://github.com/modelcontextprotocol/ext-apps"
  }
}

{
  "name": "show_aurora_card",
  "title": "Aurora card",
  "description": "Shows a highlighted announcement card: a kicker, a title, a short text, an optional headline figure and a button that opens a link. Use it for launches, offers or a single piece of news.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title"
    ],
    "properties": {
      "kicker": {
        "type": "string"
      },
      "title": {
        "type": "string"
      },
      "body": {
        "type": "string"
      },
      "figure": {
        "type": "object",
        "required": [
          "value",
          "label"
        ],
        "properties": {
          "value": {
            "type": "string"
          },
          "label": {
            "type": "string"
          }
        }
      },
      "cta": {
        "type": "object",
        "required": [
          "label",
          "url"
        ],
        "properties": {
          "label": {
            "type": "string"
          },
          "url": {
            "type": "string"
          }
        }
      }
    }
  }
}