AI SDK

Keep your loop. Vendo adds the guarded tools and renders what they return.

Install and run init

npm install @vendoai/vendo
npx vendo init

pnpm add @vendoai/vendo
pnpm exec vendo init

Answer the first question with Through my own agent loop (AI SDK / Mastra), and take Vendo Cloud on the model one. Init reads your repo, writes the wire route, lands a VENDO_API_KEY in .env.local, and adds Vendo’s serverExternalPackages entries to your Next config.Init wrote lib/vendo.ts for you (src/lib/vendo.ts when your app lives under src/) — the createVendo call, and the caller resolver beside it, so your chat route, your wire route, and the pack all share one instance.

lib/vendo.ts

import { authJs } from "@vendoai/vendo/auth/auth-js";
import { createVendo } from "@vendoai/vendo/server";

const auth = authJs();
export const vendo = createVendo({ auth });
export const resolvePrincipal = (req: Request) => auth.principal(req);

Init wires whichever provider it detects — swap authJs() for another preset any time (Auth lists all five).With no provider yet, init wrote a demo principal in place of a preset, and the resolver beside it hands your chat route that same subject:

lib/vendo.ts

import { createVendo } from "@vendoai/vendo/server";

// init writes both — swap them for
// your real session lookup.
const principal = async () => ({
  kind: "user" as const,
  subject: "demo-user",
});
export const vendo = createVendo({ principal });
export const resolvePrincipal = (_req: Request) => principal();

Either way, your loop and your wire route have to resolve the same subject — a mismatch has no error; the embed just polls a screen it will never be shown (Auth).

Spread the tools in

app/api/chat/route.ts

import { convertToModelMessages, stepCountIs, streamText } from "ai";
import { vendoTools } from "@vendoai/vendo/ai-sdk";
import { resolvePrincipal, vendo } from "@/lib/vendo";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const caller = await resolvePrincipal(req);
  if (!caller) return new Response("Unauthorized", { status: 401 });
  return streamText({
    model: yourModel,            // your model, unchanged
    messages: await convertToModelMessages(messages),
    stopWhen: stepCountIs(5),    // the AI SDK stops after one step by default
    system: "…your system prompt as it is",
    tools: { ...yourTools, ...(await vendoTools(vendo, { principal: caller })) },
  }).toUIMessageStreamResponse();
}

vendoTools returns a Promise, so the pack is built per request, inside the handler. Every tool lands under a vendo_ prefix — one per registered host action, plus vendo_make (a live view) and vendo_delegate (a whole task for Vendo’s own agent); trim the pack with include or exclude by final tool name.

Render the embeds

app/page.tsx

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

// in your message-part renderer, for each finished tool part:
if (part.type === "dynamic-tool" && part.state === "output-available") {
  return <VendoToolResult key={key} output={part.output} />;
}

Nothing to wrap: the embed finds the wire at /api/vendo and rides your host session cookie. The shim declares every tool with dynamicTool, so they stream as dynamic-tool parts, and one component covers plain data, app refs, and approval refs. Full contract: Embeds in your chat.

See it live

Run your own chat and ask for something behind your API. The answer comes back as a working card, inside your own bubble.Init wrote VENDO_BASE_URL into .env.local; deployments set the same variable to the public URL, path prefix included (environment variables).

The AI SDK example chat answering a dashboard request with a generated weather comparison screen rendered inline in the assistant message

Apps in your product

Your agent can build apps now. Where they land in your product, and how to teach your model when to build one, is one more quickstart: Apps in your product.

The full example

examples/ai-sdk-agent is the stock AI SDK Next.js chatbot with this diff applied. Every added line sits between --- vendo and --- /vendo markers, so grep shows you the whole integration.

Get started

In your backend

Install with your agent

Vendo's Full-Stack Agent

In your existing agent

From outside agents

Generated UI & apps

Make it yours

Capabilities

Production

Users & orgs

Apps in your product

The full example

​Apps in your product

​The full example

Apps in your product

The full example