Quick Start

Get Voxide up and running in a Next.js App Router project in less than 5 minutes.

#1. Create a Client Component

The Voxide Widget relies on browser APIs (WebSockets and AudioContext). Therefore, it must be rendered in a Client Component.

tsx

"use client";
 
import { DoweitClient, DoweitWidget } from "@voxide/react";
import { useEffect, useState } from "react";
 
const ai = new DoweitClient({ publicKey: "vox_pub_live_xxx" });
 
export function AiAssistant() {
  const [ready, setReady] = useState(false);
 
  useEffect(() => {
    ai.init().then(() => setReady(true));
  }, []);
 
  if (!ready) return null;
  return <DoweitWidget client={ai} />;
}

#2. Mount in Layout

Drop the component into your root `layout.tsx` so the assistant persists seamlessly as the user navigates across different pages.

tsx

import { AiAssistant } from "@/components/AiAssistant";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <AiAssistant />
      </body>
    </html>
  );
}

← Introduction Next: Action Execution