# Artifact

> Turn a small collaborative mini app YOU generate into a live, runnable MockFlow IdeaBoard tile, and get back the board URL.

Source: https://mockflow.com/developers/reference/item-types/artifact

Send `"type": "artifact"`.

Turn a small collaborative mini app YOU generate into a live, runnable MockFlow IdeaBoard tile, and get back the board URL. Use this when the user wants a working tool, widget, game, poll, wheel, timer or quiz they will actually interact WITH on the board — decision tools (spinning wheel, dice roller, random picker, live poll), meeting tools (planning poker, countdown timer, retro mood meter, standup order picker), learning tools (flashcards, live quiz with scoreboard), turn-based games (chess, tic-tac-toe, battleship, word games), and small calculators. NOT for wireframes/prototypes of an app design (use render_wireframelite / render_prototypelite) and NOT for what-if data models (use render_datasimulator).

Also available as the MCP tool `render_artifact`. The same payload works through either surface.

### Fields

- `files` (object): PREFERRED. The artifact bundle as a map of path -> file content: "shell.html", one or more "app/<name>.js" (app/main.js boots last), optional "app/<name>.css", "theme.css", "copy.json", optional "data.json". Key order is the script order. See the tool description for the file contract.
- `merge` (boolean): MODIFY mode: layer the sent files over the artifact's stored bundle (files you do not send stay as they are). Use it when filling the artifact the user is editing, sending only the files that change. A legacy single-document artifact is lifted into a bundle first (its scripts become app/script-N.js).
- `deletes` (string[]): With merge: bundle files to remove (e.g. ["app/old.js"]).
- `order` (string[]): Optional explicit script/style order for the app/ files when the files map order is not the intended one.
- `html` (string): LEGACY single-document form: a complete self-contained collaborative mini app as one HTML document. Prefer "files".
- `data` (object): The artifact's content body as one JSON object — the subject matter the app renders from, which could be swapped for different subject matter while the app stays the same app. The test is substitution, not the app's category: if the user could ask for the same app "about something else" and only this JSON would change, it is content, whatever kind of app it is; values that configure or label the app itself live in the HTML, not here. Stored as data.json beside the code and read in the app via MFArtifact.getData(); enables later content-only AI updates without touching the code. REQUIRED when the HTML renders from MFArtifact.getData() (the upload is rejected without it); omit for apps with no content body.
- `spec` (string): Optional notes about the app as a string; stored with the bundle for later modifies.
- `steps` (object[]): Optional acceptance steps the server runs against the booted tile (shapes in the description); a failing step is a runtime failure.
- `assets` (object): Generated pictures for the app, as ONE OBJECT keyed by asset name (not a list): {"felt": {"prompt": "green casino felt, soft vignette, no text", "w": 512, "h": 512, "tile": true}, "hero": {"prompt": "friendly cartoon robot mascot, front view, flat shading", "w": 512, "h": 512, "cutout": true}}. MockFlow paints each with its image model (ONE AI credit per picture, at most 8) and stores it beside the app; reference it from the app as the literal string assets/<name>.webp. Only for illustrative art a vector drawing cannot carry (card backs, backdrops, characters, textures) — systematic pieces (cards by rank and suit, dice faces, tiles, boards) are inline SVG the app draws. Omit when the app draws everything itself.
- `dataHint` (string): Example instruction for the editor's "Update content with AI" action, which rewrites this artifact's data.json without touching its code — send it whenever you send "data". Write the instruction a user of THIS artifact would plausibly type to change what its content is about, phrased as that instruction itself rather than a description of one, and short enough to read inside an input field. When the data is machinery the app needs to run rather than subject matter the user chose, or a few small values a person would edit faster by hand than by prompting an AI, send "none" and the editor hides that action for this artifact.
- `title` (string): Short 2-4 word name for what the artifact IS (e.g. "Decision Wheel", "Sprint Poll"). Falls back to the HTML <title> tag when omitted.
- `width` (number): Recommended tile width in board pixels (240-1400) at which the artifact reads best.
- `height` (number): Recommended tile height in board pixels (240-1400) at which the artifact reads best.
- `customTheme` (boolean): Set true ONLY when the user asked for a distinct visual style (retro, terminal, pixel art, a brand) you styled yourself — it skips the injected IdeaBoard base theme.

## Example

```json
{
  "type": "artifact",
  "data": {
    "files": {},
    "merge": false,
    "deletes": [
      "string"
    ],
    "order": [
      "string"
    ],
    "html": "string",
    "data": {}
  }
}
```