Back to Prototypes
Interactive Prototype

Smart Site

Voice-powered AI web builder — speak commands to modify a live website in real time

ReactViteWeb Speech APIClaude APIOpenAI APICSSAI Command Parsing

Overview

Smart Site is a prototype demonstrating real-time voice-driven UI modification. Users speak natural language commands — "add testimonials", "dark theme", "add a booking section" — and the website layout updates instantly with animated transitions. It showcases the full voice-to-UI pipeline: speech capture, AI command interpretation, structured JSON instructions, and reactive state rendering.

Voice Command Pipeline

Web Speech API (voice capture)
↓
Speech-to-text transcript
↓
interpretCommand() — fuzzy match or Claude/OpenAI API
↓
{ "action": "add_component", "component": "testimonials" }
↓
React state update → LayoutRenderer re-renders
↓
Animated section appears / disappears / theme changes

What You Can Say

"Add testimonials"
"Add a booking section"
"Add contact form"
"Dark theme" / "Light theme"
"Make it modern"
"Remove testimonials"
"Remove booking"
"Reset"

Architecture

  • Mock Mode (default): No API key needed. Commands are matched against mockCommands.json using exact and fuzzy string matching. Runs fully offline.
  • Live AI Mode: Drop in a VITE_CLAUDE_API_KEY or VITE_OPENAI_API_KEY to enable natural language understanding for arbitrary commands beyond the mock set.
  • LayoutRenderer: Maintains an ordered array of active component names. Any add/remove command mutates the array and React re-renders the new layout with CSS entry animations.
  • Theme & Style: CSS custom properties switched via data attributes on the root element — no JS style injection, purely declarative and transition-friendly.

What This Demonstrates

  • •Browser-native Web Speech API integration
  • •AI-as-interpreter pattern: voice → structured JSON → UI update
  • •Modular React component rendering from dynamic state
  • •Dual-mode AI (mock offline + live Claude/OpenAI)
  • •Futuristic animated UI with CSS transitions and keyframes
  • •Interactive prototyping and rapid demo-able product thinking

Run Locally

$ cd smart-site-prototype
$ npm install
$ npm run dev
# Open in Chrome for Web Speech API support
Repository