> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vendo.run/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, the three layers it can run at, 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.
## One screen, three layers
Most apps never leave layer 1. The agent climbs only when the instruction demands it.
No server anywhere. The screen renders in the host surface and acts through guarded host tools.
The same screen, plus a persistent sandbox where execution lives. The machine never draws UI.
The machine also serves a real web app, and the host embeds that URL as the surface.
**The gate.** Layers 2 and 3 are gated on one thing, a configured `sandbox` adapter.
Nobody picks a layer by hand, and the last working surface keeps serving while the next one builds.
A machine sleeps as a snapshot and auto-sleeps after five minutes idle. A served layer-3 app also needs the wire mounted, so `/apps/:appId/serve/**` answers on your own origin.
## 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 (