Skip to main content

​
Installation

Install the Navigator SDK using npm: 
npm i navi-web

​
Basic Setup

Here’s the minimal code to get Navi running in your application: 
import { useEffect } from "react";
import { initUnifiedWidget } from "navi-web";

function App() {
  useEffect(() => {
    initUnifiedWidget({
      // Required
      agentConfigId: "your-agent-config-id",
      agentKey: "your-agent-key",
      
      // Minimal configuration
      chatEnabled: true,
      voiceEnabled: true,
    });
  }, []);

  return <div id="app">Your application content</div>;
}

​
Framework Examples

  • React
  • Vue.js
  • Vanilla JS
import { useEffect } from "react";
import { useRouter } from "next/router";

export default function App() {
  const router = useRouter();

  useEffect(() => {
    const initializeWidget = async () => {
      const sdk = await import("navi-web");
      
      sdk.initUnifiedWidget({
        agentConfigId: "your-agent-config-id",
        agentKey: "your-agent-key",
        runTool: (toolName, args) => {
          if (toolName === "navigate") {
            router.push(args.url);
          }
        }
      });
    };

    initializeWidget();
  }, []);

  return <div>Your app content</div>;
}

​
Required Parameters

  • agentConfigId: Your Navi agent configuration ID (get this from your dashboard)
  • agentKey: Your agent authentication key (minimum 10 characters)

​
What’s Next?