Inspiration

Regulatory compliance is notoriously dry and inaccessible. Legal teams, compliance officers, and business leaders spend hours deciphering hundreds of pages of EU legislation. We asked: What if compliance could be as easy as listening to a podcast on your commute?

The idea sparked from watching colleagues struggle to keep up with the Digital Operational Resilience Act (DORA) rollout. A 200-page PDF shouldn't require a law degree to understand. We wanted to democratize regulatory knowledge by leveraging AI to translate legalese into human conversations.


What It Does

EUCompli Explains is an end-to-end regulatory podcast generation platform:

  • Input Flexibility: Accepts both raw regulatory text and URLs to EU documents via an integrated web reader
  • AI-Powered Script Generation: Uses LLMs to convert dense legal text into natural, multi-host podcast dialogue with distinct personalities
  • Multi-Host Conversations: Generates dynamic back-and-forth between AI hosts (Marcus, Sara, and a third co-host), each with unique expertise perspectives
  • Text-to-Speech Synthesis: Produces high-quality audio using browser speech synthesis and server-side TTS APIs
  • Audio Recording & Editing: Record generated audio directly in the browser, trim segments, add ambient background music, and export in multiple formats (WebM, WAV, MP3)
  • Translation: One-click translation of scripts into 10+ languages with native speaker voices
  • Smart Editing: AI-powered script refinement — expand key points, add real-world examples, improve flow
  • Episode Publishing: Publish episodes to organized channels and series with SEO metadata, tags, and distribution to podcast platforms
  • RSS Feed Generation: Auto-generates standards-compliant RSS feeds with iTunes namespace support for direct submission to Spotify, Apple Podcasts, and other directories
  • Analytics & Ratings: Episode ratings, feedback collection, and SEO scoring to optimize discoverability
  • A/B Testing: Compare different script versions with weighted voting to determine the most engaging format
  • Newsletter System: Subscribe users to episode releases with automated campaign delivery
  • AI Summaries: Automatic key-point extraction, reading time estimation, and complexity scoring for every script
  • Host Q&A: Interactive chat with AI hosts to ask follow-up questions about the regulation

How We Built It

Architecture

The application follows a modern full-stack architecture:

  • Frontend: React 18 with TypeScript, Vite bundler, Tailwind CSS for styling, and shadcn/ui component library for a polished, accessible UI
  • Backend: Supabase — Postgres database with Row-Level Security (RLS), authentication, and 15+ Edge Functions running on Deno
  • AI/LLM: Gemini 2.5 Flash via a gateway API for script generation, smart editing, chapter extraction, transcript generation, and podcast summarization
  • TTS: LemonFox Text-to-Speech API for high-quality AI voice generation
  • Web Scraping: OCR.space and custom web reader integration for extracting content from URLs and scanned documents
  • State Management: React Context for auth, localStorage for draft persistence, BroadcastChannel for cross-tab synchronization
  • Audio Processing: Web Audio API for waveform visualization, audio trimming, mixing with background music, and format conversion
  • PWA: Service worker with offline caching, installable as a progressive web app
  • Internationalization: Google Cloud Translation API supporting 100+ languages

Database Schema

Designed a relational schema around:

  • podcast_scripts — stored generated scripts with metadata
  • podcast_episodes — published episodes with audio URLs, tags, SEO fields
  • podcast_channels / podcast_series — content organization hierarchy
  • episode_ratings, comments, episode_chapters, seo_metadata — engagement and discoverability
  • ab_tests, newsletter_subscribers, newsletter_campaigns — marketing and experimentation
  • ab_test_votes, episode_summaries — analytics and AI-generated insights

Edge Functions

Built 15+ serverless functions:

  • generate-podcast — LLM script generation with streaming
  • generate-ai-audio — Server-side TTS with voice selection
  • smart-edit — AI script refinement and expansion
  • generate-summary — Automatic key-point extraction and complexity scoring
  • podcast-rss — Standards-compliant RSS feed generation with iTunes support
  • submit-rating, ask-host, export-podcast, generate-chapters, generate-transcript
  • compute-ab-results, send-newsletter — Marketing automation

Challenges We Ran Into

  1. React Hook Errors from Stale Vite Cache: During rapid development, Vite's dependency optimization cache occasionally bundled multiple React instances, causing useRef null errors in Radix UI components. We now clear .vite cache and bump service worker versions on each release.

  2. Browser Audio Recording Permissions: getDisplayMedia for tab audio recording is blocked by Permissions Policy in sandboxed iframe environments. We added graceful fallback messaging directing users to the server-side TTS option, which produces higher quality audio anyway.

  3. LLM Streaming with JSON Parsing: Gemini's streaming SSE responses required careful buffering and JSON parsing to extract incremental script content without breaking on partial chunks.

  4. Database Schema Evolution: As features grew (A/B testing, newsletters, summaries), we needed careful migration planning to avoid breaking existing RLS policies and foreign key relationships.

  5. Cross-Tab State Synchronization: Users generating scripts in multiple tabs needed shared state awareness. We implemented BroadcastChannel to sync script data across browser tabs in real-time.

  6. Rating Submission Bug: Scripts were saved to the database but the Edge Function wasn't returning the inserted record's ID. The frontend couldn't associate ratings with episodes. Fixed by adding .select("id").single() to the insert query.


Accomplishments That We're Proud Of

  • Complete Podcast Pipeline: From regulatory text input → AI script → audio synthesis → RSS feed → platform distribution, all in one seamless workflow
  • Multi-Host AI Dialogue: Created distinct AI personalities (compliance expert, skeptical business leader, technical analyst) that naturally debate and explain regulations
  • Production-Ready RSS: Full iTunes podcast namespace compliance, public URL feeds, and one-click submission buttons for Spotify and Apple Podcasts
  • Audio Editor in Browser: Built a full waveform visualization, trim tool, and background music mixer using only Web Audio API — no external libraries
  • PWA with Offline Support: Service worker caching, installable to home screen, works offline for previously loaded content
  • A/B Testing Framework: Weighted scoring algorithm for comparing script variants, with voting and automated result computation
  • AI Summary Feature: Automatic extraction of key takeaways, reading time estimation, and topic categorization for every generated script
  • Zero-to-Publish in 5 Minutes: A compliance officer can paste a DORA link and have a published podcast episode with RSS feed ready for distribution in under 5 minutes

What We Learned

  • LLM Prompt Engineering is Critical: The quality of podcast scripts depends heavily on system prompts. Iterating on persona definitions, output formatting, and few-shot examples dramatically improved output quality.
  • Browser APIs Have Limitations: getDisplayMedia, MediaRecorder, and Web Audio each have browser-specific quirks and permission constraints. Server-side alternatives (Edge Function TTS) are more reliable for production.
  • Supabase Edge Functions Scale Well: Deno-based serverless functions with direct Supabase client integration made backend development fast and type-safe.
  • RSS is Surprisingly Complex: iTunes, Spotify, and Google Podcasts each have slightly different expectations for feed metadata. Supporting the full iTunes namespace was essential for compatibility.
  • UX Matters for AI Tools: Users need visibility into what the AI is doing. Streaming responses, progress indicators, and editable outputs before finalization significantly improved perceived reliability.
  • State Persistence is Hard: Balancing localStorage drafts, database persistence, and real-time cross-tab sync required careful architecture to avoid data loss or conflicts.

What's Next for EUCompli Explains

  1. Voice Cloning: Integrate voice cloning APIs so companies can use their own executives' voices for internal compliance podcasts
  2. Video Podcast Generation: Extend to video with auto-generated visuals, regulation diagrams, and talking-head avatars for YouTube distribution
  3. Regulation Change Detection: Monitor EU EUR-Lex for new/amended regulations and auto-generate update episodes
  4. Team Workspaces: Multi-user collaboration with role-based permissions for compliance teams
  5. Embeddable Player: <iframe> podcast player for embedding episodes in corporate intranets and LMS platforms
  6. Analytics Dashboard: Download stats, listener geography, engagement heatmaps per episode
  7. Custom AI Hosts: Users define their own host personalities, accents, and expertise areas
  8. API & Webhooks: Public REST API and webhooks for enterprise integration with compliance management systems
  9. Mobile Apps: Native iOS and Android apps with offline listening and push notifications for new episodes
  10. Enterprise SSO: SAML/OAuth SSO integration for corporate deployments

Built With

  • broadcastchannel
  • deno
  • gemini-2.5-flash
  • google-cloud-translation
  • itunes-podcast-namespace
  • lemonfox-tts
  • mediarecorder
  • ocr.space
  • openapi
  • postgresql
  • pwa
  • react
  • rss-2.0
  • service-workers
  • shadcn/ui
  • supabase
  • tailwind-css
  • typescript
  • vite
  • web-audio-api
Share this project:

Updates