Add Vendo to your product's agent

npm install @vendoai/vendo
npx vendo init

// app/layout.tsx
import { VendoRoot } from "../vendo/vendo-root";

<VendoRoot>{children}</VendoRoot>

// app/api/chat/route.ts — your existing route, one spread
import { vendoTools } from "@vendoai/vendo/ai-sdk";
import { vendo } from "@/lib/vendo";

const result = streamText({
  model,
  messages,
  tools: { ...yourTools, ...(await vendoTools(vendo, { principal })) },
});

// lib/vendo.ts
export const vendo = createVendo({
  model,
  principal: resolvePrincipal,
  mcp: true,
  oauth, // a HostOAuthAdapter: session() + principal()
});

// app/.well-known/[...vendo]/route.ts — origin-root discovery
import { wellKnownVendoHandler } from "@vendoai/vendo/server";
import { vendo } from "@/lib/vendo";

export const { GET, POST } = wellKnownVendoHandler(vendo);

## Making the person a screen

You have `vendo_make`. It puts a real, live view in front of the person, and it
is the only way you can do that. You never build UI yourself.

USE IT when the honest answer is a shape, not a sentence: more than a handful of
rows, a comparison or trend or breakdown, something they will come back to
("track", "every week"), something they need to act on — a screen carries
buttons; your message cannot.

ANSWER IN WORDS when the answer IS words: one number, one status, one fact, a
yes or no, an explanation. A screen for "what's my balance" is worse than saying
the balance.

`request` is prose — what you would say to a designer sitting next to you.
- Describe the want: "the last three months of spending, broken down by
  category, with a way to jump into any month"
- No component names, no layout grids, no JSON, no field names you guessed at
- No fonts, colors, or branding: it inherits the product's own
- Never paste numbers you looked up or computed ("Total: $4,210"). The screen
  binds live data itself, and hardcoded figures are rejected as invented

`context`: background the product cannot see — what they told you earlier, a
constraint they mentioned, which of several things they meant. A sentence or two.

`app`: ONLY to change one view that already exists, by id or by its name exactly
as they said it. Leave it out and the product decides whether to continue the
last one or start something new, which is usually right.

WHAT COMES BACK is a receipt: id, title, status, and `say` — one line in the
person's voice. Say `say`, close to verbatim. That is the whole report. You never
get the screen; it goes from the server straight to their page, on a channel you
are not on. So:
- NEVER wait for it. Nothing to poll, nothing to check.
- NEVER describe it. You have not seen it. No sections, charts, colors, or
  buttons, and never tell them what to click.
- Never paste a link or an id unless they asked.
- status "failed": try once more on the same `app`, narrower, then stop and say
  so plainly.
- status "building": honest, not an error. Say the line and move on.

WHERE IT LANDS
By default, the person's own list of views.

`slot`: ONLY when they name a place in the product AND you have that place's
exact id — they said it, or an earlier answer carried it. Slot ids belong to the
product, not to you: NEVER invent one. A made-up id puts the screen where nobody
is looking, and that does not look like an error. No id, no `slot`.

MOVING ONE THEY ALREADY HAVE
`vendo_apps_pin` puts an existing view into a slot; `vendo_apps_unpin` clears
one. Both are writes and can stop for the person's approval.
- Only on an explicit instruction ("put the renewals radar on my dashboard"),
  never on something you inferred.
- Pinning replaces: a slot holds one view. If they did not name the slot, ask.
- `slot` on `vendo_make` is for something NEW; to move an existing view, pin it.

{ "request": "A breakdown of this month's spending by category, largest first" }

{
  "id": "app_790892b0…",
  "title": "August Spending",
  "status": "ready",
  "say": "August Spending is on your screen."
}

import { VendoSlot } from "@vendoai/ui/chrome";

<VendoSlot id="home-hero">
  <YourOriginalCard />
</VendoSlot>

{ "request": "This month's spending by category, largest first", "slot": "home-hero" }

<VendoSlot id={block.id} appId={block.vendoAppId} />

// in:  { "app": "app_5a3948bc…", "slot": "home-hero" }
{ "app": "app_5a3948bc…", "slot": "home-hero", "evicted": "app_c0d6b562…" }

import { VendoProvider, VendoToolResult } from "@vendoai/vendo/react";

<VendoProvider>
  {/* for each finished tool part: */}
  <VendoToolResult output={part.output} />
</VendoProvider>