Legal Billing Voice Capture App

A minimal web application that allows attorneys to dictate billing entries via voice, automatically extracts structured billing data using AI, and pushes approved entries to LEAP practice management software via Zapier.

Features

• One-Click Recording: Large, touch-friendly button for easy voice recording
• AI Transcription: OpenAI Whisper API for accurate speech-to-text
• Intelligent Extraction: Claude AI extracts structured billing fields from natural dictation
• Review & Edit: All fields are editable before submission
• LEAP Integration: Pushes entries to LEAP via Zapier webhook
• Simple UX: Designed for users with limited computer proficiency

Quick Start

1. Configure API Keys

cp config.js config.local.js

Edit config.local.js with your API keys:

window.OPENAI_API_KEY = 'sk-...';
window.ANTHROPIC_API_KEY = 'sk-ant-...';
window.ZAPIER_WEBHOOK_URL = 'https://webhook.site/test';

2. Run Locally

npm run dev

Open http://localhost:3000

3. Deploy to Production

Push to GitHub, then deploy via:

• Netlify: Connect repository → Deploy
• Vercel: Import repository → Deploy
• GitHub Pages: Enable in repository settings

See QUICKSTART.md for detailed setup instructions.

Project Structure

BillingBot/
├── index.html              # Main UI
├── styles.css              # Styling
├── app.js                  # Application logic
├── config.js               # Configuration template
├── package.json            # Dependencies
└── README.md               # This file

How It Works

1. Record: Attorney clicks button and speaks billing entry
2. Transcribe: Audio sent to OpenAI Whisper API
3. Extract: Transcript analyzed by Claude AI to extract fields
4. Review: Attorney reviews/edits the 7 billing fields
5. Submit: Entry sent to Zapier webhook → LEAP

Data Model

Each billing entry contains 7 fields:

{
  date: "2025-01-14",           // YYYY-MM-DD
  initials: "JRS",              // Attorney initials
  clientName: "Johnson",        // Client name
  clientMatterNo: "4521",       // Matter number
  matterName: "Divorce",        // Matter type
  description: "Drafted...",    // Work description
  time: 2.0                     // Hours (decimal)
}

Configuration

Attorney Initials

Edit index.html lines 21-23:

<option value="JRS">JRS</option>
<option value="TMG">TMG</option>
<option value="SAL">SAL</option>

Zapier Webhook

1. Create Zap with "Webhooks by Zapier" trigger
2. Select "Catch Hook"
3. Copy webhook URL to config.local.js
4. Configure action to create LEAP time entry
5. Map fields: date, initials, clientName, clientMatterNo, matterName, description, time

Dictation Tips

Include these elements for best results:

• Time: "two hours", "1.5 hours", "45 minutes"
• Client: "Johnson", "Smith Estate"
• Matter: "matter 4521", "file 1234"
• Type: "divorce", "contract", "estate"
• Work: What you did (past tense)

Examples

• "Two hours today on the Johnson divorce, matter 4521, drafted custody response"
• "45 minutes on Smith estate, file 8765, call with executor about taxes"
• "Hour and a half on Martinez injury, matter 5555, prepared discovery"

Security Considerations

IMPORTANT: API keys in browser-side code are visible to users!

For Testing

• Use config.local.js (gitignored) with your API keys
• Test locally with npm run dev

For Production

You have two options:

1. Client-side API calls (simple but exposes keys):

   • Use environment variables at build time
   • Restrict API keys by domain/referrer in API dashboards
   • Best for internal use only

2. Serverless functions (recommended for security):

   • Create backend functions to proxy API calls
   • Keep keys on server side
   • See deployment guides for Netlify Functions or Vercel Functions

Browser Compatibility

• Chrome 49+
• Firefox 25+
• Safari 14.1+
• Edge 90+

Requirements:

• MediaRecorder API support
• HTTPS (for microphone access)
• localStorage
• ES6 JavaScript

Troubleshooting

Microphone Permission Denied

• Check browser permissions in settings
• Ensure site is using HTTPS
• Try refreshing the page

CORS Errors (Local Development)

• OpenAI/Anthropic APIs may block browser requests
• Use browser CORS extension for testing
• Or deploy to production where CORS is typically handled

Transcription Fails

• Verify OpenAI API key in config.local.js
• Check API key has credits available
• Check browser console for error details

Extraction Fails

• Verify Anthropic API key in config.local.js
• Check console for error messages
• User can still fill fields manually if extraction fails

Webhook Fails

• Test with https://webhook.site first
• Verify webhook URL is correct
• Check Zapier task history for errors

Cost Estimates

For 50 entries per day (~1 minute audio each):

• Whisper API: ~$0.006/minute = $6/month
• Claude API: ~$3/1M tokens × 500 tokens/entry = $1.50/month
• Hosting: Free (Netlify/Vercel/GitHub Pages)
• Zapier: Free tier (100 tasks/month) or Pro ($19.99)

Total: ~$7.50/month + Zapier

API Documentation

• OpenAI Whisper API
• Anthropic Claude API
• Zapier Webhooks

Development

Local Server

npm run dev

Runs http-server on port 3000

File Changes

The app uses vanilla JavaScript - just edit and refresh:

• index.html - UI structure
• styles.css - Styling
• app.js - Logic
• config.local.js - Your API keys (gitignored)

Support

For issues:

1. Check browser console for errors
2. Verify API keys are set correctly
3. Test webhook with webhook.site
4. Check API service status pages

License

Private use only. Not for distribution.