Page Navigation enables your AI agent to navigate users to different pages in your application. Define your routes on the dashboard or let Ourguide auto-generate them from your website crawl — no code required.
Auto-Generated Routes from Website Crawl
When you crawl your website via Knowledge Base → Website, Ourguide automatically generates page navigation routes from the crawled pages. Here’s what happens:
- Every crawled page URL is extracted and deduplicated
- An AI analyzes each page’s content, title, and path to generate a human-readable name and description
- The routes are saved to your product and immediately available to the agent
This means if you’ve already added your website to the Knowledge Base, your routes are likely already set up — no manual configuration needed.
Auto-generated routes replace any existing routes for the product each time you re-crawl. If you need to keep manually added routes, add them after the crawl completes.
Manual Setup (Dashboard)
- Go to Page Navigation in your dashboard
- Enable the Page Navigation toggle
- Add your application’s routes (or review the auto-generated ones from your website crawl)
- Click Save
Defining Routes
Each route has:
| Field | Required | Description |
|---|
| Name | Yes | A unique identifier (e.g. user_profile, dashboard) |
| Path | Yes | The URL path pattern (e.g. /users/:userId) |
| Description | No | What this page shows — helps the AI decide when to navigate |
| Parameters | Auto-detected | Descriptions for dynamic URL segments |
Static Routes
For pages with fixed URLs, just provide the name, path, and description:
| Name | Path | Description |
|---|
dashboard | /dashboard | Main dashboard |
settings | /settings/general | App settings |
Dynamic Routes
Use :paramName syntax for URL segments that change. The AI fills in parameter values from conversation context.
| Name | Path | Parameters |
|---|
user_profile | /users/:userId | userId — The user’s unique ID |
order_detail | /orders/:orderId | orderId — The order number |
project_task | /projects/:projectId/tasks/:taskId | projectId, taskId |
How the AI Gets Dynamic Parameters
The AI resolves parameter values from context — you don’t need to hardcode IDs:
- From conversation — “Go to John’s profile” after the user mentioned John earlier
- From API results — A previous tool call returned a list of users with their IDs
- From user input — “Navigate to order #ORD-4521”
- From screen context — If Screen Context is enabled, the AI can read IDs from the current page
How Navigation Works
By default, when the AI calls navigateToPage, the SDK resolves the route name to a URL path and navigates using window.location.href. This works universally with any framework but triggers a full page load.
For single-page applications (React, Next.js, Vue, etc.), you can pass a navigate prop to use your framework’s router instead — giving you instant SPA navigation with no page reloads.
SPA Navigation
Pass your framework’s router function via the navigate prop. The SDK handles route resolution — your function just receives the final path.
import { useNavigate } from 'react-router-dom';
import { OurguideWidget } from '@ourguide/react';
function App() {
const navigate = useNavigate();
return (
<OurguideWidget
productId="your-product-id"
navigate={(path) => navigate(path)}
/>
);
}
The navigate prop only controls how navigation executes. Your route definitions on the dashboard still power the AI’s awareness of what pages exist and how to resolve dynamic parameters.
Best Practices
- Write clear descriptions — “User profile page showing account details and activity” is better than “Profile”
- Describe parameters — Help the AI understand what values are expected (e.g. “The user’s UUID from the users API”)
- Start with key pages — Add your most-navigated pages first, expand later
- Test in Sandbox — Try asking the agent to navigate and verify it works before deploying
