The kit’s API.

Add new pieces — action: "add"

POST /demo30/api.php, body JSON, up to 100 items per call:

{
  "action": "add",
  "items": [
    { "type": "button", "name": "Neon pulse", "page": "lab", "section": "neon",
      "html": "<button class=\"btn\">Join DEPO</button>",
      "css": ".btn { padding: 14px 28px; border: 2px solid #53f57e; border-radius: 999px; background: none; color: #53f57e; }",
      "js": "" },
    { "type": "svg", "name": "aperture", "svg": "<svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>" },
    { "type": "utf8", "ch": "✦" }
  ]
}

The answer gives every item its fate, in the same order:

{ "ok": true, "added": 2, "duplicates": 1, "errors": 0,
  "results": [
    { "status": "added", "id": 5763, "num": 3075, "page": "lab" },
    { "status": "added", "id": 5764, "num": 3076, "page": "svg" },
    { "status": "duplicate", "id": 642, "num": 25, "page": "utf8", "trashed": false }
  ] }

• button — html (one piece, ≤ 20 KB), css (≤ 40 KB), js (≤ 20 KB, runs only in the piece’s sandbox), name, optional page (lab default, or buttons, vault, flat, gen25, gen15, gen10) and section (lower-case, digits, dashes). The format of the import page.
• svg — svg: a whole <svg> or only its shapes, name. Only shapes (path, circle, ellipse, rect, line, polyline, polygon, g) and their geometry / paint attributes are kept — no scripts, links, ids, styles. It lands on the SVG page and takes the page’s colour, size, stroke and style.
• utf8 — ch: one character or one emoji sequence (no letters, digits, spaces). It lands on the UTF-8 page.
• type may be left out: an item with svg is an icon, with ch a character, otherwise a button.

What counts as “the same”

• Button: its HTML + CSS + JS with comments removed, its own class and @keyframes names replaced in order (so .btn-12 and .btn-400 with the same rules are one button), whitespace collapsed, colours lower-cased.
• SVG: the cleaned shapes with attributes sorted, numbers rounded to 2 decimals, and the viewBox — so a copy with other spacing, ids, comments, width / height or attribute order is the same icon.
• Character: its Unicode code points (NFC), variation selectors (U+FE0F / FE0E) ignored — ★ sent twice, or ❤ and ❤️, are one character.
• A duplicate answers with the piece already in the kit (number, page, whether it is in the trash) — the trash counts too, a binned piece is not added again. Pieces saved in the editor are new on purpose and are not checked.

Limits: 300 new pieces per visitor (cookie kit30) and day, 20 000 in the kit. Example:

curl -s -X POST https://album.dev0.dphub.net/demo30/api.php \
  -H 'Content-Type: application/json' \
  -d '{"action":"add","items":[{"type":"utf8","ch":"✦"}]}'

MCP server — for AI assistants

The kit is also an MCP server, open to everyone — no keys, no sign-up: https://album.dev0.dphub.net/demo30/mcp.php (Streamable HTTP transport, JSON answers).

claude mcp add --transport http depo-ui-kit https://album.dev0.dphub.net/demo30/mcp.php

In Claude Desktop / claude.ai: Settings → Connectors → Add custom connector → that URL. Any other MCP client: an HTTP server at that URL, no authentication.

• kit_overview — pages with counts and links, the settings each kind of piece can change, the rules.
• list_pieces — pieces of a page (filter by section or text, order by number or votes, trashed ones on request).
• get_piece — one piece in full: settings, or html / css / js for code pieces; what can be edited.
• add_pieces — new buttons, SVG icons, characters; only the ones the kit does not have yet (the rules above).
• edit_piece — edit and save: always a new piece with your settings (or new code, or replace: [{from, to}] on the code), in “Made in the editor”, linked to the original — which never changes.
• trash_piece / restore_piece — the shared trash (it cannot be emptied). vote_piece — one vote per caller and piece.
• Prompt design_buttons (count, theme) — asks the model for new buttons in the import format and to add them.

Every answer carries the link to see the piece working. A caller is told apart by its address: one vote per piece, 300 new pieces a day.

Everything else

• GET ?page=<page> — the pieces of a page as JavaScript (window.KIT_DATA = {page, rows, counts}); pages: buttons, vault, flat, lab, gen25, gen15, gen10, nav, svg, utf8; ?page=top — the 120 most voted; ?page=trash — the trash.
• {"action": "import", "page": "lab", "items": [ … ]} — what the import page sends: buttons only, up to 50, duplicates skipped the same way and listed in duplicates.
• {"action": "vote", "id": 123} — one vote per cookie and piece.
• {"action": "trash", "id": 123} / {"action": "restore", "id": 123} — the shared trash; it cannot be emptied.
• {"action": "create", "parent": 123, "settings": {…}} or …, "html", "css", "js" — what “Save as new piece” in the editor sends: always a new piece, the original never changes.
• Command line on dev0: php demo/bin/demo30-kit.php import lab file.json (same checks), rehash, stats.