> ## Documentation Index
> Fetch the complete documentation index at: https://vendo-mintlify-9465070f.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Generated apps
> How one ask becomes one app.tsx screen, what that screen may write, what happens when an ask is bigger than a screen, and why every user ends up with their own copy.
Your user asks for something. One `app.tsx` screen comes back, live on real data.
## One ask, one app
The plan's skeleton paints in seconds. The finished screen replaces it in place.
An app is one file, holding one default-exported React component. Saving it repaints the person's screen.
```tsx app.tsx focus={4,15} theme={null}
import { useQuery, tools, Stack, Row, Text, Money, Button } from "@vendo/screen";
export default function Spend() {
const spend = useQuery("host_spend_by_category", { month: "aug" });
return (
{spend.rows.map((row) => (
))}
);
}
```
`useQuery` is synchronous and hands back the tool's own result, so field names come off the tool's schema. `tools.(args)` is the only way a screen changes anything.
## When an ask is bigger than a screen
Most asks are one screen. When one is not, the tool says so and stops: it raises a standing approval card and returns, having spent nothing. The card waits for the person, however long that takes.
On yes, a disposable sandbox builds the app once — npm from the registry, a coding agent inside the box, tested against reality — and then the box is released and dies. What comes home is **sealed**: an immutable, content-addressed bundle stored as blobs, alongside its source and lockfile. Every seal is a version.
**The gate.** A build is gated on one thing, a configured `sandbox` adapter. Without one the ask is refused rather than offered.
A sealed bundle renders in a sandboxed iframe: `sandbox="allow-scripts"` without `allow-same-origin`, so the frame has an opaque origin, and a `Content-Security-Policy: default-src 'none'` header, so it makes no network request at all. Your brand tokens and fonts are injected at render, never baked into the seal, so one seal follows your palette rather than pinning the one it was built under.
Host data reaches the frame through one `postMessage` bridge into the guarded tool door, with the viewer's own permissions.
An edit reseals from the stored source in a fresh box.
## What a screen may write
A small closed surface, enforced at save rather than advised in a style guide.
* `react` and `@vendo/screen`, and nothing else
* `useQuery("tool_name", { literal })`, read tools only
* `tools.tool_name(args)`, from a handler
* `` `` `` `` `` `
An app is one file, holding one default-exported React component. Saving it repaints the person's screen.
```tsx app.tsx focus={4,15} theme={null}
import { useQuery, tools, Stack, Row, Text, Money, Button } from "@vendo/screen";
export default function Spend() {
const spend = useQuery("host_spend_by_category", { month: "aug" });
return (