Meeting Assistant - AI-Powered Transcription and Summarization

The Meeting Assistant is a full-stack serverless application designed to record, transcribe, and summarize audio from meetings. It leverages AWS AI services like Bedrock and Transcribe to provide intelligent insights from your conversations. The application features a secure user authentication system and a responsive React frontend for a seamless user experience.

Core Features

Secure Authentication: User registration and sign-in are handled by AWS Cognito, ensuring secure access to the application.
Audio Recording & Import: Users can record audio directly in the app or import existing audio files for processing.
Headset Recording Support: Dedicated setup guide for recording with headphones or headsets, including virtual audio device configuration for both macOS and Windows.
AI-Powered Transcription: Amazon Transcribe is used to convert audio recordings into accurate, speaker-diarized text transcripts.
Interactive Transcript Editing: Users can edit speaker names and transcript text inline, with changes saved back to S3 for improved summarization.
Audio Segment Playback: Users can click on any segment of the transcript to play just that portion of the audio.
Audio Export: Export recorded audio files for external use or archival purposes.
Desktop App Downloads: Automatic deployment and distribution of Electron desktop applications for Windows and macOS through the web interface.
AI-Powered Summarization & Chat: Amazon Bedrock generates concise summaries of meetings and enables an interactive chat experience to ask questions about the transcript content.
Asynchronous Processing: Long-running tasks like transcription and summarization are handled asynchronously to prevent UI timeouts and provide a responsive user experience.
Bulk Actions: Users can select multiple recordings to efficiently move them to different folders or to the trash.
File Organization: A folder system allows users to organize their recordings and notes effectively.

Project Structure

AI-Assistant/
├── config/                      # Configuration files
│   ├── electron/                # Electron builder configurations
│   │   ├── electron-builder.dev.json
│   │   ├── electron-builder.prod.json
│   │   └── electron-builder.staging.json
│   └── env/                     # Environment configurations
│       ├── .env.development
│       ├── .env.example
│       ├── .env.production
│       └── .env.staging
├── infrastructure/              # Infrastructure as code
│   └── deployment.yml           # CloudFormation template
├── scripts/                     # Build and deployment scripts
│   └── deploy.sh                # Deployment script
├── public/                      # Public assets
│   ├── electron.js
│   ├── index.html
│   └── preload.js
├── src/                         # Source code
│   ├── assets/                  # Static assets
│   │   └── aws_logo.png
│   ├── components/              # React components
│   │   ├── audio/               # Audio player components
│   │   │   └── CustomAudioPlayer.js
│   │   ├── folders/             # Folder management components
│   │   │   └── FolderList.js
│   │   ├── headset/             # Headset setup components
│   │   │   ├── HeadsetSetupGuide.js
│   │   │   └── HeadsetSetupLink.js
│   │   ├── icons/               # Icon components
│   │   │   ├── DynamicIcon.js
│   │   │   └── MediaIcons.js
│   │   ├── modals/              # Modal dialog components
│   │   │   ├── AlertModal.js
│   │   │   ├── ConfirmModal.js
│   │   │   ├── CreateFolderModal.js
│   │   │   ├── EditFolderModal.js
│   │   │   ├── HeadsetSetupAlert.js
│   │   │   ├── IconPicker.js
│   │   │   ├── MoveToFolderModal.js
│   │   │   ├── SimpleModal.js
│   │   │   └── WelcomeModal.js
│   │   ├── recordings/          # Recording management components
│   │   │   ├── RecordingCard.js
│   │   │   ├── RecordingDetails.js
│   │   │   ├── RecordingsHeader.js
│   │   │   ├── RecordingsList.js
│   │   │   └── SpeakerNameEditor.js
│   │   ├── AdminApp.js          # Admin interface
│   │   └── UserApp.js           # Main user interface
│   ├── hooks/                   # Custom React hooks
│   │   ├── useExport.js
│   │   ├── useFolders.js
│   │   ├── useInterval.js
│   │   ├── useRecordings.js
│   │   └── useResponsive.js
│   ├── styles/                  # Modular CSS files
│   │   ├── audio/
│   │   │   └── audio-player.css
│   │   ├── components/
│   │   │   ├── custom-buttons.css    # Button styles including gradients
│   │   │   └── ui.css
│   │   ├── folders/
│   │   │   ├── folder-list-container.css
│   │   │   └── folders.css
│   │   ├── headset/
│   │   │   └── headset-setup.css     # Headset setup guide styles
│   │   ├── layout/
│   │   │   ├── app.css
│   │   │   ├── layout.css            # Core layout and background styles
│   │   │   └── user-badge.css
│   │   ├── modals/
│   │   │   └── modals.css
│   │   ├── recordings/
│   │   │   └── recordings.css        # Consolidated recording styles
│   │   └── index.css                # Main CSS entry point
│   ├── App.js                   # Root application component
│   └── index.js                 # Application entry point
├── .gitignore
├── LICENSE
├── package.json
└── README.md

Technology Stack

Backend

Infrastructure as Code: AWS CloudFormation (deployment.yml) for defining and deploying all cloud resources.
Compute: AWS Lambda (Node.js runtime) for serverless backend logic.
API: Amazon API Gateway (HTTP API) to create and manage RESTful endpoints.
Database: Amazon DynamoDB for storing metadata about recordings, users, and folders.
Storage: Amazon S3 for securely storing audio recordings and generated text files (transcripts, summaries).
Authentication: Amazon Cognito for user management and authentication.
AI Services:
- Amazon Transcribe: For speech-to-text conversion.
- Amazon Bedrock: For generative AI capabilities (summarization and chat) using foundation models.

Frontend

Framework: React.js
UI Library: AWS Amplify UI for React components.
API Integration: AWS Amplify library for connecting to the backend API Gateway and Cognito.
Styling: Custom CSS for application-specific styling.

Deployment Instructions

The Meeting Assistant uses a unified deployment script that handles both infrastructure and application code deployment with automatic AWS configuration generation.

Prerequisites

AWS CLI configured with appropriate permissions
Node.js and npm installed

jq JSON processor installed:

# macOS
brew install jq

# Ubuntu/Debian
sudo apt-get install jq

Bedrock Inference Profile created in your AWS account

Step 1: Configure Environment Variables

Infrastructure Configuration

cp infrastructure/config/.env.example infrastructure/config/.env.dev
cp infrastructure/config/.env.example infrastructure/config/.env.stage
cp infrastructure/config/.env.example infrastructure/config/.env.prod

Edit each file:

# infrastructure/config/.env.dev
STACK_NAME="MeetingAssistant-Dev"
AWS_REGION="us-east-1"
ADMIN_USER_EMAIL="admin@example.com"
BEDROCK_INFERENCE_PROFILE_ARN="arn:aws:bedrock:us-east-1:123456789012:inference-profile/..."
BEDROCK_MODEL_ID="us.anthropic.claude-3-7-sonnet-20250219-v1:0"

Application Configuration

cp config/env/.env.example config/env/.env.dev
cp config/env/.env.example config/env/.env.stage
cp config/env/.env.example config/env/.env.prod

Edit each file with environment-specific frontend settings (AWS values are auto-generated):

# config/env/.env.dev
# Add any environment-specific frontend configuration here
# AWS-specific values are auto-generated in .env.aws

Step 2: Deploy Using the Unified Script

The deploy.sh script supports four deployment modes:

Deploy Everything (Recommended)

./deploy.sh all dev    # Deploy infrastructure, update config, and deploy code
./deploy.sh all stage
./deploy.sh all prod

Deploy Infrastructure Only

./deploy.sh infra dev  # Deploy only the AWS infrastructure
./deploy.sh infra stage
./deploy.sh infra prod

Update Frontend Configuration

./deploy.sh config dev # Generate .env.aws file from CloudFormation outputs
./deploy.sh config stage
./deploy.sh config prod

Deploy Code Only

./deploy.sh code dev   # Deploy only the application code
./deploy.sh code stage
./deploy.sh code prod

Step 3: What the Deployment Script Does

Infrastructure Deployment (`infra` or `all`)

Creates S3 bucket for CloudFormation templates
Uploads modular templates to the bucket
Deploys the root CloudFormation stack with all child stacks

Configuration Update (`config` or `all`)

Fetches CloudFormation stack outputs (User Pool ID, API Endpoint, etc.)
Generates config/env/.env.aws with AWS-specific environment variables
Auto-updates frontend configuration without manual intervention

Code Deployment (`code` or `all`)

Installs dependencies with npm install
Builds the React application using both base and AWS environment files
Builds Electron app (production only)
Syncs build folder to S3 bucket
Invalidates CloudFront cache for immediate updates

Step 5: Run the Application Locally

Install the project dependencies:
```
npm install
```
Start the React development server:
```
npm start
```
Open your browser and navigate to http://localhost:3000 to use the application.

Step 4: Desktop Application Downloads

The application automatically builds and deploys desktop versions for Windows and macOS during production deployment. Users can download these applications directly from the web interface.

Building Desktop Applications

# Build for all platforms (Windows and Mac)
npm run electron:build:all

# Build for specific platforms
npm run electron:build:win    # Windows only
npm run electron:build:mac    # macOS only

The desktop applications are automatically built and uploaded to the S3 bucket during deployment and made available through download links in the web interface.

Step 5: Building for Different Environments

The application supports building for different environments (development, staging, production). Each environment will generate an application with a different name:

Development: MeetingAssistant-Dev
Staging: MeetingAssistant-Staging
Production: MeetingAssistant

# Build for development environment
npm run build:dev

# Build for staging environment
npm run build:staging

# Build for production environment
npm run build:prod

For Electron builds:

# Build Electron app for development environment
npm run electron:build:dev

# Build Electron app for staging environment
npm run electron:build:staging

# Build Electron app for production environment
npm run electron:build:prod

Headset Recording Setup

When using headphones or a headset for recording, the audio from the other person is played directly to your ears and not captured by your microphone. To record both sides of the conversation, you need to set up a virtual audio device:

macOS Setup

Install Blackhole (free)
Open Audio MIDI Setup from Applications > Utilities
Click + and create a Multi-Output Device
Check both your headphones AND Blackhole
Set this Multi-Output Device as your system output

Windows Setup

Install VB-Cable (free)
Right-click the speaker icon in taskbar → Sound settings
Under Output, select your headphones
Under Input, select "CABLE Output"
Open Sound Control Panel → Recording tab
Enable both your microphone and "CABLE Output"

The application will detect when you're using a headset and prompt you to set up the virtual audio device if needed.

Step 6: Deployment

You can use the provided deployment scripts to build and deploy the application for different environments:

Using npm scripts:

# Deploy for development environment
npm run deploy:dev

# Deploy for staging environment
npm run deploy:staging

# Deploy for production environment
npm run deploy:prod

Using the deploy.sh script:

# Deploy for development environment (default)
./scripts/deploy.sh
# or
./scripts/deploy.sh dev

# Deploy for staging environment
./scripts/deploy.sh staging

# Deploy for production environment
./scripts/deploy.sh prod

The deployment script will:

Clean up previous builds
Install dependencies
Build the application for the specified environment
Generate deployment artifacts in environment-specific directories:
- Development: dist/dev
- Staging: dist/staging
- Production: dist/prod

This ensures that building for one environment doesn't overwrite builds from other environments.

Environment Files and Version Control

The project maintains separate configuration files:

Infrastructure Configuration (excluded from version control):

infrastructure/config/.env.dev
infrastructure/config/.env.stage
infrastructure/config/.env.prod

Application Configuration (excluded from version control):

config/env/.env.dev - Environment-specific frontend settings
config/env/.env.stage - Environment-specific frontend settings
config/env/.env.prod - Environment-specific frontend settings
config/env/.env.aws - Auto-generated AWS configuration from CloudFormation outputs

These files contain sensitive information and should not be committed to your repository. Use the provided .env.example files as templates.

Important: The .env.aws file is automatically generated by the deployment script and should never be manually edited.

Troubleshooting

Auto-generate AWS config file

./deploy.sh config dev

Manually get stack outputs

aws cloudformation describe-stacks --stack-name MeetingAssistant-Dev --query "Stacks[0].Outputs"

Name		Name	Last commit message	Last commit date
config		config
infrastructure		infrastructure
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
deploy.sh		deploy.sh
package-lock.json		package-lock.json
package.json		package.json

Uh oh!

Latest commit

History

Folders and files

Repository files navigation