Getting Started

Navieo adds AI-powered guided tours to your web application. Users ask questions in a chat widget and get step-by-step visual tours that highlight the right UI elements — no manual tour authoring needed.

Prerequisites

• React 18 or 19 application
• A Navieo account — sign up at navieo.io/dashboard to get your API key

Installation

Install the Navieo React SDK and CLI:

npm install @navieo/react
npm install -D @navieo/cli

Or with your preferred package manager:

pnpm add @navieo/react
pnpm add -D @navieo/cli

Quick Setup

1. Wrap your app

Add NavieoProvider to your root layout. No props required — the SDK auto-detects routing and connects to Navieo's API automatically:

import { NavieoProvider } from "@navieo/react";

export default function Layout({ children }) {
  return (
    <NavieoProvider>
      {children}
    </NavieoProvider>
  );
}

That's it. A floating chat widget will appear in the bottom-right corner of your app.

2. Set your API key

Add your API key (from the dashboard) to your environment:

NEXT_PUBLIC_NAVIEO_PUBLISHABLE_KEY=nv_pub_your_key_here

The SDK reads this automatically and sends it as an x-api-key header with each request.

3. Generate and sync your sitemap

The CLI scans your codebase and syncs your app's structure to Navieo so the AI knows about your routes and UI elements:

# Scan your codebase and generate the sitemap
npx navieo init

# Review navieo/sitemap.navieo.json, then push to Navieo
NAVIEO_SECRET_KEY=nv_secret_your_key_here npx navieo push

4. Optional: SPA navigation

For frameworks with client-side routing (Next.js, React Router, etc.), pass your router's push function for smooth navigation without full page reloads:

// Next.js
"use client";
import { NavieoProvider } from "@navieo/react";
import { useRouter } from "next/navigation";

export function Providers({ children }) {
  const router = useRouter();

  return (
    <NavieoProvider onNavigate={(route) => router.push(route)}>
      {children}
    </NavieoProvider>
  );
}

Or use the Next.js convenience wrapper that handles this automatically:

"use client";
import { NavieoNextProvider } from "@navieo/react/next";

export default function Layout({ children }) {
  return (
    <NavieoNextProvider>
      {children}
    </NavieoNextProvider>
  );
}

Uninstalling Navieo

If you need to remove Navieo from your project, follow these steps to cleanly uninstall everything — both client-side and server-side.

1. Delete the app from the dashboard

Go to your Navieo dashboard, open the app, scroll to the Danger Zone, and click Delete App. This permanently removes all server-side data:

• Sitemap and route data
• Document embeddings and vector indexes
• Query analytics and history
• The API key (immediately invalidated)

Important: Do this first. Once you remove the SDK from your code, you'll no longer have easy access to your app ID.

2. Remove the SDK from your code

Remove the NavieoProvider (or NavieoNextProvider) wrapper from your root layout:

- import { NavieoProvider } from "@navieo/react";

  export default function Layout({ children }) {
    return (
-     <NavieoProvider>
        {children}
-     </NavieoProvider>
    );
  }

Also remove the NEXT_PUBLIC_NAVIEO_PUBLISHABLE_KEY entry from your .env / .env.local file.

3. Remove local Navieo files

Delete the generated config and sitemap files from your project:

rm -rf navieo/          # Sitemap, docs, sync snapshot
rm -f .navieorc         # Optional visibility config (if you created one)

4. Uninstall the packages

npm uninstall @navieo/react @navieo/cli

Or with pnpm:

pnpm remove @navieo/react @navieo/cli

That's it. Navieo leaves no background processes, service workers, or global state behind. Once these steps are complete, your application is fully clean.

What's Next

1. Provider Setup — All available props and the useNavieo hook
2. Sitemap Configuration — Define your app's routes and elements for the AI
3. CLI Reference — Commands for scanning, generating, and syncing
4. Themes — Customize the widget's look and feel