@voxide/react

Introduction to Voxide

Voxide is a capability-first Voice AI SDK for the web. Instead of building complex backend conversational agents, Voxide allows you to expose your existing client-side JavaScript functions to a Gemini-powered Live AI.

React and Next.js get the prebuilt widget: chat panel, voice bar, orb. Vue, Svelte, Angular, Django, Rails, WordPress and plain HTML run the same client without React, headless, drawing their own interface. See Other Frameworks.

Client-Side Architecture

Voxide executes tools directly in the browser. This means your AI has instant, authenticated access to your router, your local state (like shopping carts), and your user's current session token without complex proxy routing.

Fastest path

Prefer to skip setup? Paste one prompt into your AI coding assistant (Claude Code, Cursor, Codex, Windsurf…) and it wires Voxide into your app for you. See AI-assisted setup — or watch our founder do it start to finish in the guide video.

#Installation

Install the @voxide/react package. It bundles the client and the drop-in chat widget, nothing else to add. (view on npm ↗)

bash

npm install @voxide/react@latest

Without React, skip npm entirely and load the client from a script tag, or import @voxide/react/core if you already have a bundler. Both are covered in Other Frameworks.

#Initialization

Instantiate the VoxideClient with your publishable key (Voxide dashboard → project → Integration). Then register capabilities and drop in VoxideWidget.

typescript

import { VoxideClient, VoxideWidget } from "@voxide/react";
 
// Initialize the client
const ai = new VoxideClient({
  publicKey: "vox_pub_...",
});

Security Notice

Your publishable key is safe to expose in your frontend code, but you must configure your Domain Whitelist in the Voxide Dashboard. Voxide uses strict CORS policies to reject WebSocket connections originating from unauthorized domains.

Next: Quick Start