React component for chans.ai voice AI
npm install @ai-chans/sdk-reactReact components and hooks for chans.ai voice AI.
``bash`
npm install @ai-chans/sdk-react
Requires React 18 or 19.
Drop in a ready-to-use voice button:
`tsx
import { ChansVoice } from "@ai-chans/sdk-react"
function App() {
return (
onTranscript={(text) => console.log("User:", text)}
onResponse={(text) => console.log("Agent:", text)}
/>
)
}
`
Build your own interface with render props:
`tsx
import { ChansVoice } from "@ai-chans/sdk-react"
function App() { Status: {state} {error && {error.message}
return (
{({ state, isConnected, connect, disconnect, error }) => (
disabled={state === "connecting"}
>
{isConnected ? "Stop" : "Start"}
)}
)
}
`
Access voice state from nested components:
`tsx
import { ChansVoice, useChans } from "@ai-chans/sdk-react"
function VoiceButton() {
const { state, connect, disconnect, isConnected } = useChans()
return (
)
}
function App() {
return (
{() =>
)
}
`
| 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 |
When using children as a function:
`typescript`
interface ChansVoiceRenderProps {
state: ChansState
isConnected: boolean
connect: () => Promise
disconnect: () => Promise
error: Error | null
}
Returns the same props as render props. Must be used inside a ChansVoice component.
`typescript`
const { state, isConnected, connect, disconnect, error } = useChans()
`typescript`
type ChansState =
| "idle" // Not connected
| "connecting" // Connecting
| "connected" // Connected, initializing
| "listening" // Listening for speech
| "speaking" // Agent speaking
| "error" // Error occurred
`tsx
import { useState } from "react"
import { ChansVoice } from "@ai-chans/sdk-react"
function Chat() {
const [messages, setMessages] = useState
return (
{m.role}: {m.text}
onTranscript={(text) =>
setMessages(prev => [...prev, { role: "You", text }])
}
onResponse={(text) =>
setMessages(prev => [...prev, { role: "Agent", text }])
}
/>
$3
tsx
import { ChansVoice } from "@ai-chans/sdk-react"function App() {
return (
{({ state, connect, disconnect }) => (
{state === "idle" ? (
) : (
<>
State: {state}
)}
)}
)
}
`Self-Hosted
Point to your own chans.ai instance:
tsx
apiUrl="https://your-instance.com"
/>
``Apache 2.0