Steno SDK Overview

Bring your AI Twin into any application you own

The Steno SDK makes it easy to integrate your AI Twin into any application—whether that’s a customer-facing mobile app, a proprietary tool, or a branded digital experience.

Instead of stitching together APIs, your team can drop in our SDK to launch faster, reduce engineering overhead, and deliver a seamless experience for your customers.

What is it? A React-based library providing pre-built components and hooks for voice AI capabilities, including WebRTC-based voice communication, real-time transcription, and conversational AI interactions.

Why Use the SDK?

Speed to Market

Reduce integration time from weeks to days. Most teams have a working integration within hours.

Seamless Experience

Pre-packaged components handle the complexity, so your AI Twin feels native inside your app—not like a third-party widget.

Headless Flexibility

Build the experience you want, with complete control over design and user flow.

Future-Ready

Ongoing updates ensure compatibility as your app evolves. Get improvements and bug fixes automatically via version upgrades.

SDK Tiers: Basic vs Plus

Two packages are available depending on your customization needs:

Basic Tier (@aisteno/sdk-basic)

Best for: Quick deployments, standard use cases, basic customization

Single drop-in component:

import { StenoChat } from '@aisteno/sdk-basic';
 
<StenoChat
  config={{
    subscriptionKey: '<your-api-key>',
    chatId: '<your-chat-id>',
    aiName: '<your-chat-id>'
  }}
  customization={{
    position: "bottom-right",
    primaryColor: "#007AFF"
  }}
/>

What you can configure:

• Widget position (bottom-right, bottom-left, top-right, top-left)
• Widget size (small, medium, large)
• Brand colors (primary, accent, background)
• Chat name and icon
• Conversation starters (pre-defined prompts)
• Show/hide features (transcript, connection status)

What’s included:

• Pre-built chat widget with voice controls
• Real-time transcription display
• Audio management (automatic)
• Connection handling and retry logic
• TypeScript support

Plus Tier (@aisteno/sdk-plus)

Best for: Custom experiences, advanced integrations, full control

Provider-based architecture with full API access:

import { StenoProvider, useSteno, StenoAudioRenderer } from '@aisteno/sdk-plus';
 
<StenoProvider config={{...}}>
  <StenoAudioRenderer />
  <YourCustomUI />
</StenoProvider>
 
function YourCustomUI() {
  const {
    connectionState,
    callTranscript,
    startCall,
    endCall,
    toggleMute,
    sendMessage
  } = useSteno();
 
  // Build whatever you want
}

What you can configure:

• Everything in Basic tier
• Full state access - connectionState, callStatus, isMuted, threads, etc.
• Programmatic control - startCall(), endCall(), toggleMute()
• Multi-thread conversations - createThread(), switchThread()
• Custom event handlers - onAgentRequest(), notifyAgent()
• Headless mode - Build completely custom UI
• Advanced features - preemptiveConnect(), interruptSpeech()

What’s included:

• Everything in Basic tier
• React hooks API (useSteno)
• Full state management access
• Customizable pre-built components (optional)
• Readable source code with source maps
• Advanced configuration options

Feature Comparison Matrix

Language Support

The SDK supports multilingual AI assistants based on your AI Twin configuration.

Your AI Twin can converse in any language you configure:

• Voice input/output in all major languages
• Real-time transcription in the conversation language
• Automatic language detection (if configured)
• Mixed-language conversations (if configured)

Language configuration is managed through your Steno dashboard—no code changes required to add or change languages.

Platform Support

Currently Supported

Built for the most common frameworks:

• React (18+) - Full support
• Next.js (13+) - App Router and Pages Router
• Create React App - Full support
• Vite + React - Full support
• Remix - Full support
• Gatsby - Full support

Coming Soon

• React Native - iOS and Android native apps
• Vue.js - Vue 3 wrapper components
• Angular - Angular 15+ wrapper
• Svelte - Svelte 4+ wrapper

What You Can Build

Custom Web Applications

Feature your AI Twin as part of your customer journey with complete design control.

Enterprise Platforms

Your AI Twin becomes a built-in advisor, trainer, or concierge in proprietary systems.

Customer Support Portals

24/7 voice support with instant answers, escalation capabilities, and conversation history.

Zoom Integration

Using the SDK, you could have your AI Twin join a Zoom call where multiple users could interact with it.

How Friendly Is It?

The SDK is designed with developer experience as a top priority:

Quick Start

// This is literally all you need:
import { StenoChat } from '@aisteno/sdk-basic';
 
<StenoChat
  config={{
    subscriptionKey: '<your-api-key>',
    chatId: '<your-chat-id>',
    aiName: '<your-chat-id>'
  }}
/>

Smart Defaults

Everything works out of the box. Colors? Position? Size? All have sensible defaults. Customize when you want to.

Progressive Complexity

• Day 1: Basic chat widget working
• Week 1: Customized colors and branding
• Month 1: Custom UI with Plus tier (if needed)

You’re never overwhelmed with options you don’t need yet.

TypeScript Support

Full type definitions included. Catch errors before runtime.

Clear Documentation

Step-by-step guides, code examples for common use cases, and troubleshooting with actual solutions.

Helpful Error Messages

No cryptic errors. When something goes wrong, we tell you exactly what and how to fix it.

Core Capabilities

Audio Management Component

Drop-in utilities for voice calls and chat. The SDK handles all communication with the AI seamlessly—you just send the user’s message and receive the AI’s response. Enable microphone for real-time back-and-forth voice conversation.

Volume Control

Built-in mute controls. Plus tier gives you programmatic access: toggleMute().

Unified Developer Experience

Built-in tools simplify authentication, session handling, error reporting, and connection management.

Private NPM Package

Easy to install and manage securely via npm.

Usage Examples

import { StenoChat } from '@aisteno/sdk-basic';
 
function App() {
  return (
    <div>
      <h1>My Application</h1>
 
      <StenoChat
        config={{
          subscriptionKey: process.env.REACT_APP_API_KEY,
          chatId: '<your-chat-id>',
          aiName: '<your-chat-id>'
        }}
        customization={{
          position: "bottom-right",
          primaryColor: "#007AFF",
          chatName: "Support Assistant",
          conversationStarters: [
            "How can I help you?",
            "Tell me about your services",
            "I need support"
          ]
        }}
      />
    </div>
  );
}

import { StenoProvider, useSteno, StenoAudioRenderer } from '@aisteno/sdk-plus';
 
function VoiceButton() {
  const { connectionState, startCall, endCall } = useSteno();
 
  const handleToggle = async () => {
    if (connectionState === 'connected') {
      await endCall();
    } else {
      await startCall();
    }
  };
 
  return (
    <button onClick={handleToggle}>
      {connectionState === 'connected' ? 'End Call' : 'Start Call'}
    </button>
  );
}
 
function App() {
  return (
    <StenoProvider config={{...}}>
      <StenoAudioRenderer />
      <VoiceButton />
    </StenoProvider>
  );
}

function ConversationThreads() {
  const {
    threads,
    currentThreadId,
    createThread,
    switchThread
  } = useSteno();
 
  return (
    <div>
      <button onClick={() => createThread('New Chat')}>
        New Conversation
      </button>
 
      {threads.map(thread => (
        <button
          key={thread.slug}
          onClick={() => switchThread(thread.slug)}
          className={thread.slug === currentThreadId ? 'active' : ''}
        >
          {thread.title || thread.slug}
        </button>
      ))}
    </div>
  );
}

Configuration Reference

interface SDKConfig {
  // Required
  subscriptionKey: string;   // API subscription key
  chatId: string;            // Your AI Twin identifier (use same value for aiName)
  aiName: string;            // Your AI Twin name (use same value as chatId)
 
  // Optional
  userId?: string;           // User identifier
  userName?: string;         // User display name
  threadId?: string;         // Resume specific thread
  tokenEndpoint?: string;    // Custom auth endpoint
  debug?: boolean;           // Debug logging
  autoconnect?: boolean;     // Auto-connect on mount
}

// Available on StenoChat (Basic) via customization prop
// Available on StenoChatUI (Plus) as direct props
<StenoChat
  config={{...}}
  customization={{
    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left',
    size: 'small' | 'medium' | 'large',
    primaryColor: string,      // Buttons, links
    accentColor: string,       // Highlights, active states
    backgroundColor: string,   // Widget background
    chatName: string,          // Header name
    chatIcon: string,          // Avatar URL
    conversationStarters: string[],
    showTranscript: boolean,
    showConnectionStatus: boolean
  }}
/>

TypeScript Support

Full TypeScript definitions included in both tiers.

Key types:

type ConnectionState = 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
 
type CallStatus =
  | 'inactive'
  | 'ringing-user-initiated'
  | 'active-fullscreen'
  | 'active-minimized-in-chat';
 
interface CallTranscriptEntry {
  speakerId: 'user' | 'assistant';
  text: string;
  streamId: string;
  isFinal: boolean;
}
 
interface Thread {
  slug: string;
  title: string | null;
  published_at: Date | null;
  metadata?: Record<string, unknown>;
}

Plus Tier - Complete Hook API

const {
  // Connection & Call State
  connectionState: ConnectionState,
  callStatus: CallStatus,
  callTranscript: CallTranscriptEntry[],
  voiceToTextTranscript: string,
  isMuted: boolean,
  isVoiceToText: boolean,
  isTyping: boolean,
  isAgentReady: boolean,
 
  // Messages & Threads
  messages: Message[],
  threads: Thread[],
  currentThreadId: string | null,
  isLoadingThreads: boolean,
  isLoadingMessages: boolean,
  isLoadingThread: boolean,
  threadError: string | null,
  threadsError: string | null,
  messagesError: string | null,
 
  // Call Control
  startCall: () => Promise<void>,
  endCall: () => Promise<void>,
  toggleMute: () => Promise<void>,
  toggleVoiceToText: () => Promise<void>,
 
  // Messaging
  sendMessage: (text: string, files?: File[]) => Promise<void>,
  addMessage: (message) => string,
  clearMessages: () => void,
 
  // Thread Management
  createThread: (title?: string) => string,
  switchThread: (threadId: string) => Promise<void>,
  fetchThreads: () => Promise<void>,
 
  // Advanced
  preemptiveConnect: () => void,
  interruptSpeech: (reason?: string) => void,
  notifyAgent: (event: string, payload?: unknown) => void,
  onAgentRequest: (name: string, handler: Function) => void,
  sendRealtimeData: (data) => Promise<void>,
  updateMetadata: (metadata) => void,
} = useSteno();

Getting Access

To get access to the SDK and start building:

1. Contact support@steno.ai to request SDK access
2. You’ll receive your gateway URL and subscription key
3. We’ll add you to the private NPM registry
4. Start building with the Quick Start guide

Questions? Contact support@steno.ai.

SDK Version: 0.0.5 | Last Updated: December 2025