> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trynavi.guide/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK Quickstart

> Get started with Navi SDK in 5 minutes

## Installation

Install the Navigator SDK using npm:

```bash theme={null}
npm i navi-web
```

## Basic Setup

Here's the minimal code to get Navi running in your application:

```javascript theme={null}
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

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    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>;
    }
    ```
  </Tab>

  <Tab title="Vue.js">
    ```javascript theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Vanilla JS">
    ```javascript theme={null}
    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;
          }
        }
      });
    });
    ```
  </Tab>
</Tabs>

## Required Parameters

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

## What's Next?

* [View all configuration options →](/integration/configurations)
* [Add user context and tracking →](/integration/configurations#user-context)
* [Customize widget appearance →](/integration/configurations#customization)
* [Configure multiple languages →](/integration/configurations#languages)