Host components

Register a component and a generated screen can name it. What you register is a closed contract, so a name a screen renders is a name your product really has.

Register your components

One object, keyed by component name, under one name at both ends: createVendo({ components }) on the server and <VendoProvider components> in the browser take the same object.

vendo.ts

import { createVendo } from "@vendoai/vendo/server";
import type { ComponentRegistry } from "@vendoai/vendo";
import { z } from "zod";
import { SpendingDonut } from "@/components/charts/spending-donut";

const registry = {
  MapleSpendingDonut: {
    component: SpendingDonut,
    description: "Category breakdown of spending. Use for where-did-my-money-go requests.",
    props: z.object({
      slices: z.array(z.object({ category: z.string(), amount: z.number() })),
      size: z.number().default(200),
    }),
    examples: ['{"slices":[{"category":"dining","amount":34218}],"size":200}'],
  },
} satisfies ComponentRegistry;

const vendo = createVendo({ components: registry });

description is selection guidance. Say what the component shows and when to reach for it.
props validates at render and derives the model-facing JSON Schema. One schema, never two.
examples are JSON prop objects the model copies from, and they draw the console’s preview.

Copy prop names from the component’s source, never from convention. If SpendingDonut takes slices, the schema says slices, not data.Prop invention is the single most observed agent failure, and a schema is what makes it impossible.

Registering a component lets a screen render it. Letting a user change one is a different wrapper, in import & fork.

What a screen may name

A name outside these two sets fails the save. It never renders as an empty box.

The Kit is one family, and every component in it reads your theme tokens.

Family	Components
Layout	`Stack` `Row` `Grid` `SplitPane` `Surface` `Card` `Divider`
Values	`Text` `EnumBadge` `Icon`
Data	`DataTable` `TableRow` `CardList` `Calendar` `Stat` `Badge` `KeyValue` `Timeline` `Avatar` `CodeBlock`
Charts	`LineChart` `BarChart` `DonutChart` `Sparkline` `Progress`
Forms	`Input` `Select` `DatePicker` `Textarea` `Checkbox` `Switch` `Radio` `Slider` `SegmentedControl` `Combobox` `DateRange` `Button` `Link` `Form` `Disclaimer`
Feedback	`Tabs` `Callout` `Accordion` `Menu` `Tooltip` `EmptyState` `Steps`
Overlays	`Modal` `Sheet` `Toast`

There is no value-formatting tier: format a figure with Intl in the screen’s own code and hand the result to a <Text>. There is no Skeleton either, and DataTable is the only table. It sorts, filters, searches, paginates, resolves dot-path keys, and formats each cell.

What `vendo sync` captures

Two artifacts, both deterministic and byte-stable. Commit them.

catalog.json is what your components are called. .vendo/components/ is what they are.

catalog.json is what your components are called: names, prop schemas, descriptions, examples. A re-scan keeps description and example copy you edited by hand. components/ is what they are. Source is stored once per module and referenced by content hash, so a format-currency.ts that ten components import is stored once. The .vendo directory has every path.

Where the walk stops

The import walk follows your own code to closure with no depth limit, and stops at exactly two lines: anything resolving into node_modules, and 256 KB of source per component across the whole closure. Three packages are bundled into the sandbox itself, because they blocked almost everything and are tiny.

Bundled	What you get
`clsx`	The real package, pinned `2.1.1`
`tailwind-merge`	The real package, pinned `3.6.0`
`zod`	A zod-shaped shim for declaring schemas

The bundled zod is a shim, not zod. It resolves the declaration surface so your module loads, which is all a registry’s props: schema needs.It does not validate. .parse() and .safeParse() throw a named ZodShimError rather than returning a plausible wrong value.

When a component cannot be captured

Sync never goes quiet. The record on disk carries a machine-readable skipped.reason plus a sentence you can read.

`skipped.reason`	Meaning
`too-large`	The closure is over the 256 KB budget, and the record names the biggest module
`unsupported-imports`	The closure imports specifiers the sandbox cannot resolve, and the record names each one
`no-default-export`	Registered as a module’s default export, but the module has none
`default-export-conflict`	The module default-exports something else, so the registered binding cannot become the default
`in-package`	Declared inside `node_modules`
`no-named-declaration`	The registered value has no name to re-export

A component that could not be read at all this run is a different case. Sync leaves the previous capture exactly as it was and moves on.

How a preview draws

A preview has no data plane, so every query resolves to an empty list. Sync fills it from what you have already written, down three rungs.

Your examples

The first examples string that parses to a JSON object wins. A human’s example is real product data, and it reads better than anything Vendo could invent.

Generated from your props schema

Values synthesized from the schema: typed correctly, respecting enums, min, max, string formats, and optionality. Plausible rather than pretty.

An honest label

With neither, the capture records noSampleProps with a reason. The component still renders in your product, and previews as a labeled placeholder.

Generated values are seeded from the component’s name and each property path, so the same schema always produces the same values and your committed .vendo/components/ never churns. Sample props travel with the capture, so keep them realistic and non-sensitive.

Sending the corpus to Cloud

Sync asks once per project whether your component source may go to Vendo Cloud, so the console can render your real components instead of grey placeholders. It commits your answer.

.vendo/cloud.json

{ "pushComponents": true }

Crosses the wire	Never crosses
The source of every component you register	Package code
The source of every module in its import closure	Anything outside your project root
Your app-root stylesheets	Environment variables
The sample props the preview draws with	Live data

In CI, pass --push-components or --no-push-components. The CLI reference has every sync flag.

Get started

Vendo's Full-Stack Agent

In your existing agent

From outside agents

How to

Generated UI & apps

Make it yours

Capabilities

Production

Host components

Register your components

What a screen may name

What `vendo sync` captures

Where the walk stops

When a component cannot be captured

How a preview draws

Sending the corpus to Cloud

​Register your components

​What a screen may name

​What vendo sync captures

​Where the walk stops

​When a component cannot be captured

​How a preview draws

​Sending the corpus to Cloud

Register your components

What a screen may name

What `vendo sync` captures

Where the walk stops

When a component cannot be captured

How a preview draws

Sending the corpus to Cloud