Skip to content
Agentic UI Kit
Buy

Guide

Use Agentic UI Kit with Vite, React Router or TanStack Start

The kit's components are written once, for Next.js. In any other supported React app the CLI adds a small adapter, so the same files build and run there, and it writes each blueprint's routes in your router's own convention.

How it works

agentic-ui setup (and init) detects the framework from package.json. Next.js needs nothing. Anywhere else it writes:

  • local versions of next/link, next/image, next/navigation and next/dynamic in lib/agentic-ui/framework/, built on your router (React Router, TanStack Router, or the History API when there is none);
  • agentic-ui.vite.ts, a Vite plugin added to vite.config that points those imports at the local versions and reads NEXT_PUBLIC_* values from your .env files;
  • a @/* path in tsconfig when the project uses another alias (kit files import @/…), and rsc: false in components.json.

Installed files keep their Next.js imports, so an update replaces them cleanly. Do not rewrite those imports, and do not add next as a dependency.

What is supported

  • Next.js (App Router)

    Versions
    Next.js 16, React 19
    Adapter
    None: files run as shipped
    Blueprint routes
    app/<route>/page.tsx and layout.tsx
    Checked
    Every blueprint installs and builds in a clean project, in both variants

  • Vite + React Router (library or data mode)

    Versions
    Vite 8, React Router 7 or 8, React 19
    Adapter
    agentic-ui.vite.ts in vite.config
    Blueprint routes
    src/agentic-ui/routes.tsx, spread into createBrowserRouter
    Checked
    Components, a block and a blueprint install, type-check, build and render in a fresh app, in both variants (React Router 7)

  • React Router framework mode

    Versions
    React Router 7 or 8, React 19
    Adapter
    agentic-ui.vite.ts in vite.config
    Blueprint routes
    Route modules in app/routes (flatRoutes), or app/agentic-ui-routes.ts spread into app/routes.ts
    Checked
    Components, a block and a blueprint install, type-check, build and render in a fresh app, in both variants (React Router 7, server rendering on)

  • TanStack Start, or TanStack Router with file routes

    Versions
    TanStack Start 1.x, Vite 8, React 19
    Adapter
    agentic-ui.vite.ts in vite.config
    Blueprint routes
    File routes in src/routes/<route>/ (route.tsx and index.tsx)
    Checked
    Components, a block and a blueprint install, type-check, build and render in a fresh app, in both variants (TanStack Start; TanStack Router alone uses the same adapter and routes)

  • Vite + React without a router

    Versions
    Vite 8, React 19
    Adapter
    agentic-ui.vite.ts in vite.config
    Blueprint routes
    Components and blocks only: a blueprint needs a router
    Checked
    Every Next.js import in the catalog is covered by its adapter; not part of the fresh-app install check

Not supported: Create React App, Remix v2, Gatsby, Astro, React Native and React 18 or older. The CLI says so and stops before it writes anything. Setup details for each framework are in the guide Use Agentic UI Kit with Vite, React Router or TanStack Start.

Vite + React Router

Start from pnpm create vite (React, TypeScript) with Tailwind CSS 4, the @/* path from the shadcn Vite steps and react-router. Setup adds the plugin and spreads the blueprint routes into your createBrowserRouter([...]) call. If your router is built elsewhere, it prints the one line to add.

In your project folder
agentic-ui setup
agentic-ui add blueprint-collection-manager
pnpm build

Blueprint pages land in src/agentic-ui/pages/ and their routes in src/agentic-ui/routes.tsx, which exports agenticUiRoutes. Without a router, components and blocks install fine; a blueprint asks you to add React Router first.

React Router framework mode

Works with the default pnpm create react-router app. Blueprint routes are route modules in app/routes/: with flatRoutes() they are picked up as files; with a route list, setup adds ...agenticUiRoutes to app/routes.ts once.

In your project folder
agentic-ui setup
agentic-ui add blueprint-collection-manager
pnpm build

TanStack Start and TanStack Router

Blueprint routes are file routes in src/routes/<route>/: route.tsx for the layout and index.tsx for each screen. The route tree is regenerated by your next vite dev or vite build. TanStack Router without file routes takes components only.

In your project folder
agentic-ui setup
agentic-ui add blueprint-collection-manager
pnpm build

What differs from Next.js

  • Install blueprints with agentic-ui add. Plain npx shadcn add works for components once setup has run, but it skips a blueprint's pages outside Next.js.
  • Images are plain <img> tags with the same props: there is no image optimization server, and fill, sizes and priority keep their layout and loading behavior.
  • Generated route files say so in their first line. Edit the pages in agentic-ui/pages/; the CLI never overwrites a route file you wrote.
  • If your tsconfig turns on noUnusedLocals or noUnusedParameters (Vite's template does), setup tells you: kit files are checked with them on, but if one trips them, fix the reported line or turn the flag off.

Example prompt

Paste into your agent
Install Agentic UI Kit in this project, then build one screen with it.
Run agentic-ui setup --client detect, then agentic-ui mcp check.
Search the catalog first (understand_project, then find_reusable_ui) and install what fits with agentic-ui add.

The agent sees the framework too: understand_project reports it with these rules. The full install flow is in Docs.