@ai-chans/sdk-react 0.2.0

package/README.md

@@ -0,0 +1,213 @@
+# chans-sdk-react
+
+React components and hooks for [chans.ai](https://chans.ai) voice AI.
+
+## Installation
+
+```bash
+npm install chans-sdk-react
+```
+
+Requires React 18 or 19.
+
+## Quick Start
+
+### Default UI
+
+Drop in a ready-to-use voice button:
+
+```tsx
+import { ChansVoice } from "chans-sdk-react"
+
+function App() {
+  return (
+    <ChansVoice
+      agentToken="agt_your_token"
+      onTranscript={(text) => console.log("User:", text)}
+      onResponse={(text) => console.log("Agent:", text)}
+    />
+  )
+}
+```
+
+### Custom UI
+
+Build your own interface with render props:
+
+```tsx
+import { ChansVoice } from "chans-sdk-react"
+
+function App() {
+  return (
+    <ChansVoice agentToken="agt_your_token" autoConnect={false}>
+      {({ state, isConnected, connect, disconnect, error }) => (
+        <div>
+          <p>Status: {state}</p>
+
+          <button
+            onClick={isConnected ? disconnect : connect}
+            disabled={state === "connecting"}
+          >
+            {isConnected ? "Stop" : "Start"}
+          </button>
+
+          {error && <p className="error">{error.message}</p>}
+        </div>
+      )}
+    </ChansVoice>
+  )
+}
+```
+
+### useChans Hook
+
+Access voice state from nested components:
+
+```tsx
+import { ChansVoice, useChans } from "chans-sdk-react"
+
+function VoiceButton() {
+  const { state, connect, disconnect, isConnected } = useChans()
+
+  return (
+    <button onClick={isConnected ? disconnect : connect}>
+      {state === "listening" ? "Listening..." :
+       state === "speaking" ? "Speaking..." : "Start"}
+    </button>
+  )
+}
+
+function App() {
+  return (
+    <ChansVoice agentToken="agt_your_token" autoConnect={false}>
+      {() => <VoiceButton />}
+    </ChansVoice>
+  )
+}
+```
+
+## API Reference
+
+### ChansVoice Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `agentToken` | `string` | *required* | Agent token from dashboard |
+| `userId` | `string` | — | End-user ID for conversation segmentation |
+| `apiUrl` | `string` | `https://api.chans.ai` | API endpoint |
+| `autoConnect` | `boolean` | `true` | Auto-connect on mount |
+| `onTranscript` | `(text: string) => void` | — | User speech transcribed |
+| `onResponse` | `(text: string) => void` | — | Agent response received |
+| `onStateChange` | `(state: ChansState) => void` | — | State changed |
+| `onError` | `(error: Error) => void` | — | Error occurred |
+| `onConnected` | `() => void` | — | Connected to agent |
+| `onDisconnected` | `() => void` | — | Disconnected |
+| `children` | `(props: RenderProps) => ReactNode` | — | Custom render function |
+| `className` | `string` | — | CSS class for wrapper |
+
+### Render Props
+
+When using `children` as a function:
+
+```typescript
+interface ChansVoiceRenderProps {
+  state: ChansState
+  isConnected: boolean
+  connect: () => Promise<void>
+  disconnect: () => Promise<void>
+  error: Error | null
+}
+```
+
+### useChans Hook
+
+Returns the same props as render props. Must be used inside a `ChansVoice` component.
+
+```typescript
+const { state, isConnected, connect, disconnect, error } = useChans()
+```
+
+### ChansState
+
+```typescript
+type ChansState =
+  | "idle"        // Not connected
+  | "connecting"  // Connecting
+  | "connected"   // Connected, initializing
+  | "listening"   // Listening for speech
+  | "speaking"    // Agent speaking
+  | "error"       // Error occurred
+```
+
+## Examples
+
+### Chat with Transcript
+
+```tsx
+import { useState } from "react"
+import { ChansVoice } from "chans-sdk-react"
+
+function Chat() {
+  const [messages, setMessages] = useState<Array<{role: string, text: string}>>([])
+
+  return (
+    <div>
+      <div className="messages">
+        {messages.map((m, i) => (
+          <p key={i}><b>{m.role}:</b> {m.text}</p>
+        ))}
+      </div>
+
+      <ChansVoice
+        agentToken="agt_your_token"
+        onTranscript={(text) =>
+          setMessages(prev => [...prev, { role: "You", text }])
+        }
+        onResponse={(text) =>
+          setMessages(prev => [...prev, { role: "Agent", text }])
+        }
+      />
+    </div>
+  )
+}
+```
+
+### Manual Connect/Disconnect
+
+```tsx
+import { ChansVoice } from "chans-sdk-react"
+
+function App() {
+  return (
+    <ChansVoice agentToken="agt_your_token" autoConnect={false}>
+      {({ state, connect, disconnect }) => (
+        <div>
+          {state === "idle" ? (
+            <button onClick={connect}>Start Conversation</button>
+          ) : (
+            <>
+              <p>State: {state}</p>
+              <button onClick={disconnect}>End Conversation</button>
+            </>
+          )}
+        </div>
+      )}
+    </ChansVoice>
+  )
+}
+```
+
+## Self-Hosted
+
+Point to your own chans.ai instance:
+
+```tsx
+<ChansVoice
+  agentToken="agt_your_token"
+  apiUrl="https://your-instance.com"
+/>
+```
+
+## License
+
+Apache 2.0

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import { ChansState } from "@chozzz/chans-sdk-js";
+export type { ChansState } from "@chozzz/chans-sdk-js";
+export interface ChansVoiceProps {
+    /**
+     * Agent token from chans.ai dashboard
+     */
+    agentToken: string;
+    /**
+     * Optional end-user ID for conversation segmentation
+     */
+    userId?: string;
+    /**
+     * API URL (defaults to https://api.chans.ai)
+     */
+    apiUrl?: string;
+    /**
+     * Auto-connect on mount (default: true)
+     */
+    autoConnect?: boolean;
+    /**
+     * Called when user's speech is transcribed
+     */
+    onTranscript?: (text: string) => void;
+    /**
+     * Called when agent responds
+     */
+    onResponse?: (text: string) => void;
+    /**
+     * Called when state changes
+     */
+    onStateChange?: (state: ChansState) => void;
+    /**
+     * Called on error
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Called when connected
+     */
+    onConnected?: () => void;
+    /**
+     * Called when disconnected
+     */
+    onDisconnected?: () => void;
+    /**
+     * Custom render function for the voice UI
+     */
+    children?: (props: ChansVoiceRenderProps) => React.ReactNode;
+    /**
+     * CSS class name
+     */
+    className?: string;
+}
+export interface ChansVoiceRenderProps {
+    state: ChansState;
+    isConnected: boolean;
+    connect: () => Promise<void>;
+    disconnect: () => Promise<void>;
+    error: Error | null;
+}
+type ChansContextValue = ChansVoiceRenderProps;
+/**
+ * Hook to access ChansVoice state from child components
+ */
+export declare function useChans(): ChansContextValue;
+/**
+ * ChansVoice - React component for chans.ai voice AI
+ *
+ * @example
+ * ```tsx
+ * <ChansVoice
+ *   agentToken="agt_xxx"
+ *   userId="user-123"
+ *   onTranscript={(text) => console.log("User:", text)}
+ *   onResponse={(text) => console.log("Agent:", text)}
+ * />
+ * ```
+ *
+ * @example Custom UI
+ * ```tsx
+ * <ChansVoice agentToken="agt_xxx">
+ *   {({ state, connect, disconnect }) => (
+ *     <button onClick={state === "idle" ? connect : disconnect}>
+ *       {state === "idle" ? "Start" : "Stop"}
+ *     </button>
+ *   )}
+ * </ChansVoice>
+ * ```
+ */
+export declare function ChansVoice({ agentToken, userId, apiUrl, autoConnect, onTranscript, onResponse, onStateChange, onError, onConnected, onDisconnected, children, className, }: ChansVoiceProps): import("react/jsx-runtime").JSX.Element;
+export default ChansVoice;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAe,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAG9D,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAErC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAEhC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAA;IAE5D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,UAAU,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAGD,KAAK,iBAAiB,GAAG,qBAAqB,CAAA;AAI9C;;GAEG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,OAAO,EACP,WAAW,EACX,cAAc,EACd,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CA4GjB;AA8ID,eAAe,UAAU,CAAA"}

package/dist/index.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo, createContext, useContext, } from "react";
+import { ChansClient } from "@chozzz/chans-sdk-js";
+const ChansContext = createContext(null);
+/**
+ * Hook to access ChansVoice state from child components
+ */
+export function useChans() {
+    const context = useContext(ChansContext);
+    if (!context) {
+        throw new Error("useChans must be used within a ChansVoice component");
+    }
+    return context;
+}
+/**
+ * ChansVoice - React component for chans.ai voice AI
+ *
+ * @example
+ * ```tsx
+ * <ChansVoice
+ *   agentToken="agt_xxx"
+ *   userId="user-123"
+ *   onTranscript={(text) => console.log("User:", text)}
+ *   onResponse={(text) => console.log("Agent:", text)}
+ * />
+ * ```
+ *
+ * @example Custom UI
+ * ```tsx
+ * <ChansVoice agentToken="agt_xxx">
+ *   {({ state, connect, disconnect }) => (
+ *     <button onClick={state === "idle" ? connect : disconnect}>
+ *       {state === "idle" ? "Start" : "Stop"}
+ *     </button>
+ *   )}
+ * </ChansVoice>
+ * ```
+ */
+export function ChansVoice({ agentToken, userId, apiUrl, autoConnect = true, onTranscript, onResponse, onStateChange, onError, onConnected, onDisconnected, children, className, }) {
+    const [state, setState] = useState("idle");
+    const [error, setError] = useState(null);
+    const clientRef = useRef(null);
+    // Create client on mount
+    useEffect(() => {
+        clientRef.current = new ChansClient({ agentToken, apiUrl });
+        const client = clientRef.current;
+        // Set up event listeners
+        const unsubState = client.on("stateChange", (newState) => {
+            setState(newState);
+            onStateChange?.(newState);
+        });
+        const unsubTranscript = client.on("transcript", (text) => {
+            onTranscript?.(text);
+        });
+        const unsubResponse = client.on("response", (text) => {
+            onResponse?.(text);
+        });
+        const unsubError = client.on("error", (err) => {
+            setError(err);
+            onError?.(err);
+        });
+        const unsubConnected = client.on("connected", () => {
+            setError(null);
+            onConnected?.();
+        });
+        const unsubDisconnected = client.on("disconnected", () => {
+            onDisconnected?.();
+        });
+        return () => {
+            unsubState();
+            unsubTranscript();
+            unsubResponse();
+            unsubError();
+            unsubConnected();
+            unsubDisconnected();
+            client.disconnect();
+        };
+    }, [agentToken, apiUrl, onStateChange, onTranscript, onResponse, onError, onConnected, onDisconnected]);
+    // Auto-connect
+    useEffect(() => {
+        if (autoConnect && clientRef.current && state === "idle") {
+            clientRef.current.connect({ userId }).catch(() => {
+                // Error handled by event listener
+            });
+        }
+    }, [autoConnect, userId, state]);
+    const connect = useCallback(async () => {
+        if (clientRef.current) {
+            setError(null);
+            await clientRef.current.connect({ userId });
+        }
+    }, [userId]);
+    const disconnect = useCallback(async () => {
+        if (clientRef.current) {
+            await clientRef.current.disconnect();
+        }
+    }, []);
+    const isConnected = state !== "idle" && state !== "error";
+    const contextValue = useMemo(() => ({
+        state,
+        isConnected,
+        connect,
+        disconnect,
+        error,
+    }), [state, isConnected, connect, disconnect, error]);
+    // Custom render function
+    if (children) {
+        return (_jsx(ChansContext.Provider, { value: contextValue, children: children(contextValue) }));
+    }
+    // Default UI
+    return (_jsx(ChansContext.Provider, { value: contextValue, children: _jsx("div", { className: className, children: _jsx(DefaultVoiceUI, { state: state, isConnected: isConnected, connect: connect, disconnect: disconnect, error: error }) }) }));
+}
+/**
+ * Default voice UI component
+ */
+function DefaultVoiceUI({ state, isConnected, connect, disconnect, error, }) {
+    const handleClick = async () => {
+        if (isConnected) {
+            await disconnect();
+        }
+        else {
+            await connect();
+        }
+    };
+    return (_jsxs("div", { style: { textAlign: "center" }, children: [error && (_jsx("div", { style: {
+                    color: "#ef4444",
+                    marginBottom: "1rem",
+                    fontSize: "0.875rem",
+                }, children: error.message })), _jsx("button", { onClick: handleClick, disabled: state === "connecting", style: {
+                    width: "4rem",
+                    height: "4rem",
+                    borderRadius: "50%",
+                    border: "none",
+                    background: state === "idle"
+                        ? "linear-gradient(135deg, #8b5cf6, #7c3aed)"
+                        : state === "speaking"
+                            ? "#22c55e"
+                            : state === "error"
+                                ? "#ef4444"
+                                : "#6366f1",
+                    color: "white",
+                    cursor: state === "connecting" ? "wait" : "pointer",
+                    transition: "all 0.2s",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, "aria-label": isConnected ? "Stop voice" : "Start voice", children: state === "connecting" ? (_jsx(LoadingSpinner, {})) : state === "speaking" ? (_jsx(SpeakerIcon, {})) : (_jsx(MicIcon, {})) }), _jsxs("div", { style: {
+                    marginTop: "0.5rem",
+                    fontSize: "0.75rem",
+                    color: "#9ca3af",
+                }, children: [state === "idle" && "Click to start", state === "connecting" && "Connecting...", state === "connected" && "Connected", state === "listening" && "Listening...", state === "speaking" && "Agent speaking", state === "error" && "Error"] })] }));
+}
+function MicIcon() {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), _jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] }));
+}
+function SpeakerIcon() {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) }));
+}
+function LoadingSpinner() {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", style: { animation: "spin 1s linear infinite" }, children: [_jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }), _jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeDasharray: "31.4 31.4", strokeLinecap: "round" })] }));
+}
+export default ChansVoice;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ai-chans/sdk-react",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ai-chans/sdk.git",
+    "directory": "react"
+  },
+  "description": "React component for chans.ai voice AI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "echo 'lint not configured yet'"
+  },
+  "dependencies": {
+    "@ai-chans/sdk-js": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,390 @@
+"use client"
+
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+  createContext,
+  useContext,
+} from "react"
+import { ChansClient, ChansState } from "@chozzz/chans-sdk-js"
+
+// Re-export client types
+export type { ChansState } from "@chozzz/chans-sdk-js"
+
+export interface ChansVoiceProps {
+  /**
+   * Agent token from chans.ai dashboard
+   */
+  agentToken: string
+
+  /**
+   * Optional end-user ID for conversation segmentation
+   */
+  userId?: string
+
+  /**
+   * API URL (defaults to https://api.chans.ai)
+   */
+  apiUrl?: string
+
+  /**
+   * Auto-connect on mount (default: true)
+   */
+  autoConnect?: boolean
+
+  /**
+   * Called when user's speech is transcribed
+   */
+  onTranscript?: (text: string) => void
+
+  /**
+   * Called when agent responds
+   */
+  onResponse?: (text: string) => void
+
+  /**
+   * Called when state changes
+   */
+  onStateChange?: (state: ChansState) => void
+
+  /**
+   * Called on error
+   */
+  onError?: (error: Error) => void
+
+  /**
+   * Called when connected
+   */
+  onConnected?: () => void
+
+  /**
+   * Called when disconnected
+   */
+  onDisconnected?: () => void
+
+  /**
+   * Custom render function for the voice UI
+   */
+  children?: (props: ChansVoiceRenderProps) => React.ReactNode
+
+  /**
+   * CSS class name
+   */
+  className?: string
+}
+
+export interface ChansVoiceRenderProps {
+  state: ChansState
+  isConnected: boolean
+  connect: () => Promise<void>
+  disconnect: () => Promise<void>
+  error: Error | null
+}
+
+// Context for accessing chans state from child components
+type ChansContextValue = ChansVoiceRenderProps
+
+const ChansContext = createContext<ChansContextValue | null>(null)
+
+/**
+ * Hook to access ChansVoice state from child components
+ */
+export function useChans(): ChansContextValue {
+  const context = useContext(ChansContext)
+  if (!context) {
+    throw new Error("useChans must be used within a ChansVoice component")
+  }
+  return context
+}
+
+/**
+ * ChansVoice - React component for chans.ai voice AI
+ *
+ * @example
+ * ```tsx
+ * <ChansVoice
+ *   agentToken="agt_xxx"
+ *   userId="user-123"
+ *   onTranscript={(text) => console.log("User:", text)}
+ *   onResponse={(text) => console.log("Agent:", text)}
+ * />
+ * ```
+ *
+ * @example Custom UI
+ * ```tsx
+ * <ChansVoice agentToken="agt_xxx">
+ *   {({ state, connect, disconnect }) => (
+ *     <button onClick={state === "idle" ? connect : disconnect}>
+ *       {state === "idle" ? "Start" : "Stop"}
+ *     </button>
+ *   )}
+ * </ChansVoice>
+ * ```
+ */
+export function ChansVoice({
+  agentToken,
+  userId,
+  apiUrl,
+  autoConnect = true,
+  onTranscript,
+  onResponse,
+  onStateChange,
+  onError,
+  onConnected,
+  onDisconnected,
+  children,
+  className,
+}: ChansVoiceProps) {
+  const [state, setState] = useState<ChansState>("idle")
+  const [error, setError] = useState<Error | null>(null)
+  const clientRef = useRef<ChansClient | null>(null)
+
+  // Create client on mount
+  useEffect(() => {
+    clientRef.current = new ChansClient({ agentToken, apiUrl })
+
+    const client = clientRef.current
+
+    // Set up event listeners
+    const unsubState = client.on("stateChange", (newState) => {
+      setState(newState)
+      onStateChange?.(newState)
+    })
+
+    const unsubTranscript = client.on("transcript", (text) => {
+      onTranscript?.(text)
+    })
+
+    const unsubResponse = client.on("response", (text) => {
+      onResponse?.(text)
+    })
+
+    const unsubError = client.on("error", (err) => {
+      setError(err)
+      onError?.(err)
+    })
+
+    const unsubConnected = client.on("connected", () => {
+      setError(null)
+      onConnected?.()
+    })
+
+    const unsubDisconnected = client.on("disconnected", () => {
+      onDisconnected?.()
+    })
+
+    return () => {
+      unsubState()
+      unsubTranscript()
+      unsubResponse()
+      unsubError()
+      unsubConnected()
+      unsubDisconnected()
+      client.disconnect()
+    }
+  }, [agentToken, apiUrl, onStateChange, onTranscript, onResponse, onError, onConnected, onDisconnected])
+
+  // Auto-connect
+  useEffect(() => {
+    if (autoConnect && clientRef.current && state === "idle") {
+      clientRef.current.connect({ userId }).catch(() => {
+        // Error handled by event listener
+      })
+    }
+  }, [autoConnect, userId, state])
+
+  const connect = useCallback(async () => {
+    if (clientRef.current) {
+      setError(null)
+      await clientRef.current.connect({ userId })
+    }
+  }, [userId])
+
+  const disconnect = useCallback(async () => {
+    if (clientRef.current) {
+      await clientRef.current.disconnect()
+    }
+  }, [])
+
+  const isConnected = state !== "idle" && state !== "error"
+
+  const contextValue: ChansContextValue = useMemo(
+    () => ({
+      state,
+      isConnected,
+      connect,
+      disconnect,
+      error,
+    }),
+    [state, isConnected, connect, disconnect, error]
+  )
+
+  // Custom render function
+  if (children) {
+    return (
+      <ChansContext.Provider value={contextValue}>
+        {children(contextValue)}
+      </ChansContext.Provider>
+    )
+  }
+
+  // Default UI
+  return (
+    <ChansContext.Provider value={contextValue}>
+      <div className={className}>
+        <DefaultVoiceUI
+          state={state}
+          isConnected={isConnected}
+          connect={connect}
+          disconnect={disconnect}
+          error={error}
+        />
+      </div>
+    </ChansContext.Provider>
+  )
+}
+
+/**
+ * Default voice UI component
+ */
+function DefaultVoiceUI({
+  state,
+  isConnected,
+  connect,
+  disconnect,
+  error,
+}: ChansVoiceRenderProps) {
+  const handleClick = async () => {
+    if (isConnected) {
+      await disconnect()
+    } else {
+      await connect()
+    }
+  }
+
+  return (
+    <div style={{ textAlign: "center" }}>
+      {error && (
+        <div
+          style={{
+            color: "#ef4444",
+            marginBottom: "1rem",
+            fontSize: "0.875rem",
+          }}
+        >
+          {error.message}
+        </div>
+      )}
+
+      <button
+        onClick={handleClick}
+        disabled={state === "connecting"}
+        style={{
+          width: "4rem",
+          height: "4rem",
+          borderRadius: "50%",
+          border: "none",
+          background:
+            state === "idle"
+              ? "linear-gradient(135deg, #8b5cf6, #7c3aed)"
+              : state === "speaking"
+                ? "#22c55e"
+                : state === "error"
+                  ? "#ef4444"
+                  : "#6366f1",
+          color: "white",
+          cursor: state === "connecting" ? "wait" : "pointer",
+          transition: "all 0.2s",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        aria-label={isConnected ? "Stop voice" : "Start voice"}
+      >
+        {state === "connecting" ? (
+          <LoadingSpinner />
+        ) : state === "speaking" ? (
+          <SpeakerIcon />
+        ) : (
+          <MicIcon />
+        )}
+      </button>
+
+      <div
+        style={{
+          marginTop: "0.5rem",
+          fontSize: "0.75rem",
+          color: "#9ca3af",
+        }}
+      >
+        {state === "idle" && "Click to start"}
+        {state === "connecting" && "Connecting..."}
+        {state === "connected" && "Connected"}
+        {state === "listening" && "Listening..."}
+        {state === "speaking" && "Agent speaking"}
+        {state === "error" && "Error"}
+      </div>
+    </div>
+  )
+}
+
+function MicIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </svg>
+  )
+}
+
+function SpeakerIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
+    </svg>
+  )
+}
+
+function LoadingSpinner() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      style={{ animation: "spin 1s linear infinite" }}
+    >
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+        fill="none"
+        strokeDasharray="31.4 31.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export default ChansVoice