Web Integration

import type { NavaiRoute } from "@navai/voice-frontend";

export const NAVAI_ROUTE_ITEMS: NavaiRoute[] = [
  {
    name: "inicio",
    path: "/",
    description: "Landing page with instructions and status",
    synonyms: ["home", "principal", "start"]
  },
  {
    name: "perfil",
    path: "/profile",
    description: "User profile area",
    synonyms: ["profile", "mi perfil", "account"]
  },
  {
    name: "ajustes",
    path: "/settings",
    description: "Preferences and app settings",
    synonyms: ["settings", "configuracion", "configuration", "config"]
  },
  {
    name: "ayuda",
    path: "/help",
    description: "Help and troubleshooting page",
    synonyms: ["help", "soporte", "support"]
  }
];

import { useWebVoiceAgent } from "@navai/voice-frontend";
import { useNavigate } from "react-router-dom";
import { NAVAI_WEB_MODULE_LOADERS } from "../ai/generated-module-loaders";
import { NAVAI_ROUTE_ITEMS } from "../ai/routes";

export type VoiceNavigatorProps = {
  apiBaseUrl?: string;
};

export function VoiceNavigator({ apiBaseUrl }: VoiceNavigatorProps) {
  const navigate = useNavigate();
  const agent = useWebVoiceAgent({
    navigate,
    apiBaseUrl,
    moduleLoaders: NAVAI_WEB_MODULE_LOADERS,
    defaultRoutes: NAVAI_ROUTE_ITEMS,
    env: import.meta.env as Record<string, string | undefined>
  });

  return (
    <section className="voice-card" aria-live="polite">
      <div className="voice-row">
        {!agent.isConnected ? (
          <button
            className="voice-button start"
            onClick={() => void agent.start()}
            disabled={agent.isConnecting}
          >
            {agent.isConnecting ? "Connecting..." : "Start Voice"}
          </button>
        ) : (
          <button className="voice-button stop" onClick={agent.stop}>
            Stop Voice
          </button>
        )}
        <p className="voice-status">Status: {agent.status}</p>
      </div>

      {agent.error ? <p className="voice-error">{agent.error}</p> : null}
    </section>
  );
}

import { Link, Route, Routes, useLocation } from "react-router-dom";
import { HomePage } from "./pages/HomePage";
import { ProfilePage } from "./pages/ProfilePage";
import { SettingsPage } from "./pages/SettingsPage";
import { HelpPage } from "./pages/HelpPage";
import { NAVAI_ROUTE_ITEMS } from "./ai/routes";
import { VoiceNavigator } from "./voice/VoiceNavigator";

function HeaderNav() {
  const location = useLocation();

  return (
    <nav className="top-nav" aria-label="Main navigation">
      {NAVAI_ROUTE_ITEMS.map((route) => {
        const active = route.path === location.pathname;
        return (
          <Link
            key={route.path}
            to={route.path}
            className={active ? "top-nav-link active" : "top-nav-link"}
          >
            {route.name}
          </Link>
        );
      })}
    </nav>
  );
}

export function App() {
  return (
    <div className="app-shell">
      <header className="hero">
        <h1>Voice-first app navigation</h1>
        <p>
          Say: "llevame a perfil", "abre ajustes" or "cierra sesion". The agent can
          navigate routes and execute internal app functions through tools.
        </p>
        <HeaderNav />
        <VoiceNavigator />
      </header>

      <main className="page-wrap">
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="/settings" element={<SettingsPage />} />
          <Route path="/help" element={<HelpPage />} />
        </Routes>
      </main>
    </div>
  );
}