Portable artifacts

Create an artifact with your AI client

1. Describe what you need. Say who will read the artifact and what they should do with it, for example "a one-page quarterly service report for the leadership team" or "a calculator that estimates onboarding hours". The skill points the client to a starting example for the kind of artifact you asked for: a report, a calculator or simulation, a dashboard, a process diagram, a brand prototype, or a plan or design comparison.
2. Supply real material. Give the client the brand colors, figures, and images to use. The client should not invent brand colors, trends, or images, and it labels proposals, assumptions, and sample data as such. For live data, it finds the app tools you can use and declares each one the artifact needs.
3. Check the draft. Before saving, the client runs stackyapper_validate_artifact. See Checking a draft.
4. Save and open it. The client saves the artifact as a new revision and opens it. Look at the result yourself, including a narrow window and any empty, loading, or error states, before you rely on it or share it.

Build your own MCP app

Build a project estimate MCP app with an hours input, a $100 hourly rate, a calculated total, and a reset button. Use no connected data. Validate it, save it, and open it so I can try the controls.

Checking a draft

Browse saved artifacts

Rotate artifacts on a display

1. Choose Create playlist and enter a name.
2. Select Add artifacts, choose the artifacts you want, then confirm the selection. You can keep selecting while you search or change pages.
3. Use the up and down buttons to set the rotation order.
4. Set the time on each artifact and how often to refresh the artifact on screen.
5. Choose Save playlist, then Start display. Use Fullscreen for a larger view.

What an artifact can include

• Images. Inline PNG, JPEG, GIF, or WebP images supplied as part of the source, such as a logo the client received from you. Each image needs alt text, or must be marked as decorative. Images must be still: animated GIF, PNG, and WebP files are rejected. See Limits for sizes.
• Process diagrams. Steps arranged in lanes for each team or role, with decisions, handoffs, and return paths. Stackyapper draws the diagram, lets the reader select a step with the keyboard to see its details, and includes a text version of the whole process. A long process is drawn top to bottom rather than shrunk to fit.
• Sliders and date fields. Range and date inputs with optional minimum and maximum values, and a step for numbers. Dates use the YYYY-MM-DD format.
• Captions and quotes. Figures with captions, and block quotes.

Not available yet

• Image uploads or image addresses. There is no upload or shared image library, and images cannot load from a web address. Each artifact carries its own images. Without an image to supply, the skill tells the client to show a labeled placeholder rather than a made-up picture.
• Custom chart axis ranges. Charts set their own axis scale.
• Custom HTML, SVG drawings, and links. Use a chart for data, a diagram for a process, and an image for a picture. Web addresses can appear as text.

Delivery and compatibility

Editing across clients

Authoring formats

Example 1: status page

12345678{
  "format": "stackyapper.ui/v1",
  "blocks": [
    { "type": "heading", "text": "Morning service check", "level": 2 },
    { "type": "status", "label": "Backup", "value": "Healthy", "tone": "good" },
    { "type": "metric", "label": "Open alerts", "value": "2", "detail": "Review before noon" }
  ]
}

Example 2: table

{
  "format": "stackyapper.ui/v1",
  "blocks": [
    {
      "type": "table",
      "caption": "Devices approaching replacement",
      "columns": [
        { "key": "device", "label": "Device" },
        { "key": "age", "label": "Age" }
      ],
      "rows": [
        { "device": "Laptop 014", "age": "4 years" }
      ]
    }
  ]
}

Example 3: governed read control

{
  "format": "stackyapper.ui/v1",
  "blocks": [
    {
      "type": "control",
      "kind": "refresh",
      "label": "Refresh open tickets",
      "description": "Reads up to three open tickets with your current access.",
      "binding": {
        "role": "psa",
        "tool_name": "cw_search_tickets",
        "arguments": { "conditions": "closedFlag=false", "pageSize": 3 }
      }
    }
  ]
}

123[
  { "role": "psa", "service": "connectwise", "tool_names": ["cw_search_tickets"] }
]

Operational work queues

{
  "format": "stackyapper.ui/v1",
  "blocks": [
    {
      "type": "work_queue",
      "item_label": "tickets",
      "eyebrow": "Service operations",
      "title": "Dispatch Console",
      "status": "80 open",
      "histogram": {
        "label": "Open by age",
        "hint": "Select a bar to filter",
        "items": [
          { "label": "30d+", "value": "23", "tone": "warning",
            "match": { "key": "age_bucket", "value": "30d+" } }
        ]
      },
      "filters": [{ "key": "board", "label": "All boards" }],
      "chip_groups": [],
      "columns": [
        { "key": "ticket", "label": "Ticket" },
        { "key": "board", "label": "Board" },
        { "key": "age", "label": "Age", "kind": "age" },
        { "key": "age_bucket", "label": "Age bucket", "hidden": true }
      ],
      "rows": [
        { "ticket": "#42 Printer offline · Acme", "board": "Service",
          "age": "31d", "age_bucket": "30d+" }
      ],
      "footer": ["ConnectWise via Stackyapper"],
      "control": {
        "label": "Query latest",
        "binding": { "role": "psa", "tool_name": "cw_search_tickets",
          "arguments": { "page": 1, "pageSize": 2 } }
      }
    }
  ]
}

Rules

• Unknown keys or block types are rejected.
• Every control’s role and tool must also appear in the revision’s immutable bindings argument.
• Control arguments may contain bounded filters, but never tokens, credentials, connection IDs, or tenant selectors.
• Controls never carry authorization. Stackyapper resolves the role against the current viewer, workspace, grants, risk policy, and saved credentials at click time; write or destructive operations still require confirmation.
• Histogram and chip counts are whole numbers written as strings (for example "23").

Limits

• Source: 256 KiB stored; hosted stackyapper.ui/v1 document: 64 KiB.
• Hosted document: 100 blocks; each string: 4 KiB UTF-8.
• Table: 12 columns and 50 rows.
• Work queue: 16 declared columns, 50 rows, 6 facets, 4 chip groups, 6 histogram items, and 12 chip items per group.
• Control arguments: 8 levels and 256 JSON nodes.
• Images: 16 per page. Each image is up to about 72 KiB (96 KiB of base64 text), 4,096 pixels on its longest side, and 4 megapixels. All images on a page together are limited to about 144 KiB (192 KiB of base64 text) and 8 megapixels. Keep logos and icons to a few kilobytes.
• Diagram: 8 lanes, 40 steps, and 80 connections; step labels up to 80 characters.
• Backup package: 400 KiB; export is returned in bounded 4 KiB chunks.
• Active artifacts: 250 per workspace; retained revision history: 50 revisions.

Backups

Safe authoring checklist

• Prefer small summaries and explicit bounded queries.
• Include only data the intended viewers are allowed to see.
• Declare every control tool in the revision bindings.
• Check every draft with stackyapper_validate_artifact, then open the saved artifact and review it.
• Use only the curated artifact packages; external packages and network imports are unavailable.
• Never place secrets, customer payloads, or credential identifiers in source.
• Expect controls to fail when the viewer lacks current permission.
• Treat export as recoverability, not provenance or authorization.