Routing

VableAI can navigate your React app on the user's behalf. You tell the SDK which routes exist — the AI agent handles the rest when the user says something like "take me to my account" or "open settings".

Overview

Setup has two steps:

1. Pass your routes to the Vable component via the routes prop
2. Use VableNavigation as the root route element so Vable can intercept navigation events

Setting up VableNavigation

VableNavigation wraps React Router's Outlet and listens for navigation events from the AI agent. It must be the element of your root/layout route.

import { VableNavigation } from "@vableai/react";

const routes = [
  {
    path: "/",
    element: <VableNavigation />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/account", element: <Account /> },
      { path: "/settings", element: <Settings /> },
    ],
  },
];

Then pass the routes to the Vable component:

import { Vable } from "@vableai/react/init";

function App() {
  return (
    <Vable publicKey="<replace_with_public_key>" routes={routes}>
      {/* your app */}
    </Vable>
  );
}

How it works

When the AI agent determines the user wants to navigate:

1. The vable-chat widget dispatches a vableNavigationEvent with the target URL
2. VableNavigation receives the event and validates the URL against your declared routes
3. If the route exists, it calls navigate(url, { replace: true }) via React Router
4. If the URL points to a different hostname, it opens the link in the current tab

Route validation

VableNavigation only navigates to routes that exist in your route configuration. If the AI suggests a route that doesn't match any declared path, the navigation is ignored and an error is logged.

This prevents the AI from navigating to arbitrary URLs within your app.

External URLs

If the AI agent provides a full URL with a different hostname (e.g. a documentation link or external resource), VableNavigation opens it in the current tab using window.open instead of using React Router.

Full Example

import { Vable } from "@vableai/react/init";
import { VableNavigation } from "@vableai/react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const routes = [
  {
    path: "/",
    element: <VableNavigation />,
    children: [
      { index: true, element: <Home /> },
      { path: "account", element: <Account /> },
      { path: "settings", element: <Settings /> },
    ],
  },
];

const router = createBrowserRouter(routes);

function App() {
  return (
    <Vable publicKey="<replace_with_public_key>" routes={routes}>
      <RouterProvider router={router} />
    </Vable>
  );
}