Skip to main content
This guide walks you through setting up SvaraAI locally and starting your first emotion-aware therapy conversation.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher)
  • npm or yarn
  • Git
  • A Hume AI account with API credentials

​
Get your API credentials

1

Sign up for Hume AI

Visit Hume AI and create an account if you don’t have one.
2

Generate API credentials

Navigate to your Hume AI dashboard and generate:
  • API Key (for voice interface authentication)
  • Secret Key (for backend OAuth2 token generation)
  • Config ID (for your custom EVI configuration)
3

Save your credentials

Keep these values handy - you’ll need them in the next section.

​
Clone and install

1

Clone the repository

Clone the SvaraAI repository to your local machine:
git clone https://github.com/whysooharsh/svaraAI.git
cd svaraAI
2

Install backend dependencies

Navigate to the backend directory and install dependencies:
cd Backend
npm install
The backend uses Express.js and includes the following key dependencies:
  • express - Web server framework
  • cors - Cross-origin resource sharing
  • dotenv - Environment variable management
3

Install frontend dependencies

In a new terminal, navigate to the frontend directory and install dependencies:
cd Frontend
npm install
The frontend uses React with Vite and includes:
  • @humeai/voice-react - Hume AI voice SDK
  • react and react-dom (v19)
  • framer-motion - Animation library
  • tailwindcss - Styling framework

​
Configure environment variables

SvaraAI requires environment variables for both the frontend and backend. 
# Hume AI Credentials
VITE_HUME_API_KEY=your_hume_api_key_here
VITE_HUME_CONFIG_ID=your_hume_config_id_here
Never commit your .env files to version control. The API keys provide full access to your Hume AI account.

​
Environment variable breakdown

VariableLocationPurpose
VITE_HUME_API_KEYFrontend & BackendAuthenticates voice interface connections
VITE_HUME_CONFIG_IDFrontendSpecifies your custom EVI configuration
HUME_SECRET_KEYBackendGenerates OAuth2 access tokens
GEMINI_API_KEYBackendAuthenticates with Google Gemini API
GEMINI_PROMPTBackendTemplate for therapeutic response generation
PORTBackendBackend server port (defaults to 5000)

​
Start the development servers

SvaraAI runs two separate servers: a backend API and a frontend React application. 
cd Backend
npm run dev
You should see output similar to: 
Server running on PORT 5000
The frontend development server (Vite) automatically proxies /api requests to the backend server at http://localhost:5000. This is configured in vite.config.ts.

​
Start your first conversation

1

Open the application

Navigate to http://localhost:5173/playground in your browser.
2

Grant microphone permissions

When prompted, allow the application to access your microphone. This is required for voice-based therapy sessions.
3

Connect to the voice interface

Click the connect button to establish a connection with Hume AI’s Empathic Voice Interface (EVI). The application will:
  1. Authenticate using your API key
  2. Load your custom configuration
  3. Initialize the emotion detection models
Frontend/src/components/startCall.tsx
const connectOptions: ConnectOptions = {
  auth: { type: "apiKey", value: apiKey },
  configId: configId,
};
await connect(connectOptions);
4

Start speaking

Once connected, simply start speaking. SvaraAI will:
  • Detect emotions in your voice using prosody analysis
  • Analyze language patterns for sentiment
  • Provide empathetic, context-aware responses
  • Track conversation insights for later review

​
How it works

SvaraAI uses Hume AI’s Empathic Voice Interface to create emotion-aware conversations:
Frontend/src/components/chat.tsx
import { VoiceProvider } from "@humeai/voice-react";
import Messages from "./message";
import Controls from "./controls";
import StartCall from "./startCall";

export default function ChatInterface() {
  const apiKey = import.meta.env.VITE_HUME_API_KEY || "";
  const configId = import.meta.env.VITE_HUME_CONFIG_ID || "";

  return (
    <VoiceProvider>
      <Messages />
      <Controls />
      <StartCall apiKey={apiKey} configId={configId} />
    </VoiceProvider>
  );
}

​
Architecture overview

  1. Frontend - React application with Hume AI voice SDK
    • Real-time voice communication
    • Emotion visualization
    • Conversation history
  2. Backend - Express.js API server
    • OAuth2 token generation for secure API access
    • Audio analysis endpoints
    • Conversation data persistence
  3. Hume AI EVI - Emotion detection and response generation
    • Prosody analysis (voice tone, pitch, rhythm)
    • Language sentiment analysis
    • Context-aware empathetic responses

​
Available routes

SvaraAI provides several routes for different functionalities:
RouteDescription
/Landing page with product information
/playgroundInteractive voice therapy interface
/insightsView conversation analytics and emotion insights

​
Next steps

Voice emotion detection

Learn how SvaraAI detects emotions from voice using Hume AI.

Conversation insights

Learn how to interpret emotion data and conversation analytics.

API reference

Explore backend endpoints for audio analysis and conversation management.

Architecture overview

Understand how SvaraAI’s components work together.

​
Troubleshooting

If you see “Missing API credentials. Check your .env file”, ensure:
  1. Your .env file exists in the correct directory
  2. Variable names match exactly (including VITE_ prefix)
  3. No quotes around the values
  4. You’ve restarted the development server after adding variables
Connection failures are usually caused by:
  1. Microphone permissions denied - Check browser settings
  2. Invalid API key - Verify credentials in Hume AI dashboard
  3. Backend server not running - Ensure Express server is running on port 5000
  4. Network issues - Check your internet connection
If the backend fails with port conflicts:
Server failed to start: Error: listen EADDRINUSE: address already in use :::5000
Either kill the process using port 5000 or change the PORT variable in your .env file.
The backend generates OAuth2 tokens using this flow:
Backend/utils/humeClient.ts
export const getHumeAccessToken = async (): Promise<string> => {
  const apiKey = process.env.VITE_HUME_API_KEY;
  const secretKey = process.env.HUME_SECRET_KEY;
  
  const authString = `${apiKey}:${secretKey}`;
  const encoded = Buffer.from(authString).toString('base64');
  
  const res = await fetch('https://api.hume.ai/oauth2-cc/token', {
    method: 'POST',
    headers: {
      'Authorization': `Basic ${encoded}`,
    },
    body: new URLSearchParams({ 
      grant_type: 'client_credentials' 
    }).toString(),
  });
  
  return res.json().access_token;
};
If authentication fails, verify both your API key and secret key are correct.

​
Get help

If you encounter issues not covered here:

Build docs developers (and LLMs) love

Get started for freeTalk to us