> ## 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.

# Generate screens

> Ask for a view, put a slot in one of your own pages, and pin the finished screen into your grid.

Ask your agent for something to look at and a real screen comes back, live on
your data. These three steps give one of those screens a permanent place in
your product.

<Note>
  This page picks up from a running install. If you have not mounted the panel
  yet, start at the [quickstart](/product/quickstart) — you need
  `<VendoProvider>` mounted, a model key, and your dev server running before
  step 1 will do anything.

  Run `npx vendo doctor` if you are not sure. A screen can only read a tool that
  answers without asking, so if doctor reports ungraded tools, run
  `npx vendo sync --ai` first.
</Note>

<Steps>
  <Step title="Ask the panel for a view">
    Ask in plain language. The screen builds in the thread, on your own API's data,
    in your brand.

    <Frame caption="One ask, one screen. The bar carries the placement action.">
      <img src="https://mintcdn.com/vendo/Bl9khJxYuQX2mLio/images/maple/panel-generated-screen.png?fit=max&auto=format&n=Bl9khJxYuQX2mLio&q=85&s=cff965fb9b6331ea7cd7e23d42099b03" alt="The Maple panel answering Show me my spending by category as a screen I can keep, with a generated screen holding the month's total of $9,117.72 above a ranked bar for each category, and an Add to… button in its header" width="620" height="680" data-path="images/maple/panel-generated-screen.png" />
    </Frame>

    One line in your brief tips the agent toward a screen when the answer is a
    shape rather than a sentence.

    ```md .vendo/brief.md theme={null}
    Prefer a useful generated view when a chart or table communicates the answer
    better than prose.
    ```

    That is the whole nudge. [Instructions](/howto/instructions) is the rest of the
    brief.
  </Step>

  <Step title="Put a slot in your page">
    A slot is a place in one of your own pages that a generated view can occupy. It
    comes from `@vendoai/vendo` itself, so there is nothing extra to install.

    ```tsx app/overview/page.tsx theme={null}
    "use client";

    import { VendoSlot } from "@vendoai/vendo/react";

    export default function Overview() {
      return (
        <section className="cards">
          {/* your own components */}
          <BalanceTiles />
          <VendoSlot
            id="spend-breakdown"
            emptyState={{
              suggestions: [
                "Show my spending by category",
                "Track my savings goals",
              ],
            }}
          />
          <RecentActivity />
        </section>
      );
    }
    ```

    Empty, it invites: a skeleton, up to three prompt chips that prefill the
    composer, and a button that opens the panel.

    <Frame>
      <img src="https://mintcdn.com/vendo/Bl9khJxYuQX2mLio/images/maple/slot-empty.png?fit=max&auto=format&n=Bl9khJxYuQX2mLio&q=85&s=1bb486d9c0f1152809abedb9badaab1f" alt="An empty slot in the Maple overview grid, showing a skeleton, three prompt chips, and a button that opens the panel" width="500" height="390" data-path="images/maple/slot-empty.png" />
    </Frame>

    [Slots](/product/mount-the-surface#slots) has the rest of the contract.
  </Step>

  <Step title="Pin it">
    The slot is the whole wiring. A slot that exists is already a destination, so
    every finished screen grows a placement action on its bar: a one-click **Pin to
    dashboard** with one slot in your product, an **Add to…** picker of your slots
    with several.

    Press it and reload the page. The screen holds that spot and re-runs on every
    open, so it opens on today's numbers.

    <Frame caption="Your page, your grid. The card in the middle is generated.">
      <img src="https://mintcdn.com/vendo/Bl9khJxYuQX2mLio/images/maple/slot-in-page.png?fit=max&auto=format&n=Bl9khJxYuQX2mLio&q=85&s=37fc26021c44470456a976f060337dc3" alt="Maple's overview page with its own quick actions, balance chart, and account tiles, and a generated spend by category card holding the slot beside them" width="1280" height="900" data-path="images/maple/slot-in-page.png" />
    </Frame>
  </Step>
</Steps>

## Good to know

* Every screen is compiled, scanned, type checked, and run once before anything
  paints. A refusal names the line, and the last good screen keeps serving.
  [What a screen may write](/generated/apps#what-a-screen-may-write).
* Pinning only gives a screen a place. Each one is already an app with its own
  id, kept in the person's own list, so an unpinned one can land in a slot
  later. [Generated apps](/generated/apps).
* Register your own React components and a generated screen renders your real
  UI instead of the built-in kit.
  [Host components](/generated/host-components).
* Nobody uses someone else's app. Sharing one mints a fresh copy that reads the
  new owner's rows under their approvals.
  [Import & fork](/generated/import-and-fork).
* A screen reads your API through your tools, so it needs their shapes. If
  `vendo init` reported `blind` tools, add an `openapi.json` at your app root
  and run `npx vendo sync` — without it a screen builds but paints "returned
  data in a shape this screen doesn't recognize".
* Pins are per person. Until you [wire auth](/howto/auth), every visitor is the
  same anonymous principal, so one person's pinned screen is everyone's.