Apps in your product

Teach your model when to build an app, put a slot in one of your own pages, and pin a finished app into it.

Every app your agent makes already renders where the conversation is: inline in your own chat if you wired the embeds, or in Vendo’s panel on the in-product track. That needs nothing more than what you already have.

This page is for what a conversation cannot do. A chat bubble scrolls away — these three steps give a generated app a permanent place in your product.

1. Teach your model when to build UI

   A tool your model never reaches for is not a feature, so paste this beside whatever you already say about your other tools.

   your agent's system prompt

   ## 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.
   
   `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`, and it lands
   in the person's own list of views.
   
   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.
   - status "partial": the screen is on their page, the server-side part of it is
     not. Say the line and offer to try that part again. Never rebuild it.
   

   Those slot ids are yours to publish, and the next step makes one.

   The same guidance ships to Claude Code as a skill, examples/claude-code-plugin/skills/make-a-screen.

   Skip this step on the in-product track — Vendo’s own agent already carries this guidance.

2. Put a slot in your page

   "use client";
   
   import { VendoSlot } from "@vendoai/vendo/react";
   
   <VendoSlot
     id="spend-breakdown"
     emptyState={{
       suggestions: [
         "Show my spending by category",
         "Track my savings goals",
       ],
     }}
   />
   

   A slot is a place in one of your own pages that a generated view can occupy. Empty, it invites; filled, the view mounts in place.

   

   
3. Pin something

   The slot is the whole wiring. Once one is mounted, every finished app grows a placement action on its bar — in Vendo’s panel and on the embed card in your own chat alike. With one slot in your product that is a one-click Pin to dashboard; with several, the same button is an Add to… picker and the person chooses.

   Ask for a dashboard, press Pin to dashboard, and reload the page. It is in your product now.

The full story

Generated apps is what an app may do, host components puts your own React inside one, and import & fork mints a copy. Slots has the rest of the slot contract.