__     __    _               _                    _
\ \   / /__ (_) ___ ___     / \   __ _  ___ _ __ | |_
 \ \ / / _ \| |/ __/ _ \   / _ \ / _` |/ _ \ '_ \| __|
  \ V / (_) | | (_|  __/  / ___ \ (_| |  __/ | | | |_
   \_/ \___/|_|\___\___| /_/   \_\__, |\___|_| |_|\__|
                                 |___/
  ____                                             _
 / ___|___  _ __ ___  _ __   ___  _ __   ___ _ __ | |_
| |   / _ \| '_ ` _ \| '_ \ / _ \| '_ \ / _ \ '_ \| __|
| |__| (_) | | | | | | |_) | (_) | | | |  __/ | | | |_
 \____\___/|_| |_| |_| .__/ \___/|_| |_|\___|_| |_|\__|
                     |_|

Voice Agent Component

Voice Agent Component is a reusable React and Framer voice interface backed by a Cloudflare Worker. It gives a website a conversational microphone button, live audio visualization, streaming Claude responses, server-side text-to-speech, optional speech-to-text fallback, and optional Cal.com booking tools.

---

What It Does

• Provides a single-file Framer code component for a voice assistant card.
• Streams assistant responses from a Cloudflare Worker using server-sent events.
• Buffers response text into sentence-sized chunks for low-latency speech playback.
• Uses browser Web Speech API when available and an OpenAI-compatible transcription endpoint as fallback.
• Uses an OpenAI-compatible text-to-speech endpoint for generated audio.
• Supports optional Cal.com tools for checking availability and booking meetings.
• Keeps API keys on the worker side instead of exposing them in the Framer component.

---

Repository Structure

component/
  VoiceAgent.tsx        Framer code component to paste into a Framer project

worker/
  src/index.ts          Cloudflare Worker routes and CORS handling
  src/claude.ts         Claude request handling, streaming, and optional tools
  src/tts.ts            OpenAI-compatible text-to-speech proxy
  src/stt.ts            OpenAI-compatible speech-to-text proxy
  src/calcom.ts         Optional Cal.com scheduling helpers
  src/knowledge-base.ts Generic starter knowledge base
  wrangler.toml         Worker configuration template

The original project-specific branding has been removed. Customize the component defaults, worker CORS origins, and knowledge base for your own site before publishing or deploying.

---

Framer Component

Use component/VoiceAgent.tsx as a Framer code component. The component exposes property controls for:

• Agent name, title, and avatar
• Worker API endpoint
• Optional custom system prompt
• Card, button, avatar, and waveform styling
• TTS voice and speed

Set the API Endpoint control to your deployed Worker URL, for example:

https://your-voice-agent.your-subdomain.workers.dev

---

Worker Setup

Requires Node.js 22 or newer. Install and validate the Worker package:

cd worker
npm install
npm run type-check

Run locally:

npm run dev

Deploy with Wrangler:

npm run deploy

---

Worker Configuration

Copy the example local environment file:

cp worker/.dev.vars.example worker/.dev.vars

Required secrets:

ANTHROPIC_API_KEY=
TTS_API_URL=
TTS_API_KEY=

Optional booking integration:

CAL_API_KEY=
CAL_EVENT_TYPE_ID=

Set production secrets with Wrangler:

npx wrangler secret put ANTHROPIC_API_KEY
npx wrangler secret put TTS_API_URL
npx wrangler secret put TTS_API_KEY
npx wrangler secret put CAL_API_KEY
npx wrangler secret put CAL_EVENT_TYPE_ID

Update worker/wrangler.toml so ALLOWED_ORIGINS includes your production domain and Framer preview domains.

---

Security Notes

• Do not put API keys in the Framer component.
• Keep .dev.vars, .env, and Wrangler local state out of Git.
• Restrict ALLOWED_ORIGINS to trusted domains before production use.
• Treat KNOWLEDGE_BASE as public-facing content; do not place private business data in it.
• Use platform-managed secrets for Worker deployments.

---

Technology

• React
• Framer code components
• Cloudflare Workers
• Claude Messages API
• OpenAI-compatible TTS and STT endpoints
• Optional Cal.com API integration

---

License

MIT