SDK Quickstart

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>;
}

<template>
  <div id="app">Your app content</div>
</template>

<script>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    onMounted(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);
          }
        }
      });
    });

    return {};
  }
};
</script>

import { initUnifiedWidget } from 'navi-web';

document.addEventListener('DOMContentLoaded', () => {
  initUnifiedWidget({
    agentConfigId: 'your-agent-config-id',
    agentKey: 'your-agent-key',
    runTool: (toolName, args) => {
      if (toolName === 'navigate') {
        window.location.href = args.url;
      }
    }
  });
});

Required Parameters

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

Getting Started

Training Navi on Your Product

What can Navi do?

Integration

API Documentation

SDK Quickstart

Installation

Basic Setup

Framework Examples

Required Parameters

What’s Next?

​Installation

​Basic Setup

​Framework Examples

​Required Parameters

​What’s Next?

Installation

Basic Setup

Framework Examples

Required Parameters

What’s Next?