Skip to main content
In the root of your Next.js App Router app: 
npm install vendoai
npx vendo init
That is the install. The codemod adds Vendo beside your existing code, the handler reads .vendo/ from disk at runtime, and nothing it cannot edit with certainty gets touched. init is interactive: it prompts for a provider key, then offers a picker of components to wrap and widgets to make remixable. The steps below walk the same flow from a fresh app.
1

Install Vendo

In a new app or an existing App Router app:
npx create-next-app@latest my-app
cd my-app
npm install vendoai
npx vendo init
vendo init prompts for a provider key, offers the component and remix pickers, writes reviewable files, and skips anything it cannot edit with certainty. Review the diff before you continue. init is safe to re-run: it fills gaps and never overwrites. Once installed, use vendo refresh to catch up as your app grows.
vendo init running the codemod against a Next.js app
2

Check what was added

On a standard App Router app, the codemod writes:
  • .vendo/theme.json, .vendo/tools.json, and component files under .vendo/components/.
  • app/api/vendo/[...path]/route.ts, the catch-all Vendo route.
  • app/vendo-root.tsx, then wraps your root layout with it.
  • instrumentation.ts or src/instrumentation.ts to start the scheduler in the Node.js runtime.
  • .env.example with provider, integration, storage, scheduler, and webhook variables.
  • public/vendo/react-runtime.js and public/vendo/components-sandbox.js.
  • A prebuild script that runs vendo sync. By default the sync runs via npx, which needs registry access at build time; add @vendoai/cli as a devDependency for hermetic or offline builds — the vendo bin picks it up automatically.
The generated route is:
import { createVendoHandler } from "vendoai/server";

export const runtime = "nodejs";
export const dynamic = "force-dynamic";

export const { GET, POST } = createVendoHandler();
3

Add one provider key

If you pasted a key at the init prompt, it is already saved to .env.local and you can skip this step. Otherwise, copy the generated example env file and set one model provider key by hand:
cp .env.example .env.local

ANTHROPIC_API_KEY=sk-ant-...
# or OPENAI_API_KEY=sk-...
# or GOOGLE_GENERATIVE_AI_API_KEY=...
One of those keys enables chat and generated UI. Vendo picks a provider from whichever key is set (precedence Anthropic, then OpenAI, then Google) and uses its default model — claude-sonnet-5, gpt-5.5, or gemini-3.5-flash. Additional keys add capabilities, but they are not required for the first view.
Added the key after running init? Run vendo refresh to run the LLM-assisted steps (tools, components, remix) that were skipped without a key.
4

Run the app

Start your app normally:
npm run dev
Open the app, click the Vendo launcher or press Cmd/Ctrl+K, then ask for a visual result, for example:
Show me a dashboard comparing three savings plans.
Vendo streams the response and renders the generated view in the sandbox.
Vendo rendering a generated dashboard from a chat prompt
The default route mount is /api/vendo. You can inspect the server-side feature flags at GET /api/vendo/capabilities.