Routing

VableAI can navigate your Vue 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 component so Vable can intercept navigation events

Setting up VableNavigation

VableNavigation wraps Vue Router's <router-view> and listens for navigation events from the AI agent. It must be the component of your root/layout route.

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

const routes = [
  {
    path: "/",
    component: VableNavigation,
    children: [
      { path: "", component: () => import("./pages/Home.vue") },
      { path: "account", component: () => import("./pages/Account.vue") },
      { path: "settings", component: () => import("./pages/Settings.vue") },
    ],
  },
];

Then pass the routes to the Vable component:

<template>
  <Vable public-key="<replace_with_public_key>" :routes="routes">
    <RouterView />
  </Vable>
</template>

<script setup>
import { Vable } from "@vableai/vue/init";
import { routes } from "./router";
</script>

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 router.push(url) via Vue 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 Vue Router.

Full Example

// router.ts
import { createRouter, createWebHistory } from "vue-router";
import { VableNavigation } from "@vableai/vue";

export const routes = [
  {
    path: "/",
    component: VableNavigation,
    children: [
      { path: "", component: () => import("./pages/Home.vue") },
      { path: "account", component: () => import("./pages/Account.vue") },
      { path: "settings", component: () => import("./pages/Settings.vue") },
    ],
  },
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

<!-- App.vue -->
<template>
  <Vable public-key="<replace_with_public_key>" :routes="routes">
    <RouterView />
  </Vable>
</template>

<script setup>
import { Vable } from "@vableai/vue/init";
import { routes } from "./router";
</script>