Family5 components
Code an agent wrote is code somebody has to read before it runs. These show it the way a reviewer wants it: highlighted, diffed, staged a hunk at a time, with the terminal output it produced and a frame to see what it renders as.
import { rateLimit } from "./limiter" export async function POST(request: Request) { const allowed = await rateLimit(request) if (!allowed) { return Response.json({ error: "Slow down" }, { status: 429 }) } const body = await request.json() return Response.json({ ok: true, body })}| @@ -1 +1 @@ | |
| export function total(items) { | |
| export function total(items, { taxRate = 0 } = {}) { | |
| let sum = 0 | |
| for (const item of items) { | |
| sum += item.price | |
| sum += item.price * item.quantity | |
| } | |
| return sum | |
| return sum * (1 + taxRate) | |
| } | |
pnpm install mischief-uiEvery one copies its source into your project.
Agent UI31
The surface an assistant answers through: the thread, the composer, and everything it shows while it is working.
Documents13
Reading a file someone uploaded, marking it up, cutting it into pieces, and pulling structure out of it.
Files2
Getting a file in, and showing what arrived.
Feedback7
What the page says while it waits, and when there is nothing to show.
Controls16
Familiar inputs with more feedback than usual, and none of it required to operate them.
Wayfinding5
Knowing where you are in something long, and getting somewhere else quickly.
Docs5
The furniture of a documentation site, taken out of this one.
Blocks11
Larger pieces that compose several components into one part of a page.
Scenes18
Backdrops and moments where the drawing is the job, each one taking its colours from the theme it was installed into.
Motion4
Entrances and numbers that move, driven by arrival or by scrolling, and never by withholding the content.