CDN Quickstart

import { useEffect } from "react";
import { useRouter } from "next/router";

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

  useEffect(() => {
    // Load script dynamically
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js';
    script.defer = true;
    
    script.onload = () => {
      window.Navi.initUnifiedWidget({
        agentConfigId: 'your-agent-config-id',
        agentKey: 'your-agent-key',
        runTool: (toolName, args) => {
          if (toolName === 'navigate') router.push(args.url);
        }
      });
    };
    
    document.head.appendChild(script);
    
    return () => {
      if (document.head.contains(script)) {
        document.head.removeChild(script);
      }
    };
  }, [router]);

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

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

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
let scriptElement = null

onMounted(() => {
  scriptElement = document.createElement('script')
  scriptElement.src = 'https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js'
  scriptElement.defer = true
  
  scriptElement.onload = () => {
    window.Navi.initUnifiedWidget({
      agentConfigId: 'your-agent-config-id',
      agentKey: 'your-agent-key',
      runTool: (toolName, args) => {
        if (toolName === 'navigate') router.push(args.url)
      }
    })
  }
  
  document.head.appendChild(scriptElement)
})

onUnmounted(() => {
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement)
  }
})
</script>