Simple Voice Assistant UI

A React-based frontend application for a voice assistant that allows users to record audio and receive audio responses from a backend API.

Features

• Voice Recording: Click to start/stop recording audio using the device's microphone
• Audio Playback: Play back the response audio received from the backend
• Modern UI: Clean, responsive interface built with Tailwind CSS
• Real-time Feedback: Visual indicators for recording state

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager
• A backend API running on http://localhost:8000 with the /api/process-audio endpoint

Installation

1. Clone the repository:

git clone <repository-url>
cd simple-voice-assistant-ui

2. Install dependencies:

npm install

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in interactive watch mode.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time.

Usage

1. Start the development server:

npm start

2. Ensure your backend API is running on http://localhost:8000

3. Open your browser and navigate to http://localhost:3000

4. Click "Start Recording" to begin recording audio

5. Speak into your microphone

6. Click "Stop Recording" to send the audio to the backend

7. The response audio will automatically play back when received

Backend API Requirements

The application expects a backend API with the following endpoint:

• POST /api/process-audio
  • Accepts: multipart/form-data with an audio field containing the recorded audio blob
  • Returns: Audio file (MP3/WAV format) as the response body
  • Content-Type: audio/mpeg or audio/wav

Technology Stack

• React 19.0.0 - Frontend framework
• Tailwind CSS 4.0.6 - Utility-first CSS framework
• Web APIs - MediaRecorder API for audio recording
• Fetch API - For HTTP requests to the backend

Project Structure

src/
├── components/
│   └── VoiceAssistant.js    # Main voice assistant component
├── App.js                   # Root component
├── App.css                  # App styles
├── index.js                 # Application entry point
└── index.css                # Global styles

Browser Compatibility

This application uses modern web APIs including:

• MediaRecorder API for audio recording
• Fetch API for HTTP requests
• Blob and URL APIs for audio handling

Supported browsers:

• Chrome 47+
• Firefox 25+
• Safari 14.1+
• Edge 79+

Development Notes

• The application uses React hooks (useState, useRef) for state management
• Audio is recorded as WAV format and sent to the backend
• The response audio is automatically played back using HTML5 audio controls
• Error handling is implemented for network requests and audio recording

Troubleshooting

Common Issues

1. Microphone Permission Denied

   • Ensure your browser has permission to access the microphone
   • Check browser settings and allow microphone access

2. Backend Connection Error

   • Verify the backend API is running on http://localhost:8000
   • Check that the /api/process-audio endpoint is available
   • Ensure CORS is properly configured on the backend

3. Audio Playback Issues

   • Check that the backend returns valid audio data
   • Verify the audio format is supported by your browser

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is private and proprietary.