From 7eec1fe294cfd2a6b37cbd7bd92abd12bd110558 Mon Sep 17 00:00:00 2001
From: luke-speechify <289678208+luke-speechify@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:36:15 +0100
Subject: [PATCH 1/2] feat: add react-tts-component demo

A drop-in <100-line React component (SpeechifyVoice) that speaks any text
via the Speechify API, with the key held server-side in a route handler.
Hosted under /react-tts-component, gated with the shared Turnstile helper.
---
 README.md                                     |   1 +
 demos/react-tts-component/.env.example        |   1 +
 demos/react-tts-component/.gitignore          |   5 +
 demos/react-tts-component/README.md           |  62 +++++++++
 .../app/api/speak/route.ts                    |  34 +++++
 demos/react-tts-component/app/globals.css     | 121 ++++++++++++++++++
 demos/react-tts-component/app/layout.tsx      |  21 +++
 .../react-tts-component/app/lib/turnstile.ts  |  37 ++++++
 demos/react-tts-component/app/page.tsx        |  94 ++++++++++++++
 .../components/SpeechifyVoice.tsx             |  78 +++++++++++
 demos/react-tts-component/demo.json           |   6 +
 demos/react-tts-component/next.config.ts      |  13 ++
 demos/react-tts-component/package.json        |  26 ++++
 demos/react-tts-component/tsconfig.json       |  41 ++++++
 pnpm-lock.yaml                                |  28 ++++
 pnpm-workspace.yaml                           |   1 +
 site/public/index.html                        |   4 +-
 vercel.json                                   |   8 ++
 18 files changed, 579 insertions(+), 2 deletions(-)
 create mode 100644 demos/react-tts-component/.env.example
 create mode 100644 demos/react-tts-component/.gitignore
 create mode 100644 demos/react-tts-component/README.md
 create mode 100644 demos/react-tts-component/app/api/speak/route.ts
 create mode 100644 demos/react-tts-component/app/globals.css
 create mode 100644 demos/react-tts-component/app/layout.tsx
 create mode 100644 demos/react-tts-component/app/lib/turnstile.ts
 create mode 100644 demos/react-tts-component/app/page.tsx
 create mode 100644 demos/react-tts-component/components/SpeechifyVoice.tsx
 create mode 100644 demos/react-tts-component/demo.json
 create mode 100644 demos/react-tts-component/next.config.ts
 create mode 100644 demos/react-tts-component/package.json
 create mode 100644 demos/react-tts-component/tsconfig.json

diff --git a/README.md b/README.md
index b23a0c8..f0d9c7b 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,7 @@ Demos with a **Live** link run in your browser at [demos.speechify.ai](https://d
 | [`demos/mastra-agent-speechify/`](./demos/mastra-agent-speechify) | TypeScript (Mastra) |  | Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`. |
 | [`demos/voice-agent-showcase/`](./demos/voice-agent-showcase) | Cloudflare Workers |  | One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting. |
 | [`demos/vercel-ai-sdk/`](./demos/vercel-ai-sdk) | TypeScript (Vercel AI SDK) |  | Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`. |
+| [`demos/react-tts-component/`](./demos/react-tts-component) | Next.js | [Open](https://demos.speechify.ai/react-tts-component) | A drop-in <100-line React component that speaks any text. Type, hit play, hear it — the API key stays server-side in a route handler. |
 <!-- DEMOS:END -->
 
 ## Get an API key
diff --git a/demos/react-tts-component/.env.example b/demos/react-tts-component/.env.example
new file mode 100644
index 0000000..534cec4
--- /dev/null
+++ b/demos/react-tts-component/.env.example
@@ -0,0 +1 @@
+SPEECHIFY_API_KEY=your_api_key_here
diff --git a/demos/react-tts-component/.gitignore b/demos/react-tts-component/.gitignore
new file mode 100644
index 0000000..95d1bcb
--- /dev/null
+++ b/demos/react-tts-component/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.next/
+.env
+next-env.d.ts
+*.tsbuildinfo
diff --git a/demos/react-tts-component/README.md b/demos/react-tts-component/README.md
new file mode 100644
index 0000000..ad8b273
--- /dev/null
+++ b/demos/react-tts-component/README.md
@@ -0,0 +1,62 @@
+# Voice in a React app
+
+A drop-in React component that adds a Speechify voice to any app. Give it text,
+it plays that text as speech. The Speechify API key never reaches the browser —
+synthesis goes through a one-route server proxy.
+
+Pairs with the Speechify post *Adding a voice to a React app with the Speechify
+SDK*. It complements (doesn't repeat)
+[Building an AI Voice Cloning Web App with Next.js and Speechify](https://speechify.ai/blog/building-an-ai-voice-cloning-web-app-with-nextjs-and-speechify)
+— read that one for the full cloning app.
+
+## What you get
+
+- **[`components/SpeechifyVoice.tsx`](./components/SpeechifyVoice.tsx)** — the
+  whole point. Under 100 lines. Props: `text`, optional `voiceId`, `endpoint`,
+  `label`, and a `getToken` hook for abuse-gated deployments. Copy it into your
+  own app.
+- **[`app/api/speak/route.ts`](./app/api/speak/route.ts)** — a Next.js route
+  handler that calls `client.audio.speech(...)` server-side and returns base64
+  MP3, so `SPEECHIFY_API_KEY` stays on the server.
+- A small page (`app/page.tsx`) that wires the component to a textarea and a
+  voice picker.
+
+## Run it yourself
+
+```bash
+cp .env.example .env      # paste your Speechify API key
+pnpm install
+pnpm dev                  # http://localhost:8767/react-tts-component
+```
+
+Get an API key at [platform.speechify.ai/api-keys](https://platform.speechify.ai/api-keys).
+
+## Use the component in your app
+
+```tsx
+import { SpeechifyVoice } from "./components/SpeechifyVoice";
+
+<SpeechifyVoice text="Hello from Speechify." voiceId="geffen_32" />;
+```
+
+The component POSTs `{ text, voiceId }` to `endpoint` (default `/api/speak`),
+expects `{ audio }` (base64 MP3) back, and plays it. Point `endpoint` at your
+own proxy route in any framework — the component doesn't care what's behind it.
+
+## Where the code came from
+
+Built on the [`@speechify/api`](https://www.npmjs.com/package/@speechify/api)
+TTS client — one `client.audio.speech({ input, voice_id, audio_format, model })`
+call. Model `simba-3.2`, MP3 output. Browse voices at
+[platform.speechify.ai](https://platform.speechify.ai).
+
+## Abuse protection (hosted)
+
+The hosted build gates `/api/speak` with Cloudflare Turnstile via the shared
+[`app/lib/turnstile.ts`](./app/lib/turnstile.ts) helper. It fail-opens when
+`TURNSTILE_SECRET_KEY` is unset, so local dev and forks work with zero config.
+
+## Prerequisites
+
+- Node 20+.
+- A Speechify API key (the free tier covers this demo).
diff --git a/demos/react-tts-component/app/api/speak/route.ts b/demos/react-tts-component/app/api/speak/route.ts
new file mode 100644
index 0000000..7148bc4
--- /dev/null
+++ b/demos/react-tts-component/app/api/speak/route.ts
@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import { SpeechifyClient, SpeechifyError } from "@speechify/api";
+import { verifyTurnstile } from "../../lib/turnstile";
+
+export const runtime = "nodejs";
+
+const client = new SpeechifyClient({ token: process.env.SPEECHIFY_API_KEY });
+
+export async function POST(req: Request) {
+  if (!(await verifyTurnstile(req))) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  const { text, voiceId } = await req.json();
+
+  if (typeof text !== "string" || !text.trim()) {
+    return NextResponse.json({ error: "text is required" }, { status: 400 });
+  }
+
+  try {
+    const speech = await client.audio.speech({
+      input: text.slice(0, 2000),
+      voice_id: typeof voiceId === "string" && voiceId ? voiceId : "geffen_32",
+      audio_format: "mp3",
+      model: "simba-3.2",
+    });
+    return NextResponse.json({ audio: speech.audio_data });
+  } catch (err) {
+    if (err instanceof SpeechifyError) {
+      return NextResponse.json({ error: err.message }, { status: err.statusCode ?? 500 });
+    }
+    throw err;
+  }
+}
diff --git a/demos/react-tts-component/app/globals.css b/demos/react-tts-component/app/globals.css
new file mode 100644
index 0000000..3268cf2
--- /dev/null
+++ b/demos/react-tts-component/app/globals.css
@@ -0,0 +1,121 @@
+:root {
+  color-scheme: light dark;
+  --fg: #111;
+  --bg: #fff;
+  --muted: #666;
+  --border: #ddd;
+  --surface: #f6f6f6;
+  --accent: #111;
+  --accent-fg: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fg: #f2f2f2;
+    --bg: #0c0c0c;
+    --muted: #999;
+    --border: #2a2a2a;
+    --surface: #161616;
+    --accent: #f2f2f2;
+    --accent-fg: #0c0c0c;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 2rem 1rem;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+}
+
+main {
+  max-width: 34rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+h1 {
+  font-size: 1.6rem;
+  font-weight: 500;
+  margin: 0 0 0.5rem;
+}
+
+.lead {
+  color: var(--muted);
+  margin: 0;
+}
+
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--surface);
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.step {
+  border: 1px solid var(--border);
+  border-radius: 0.6rem;
+  padding: 1.1rem;
+  background: var(--surface);
+}
+
+.step h2 {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--muted);
+  margin: 0 0 0.75rem;
+}
+
+textarea,
+select {
+  width: 100%;
+  font: inherit;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.4rem;
+  padding: 0.6rem 0.7rem;
+  resize: vertical;
+}
+
+.play {
+  display: flex;
+  justify-content: center;
+}
+
+.sv-btn {
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--accent-fg);
+  background: var(--accent);
+  border: none;
+  border-radius: 999px;
+  padding: 0.7rem 2rem;
+}
+
+.sv-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+footer {
+  color: var(--muted);
+  font-size: 0.9rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1rem;
+}
+
+footer a {
+  color: inherit;
+}
diff --git a/demos/react-tts-component/app/layout.tsx b/demos/react-tts-component/app/layout.tsx
new file mode 100644
index 0000000..c099c8e
--- /dev/null
+++ b/demos/react-tts-component/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import Script from "next/script";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Voice in a React app with Speechify",
+  description:
+    "A drop-in React component that speaks any text with the Speechify API, key held server-side.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Script src="/turnstile.js" strategy="beforeInteractive" />
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/demos/react-tts-component/app/lib/turnstile.ts b/demos/react-tts-component/app/lib/turnstile.ts
new file mode 100644
index 0000000..6fee926
--- /dev/null
+++ b/demos/react-tts-component/app/lib/turnstile.ts
@@ -0,0 +1,37 @@
+// Verifies a Turnstile token against Cloudflare siteverify. Returns true iff
+// the caller is allowed to proceed.
+//
+// Fail-open contract: when TURNSTILE_SECRET_KEY isn't set (local dev, fork
+// deploys, anywhere the operator hasn't configured Turnstile) OR when the
+// siteverify request itself errors, returns true. The alternative is
+// breaking the demo whenever Turnstile isn't configured — a worse experience
+// than leaving the abuse gate briefly open. Real prod hardening would flip
+// this to fail-closed; this is a reference demo.
+const SITEVERIFY_URL =
+  "https://challenges.cloudflare.com/turnstile/v0/siteverify";
+
+export async function verifyTurnstile(req: Request): Promise<boolean> {
+  const secret = process.env.TURNSTILE_SECRET_KEY;
+  if (!secret) return true;
+
+  const token = req.headers.get("x-turnstile-token");
+  if (!token) return false;
+
+  const form = new URLSearchParams();
+  form.set("secret", secret);
+  form.set("response", token);
+  const remoteip = req.headers
+    .get("x-forwarded-for")
+    ?.split(",")[0]
+    ?.trim();
+  if (remoteip) form.set("remoteip", remoteip);
+
+  try {
+    const cf = await fetch(SITEVERIFY_URL, { method: "POST", body: form });
+    if (!cf.ok) return true;
+    const result = (await cf.json()) as { success?: boolean };
+    return Boolean(result?.success);
+  } catch {
+    return true;
+  }
+}
diff --git a/demos/react-tts-component/app/page.tsx b/demos/react-tts-component/app/page.tsx
new file mode 100644
index 0000000..242f7ea
--- /dev/null
+++ b/demos/react-tts-component/app/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { SpeechifyVoice } from "../components/SpeechifyVoice";
+
+// Curated simba-3.2 voices. Browse the full catalog at platform.speechify.ai.
+const VOICES = ["geffen_32", "harper_32", "dominic_32", "beatrice_32", "wyatt_32"];
+
+type TurnstileHandle = {
+  getToken: (opts?: { timeout?: number }) => Promise<string | null>;
+  reset: () => void;
+};
+
+declare global {
+  interface Window {
+    SpeechifyTurnstile?: {
+      render: (target: string | HTMLElement, options?: unknown) => Promise<TurnstileHandle>;
+    };
+  }
+}
+
+export default function Home() {
+  const [text, setText] = useState("Adding a voice to a React app takes about ten lines.");
+  const [voiceId, setVoiceId] = useState(VOICES[0]);
+  const turnstileRef = useRef<TurnstileHandle | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      while (!window.SpeechifyTurnstile && !cancelled) {
+        await new Promise((r) => setTimeout(r, 30));
+      }
+      if (cancelled) return;
+      turnstileRef.current = await window.SpeechifyTurnstile!.render("#turnstile-container");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function getToken() {
+    const t = turnstileRef.current;
+    if (!t) return null;
+    const token = await t.getToken();
+    t.reset();
+    return token;
+  }
+
+  return (
+    <main>
+      <header>
+        <h1>Voice in a React app</h1>
+        <p className="lead">
+          One component, <code>&lt;SpeechifyVoice&gt;</code>, turns any text into speech. The API
+          key stays on the server — the button just calls your own route handler.
+        </p>
+      </header>
+
+      <div className="step">
+        <h2>Text</h2>
+        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={4} />
+      </div>
+
+      <div className="step">
+        <h2>Voice</h2>
+        <select value={voiceId} onChange={(e) => setVoiceId(e.target.value)}>
+          {VOICES.map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div id="turnstile-container" />
+
+      <div className="play">
+        <SpeechifyVoice text={text} voiceId={voiceId} getToken={getToken} />
+      </div>
+
+      <footer>
+        <p>
+          The star of the demo is{" "}
+          <code>components/SpeechifyVoice.tsx</code> — copy it into your own app. Pairs with the
+          Speechify guide{" "}
+          <a href="https://speechify.ai/blog/building-an-ai-voice-cloning-web-app-with-nextjs-and-speechify">
+            Building an AI voice cloning web app with Next.js
+          </a>
+          .
+        </p>
+      </footer>
+    </main>
+  );
+}
diff --git a/demos/react-tts-component/components/SpeechifyVoice.tsx b/demos/react-tts-component/components/SpeechifyVoice.tsx
new file mode 100644
index 0000000..81d688b
--- /dev/null
+++ b/demos/react-tts-component/components/SpeechifyVoice.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+type Props = {
+  /** The text to speak. */
+  text: string;
+  /** Server route that proxies Speechify so the API key stays server-side. */
+  endpoint?: string;
+  /** A Speechify voice id (see platform.speechify.ai). */
+  voiceId?: string;
+  /** Button label when idle. */
+  label?: string;
+  /**
+   * Optional token provider for abuse-gated deployments (e.g. Cloudflare
+   * Turnstile). Return null to send the request unauthenticated.
+   */
+  getToken?: () => Promise<string | null>;
+};
+
+type State = "idle" | "loading" | "playing" | "error";
+
+/**
+ * Adds a voice to any React app. Give it text, it plays that text as speech.
+ * The whole component is client-side; the Speechify API key never touches the
+ * browser because synthesis goes through your own `endpoint` route handler.
+ */
+export function SpeechifyVoice({
+  text,
+  endpoint = "/api/speak",
+  voiceId = "geffen_32",
+  label = "▶ Play",
+  getToken,
+}: Props) {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [state, setState] = useState<State>("idle");
+
+  async function speak() {
+    if (!text.trim() || state === "loading") return;
+    setState("loading");
+    try {
+      const headers: Record<string, string> = { "content-type": "application/json" };
+      const token = getToken ? await getToken() : null;
+      if (token) headers["x-turnstile-token"] = token;
+
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ text, voiceId }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+
+      const { audio } = (await res.json()) as { audio: string };
+      const el = audioRef.current!;
+      el.src = `data:audio/mpeg;base64,${audio}`;
+      el.onended = () => setState("idle");
+      await el.play();
+      setState("playing");
+    } catch {
+      setState("error");
+    }
+  }
+
+  return (
+    <>
+      <button onClick={speak} disabled={state === "loading"} className="sv-btn">
+        {state === "loading"
+          ? "Synthesizing…"
+          : state === "playing"
+            ? "▮▮ Playing"
+            : state === "error"
+              ? "Retry"
+              : label}
+      </button>
+      <audio ref={audioRef} hidden />
+    </>
+  );
+}
diff --git a/demos/react-tts-component/demo.json b/demos/react-tts-component/demo.json
new file mode 100644
index 0000000..4c903b1
--- /dev/null
+++ b/demos/react-tts-component/demo.json
@@ -0,0 +1,6 @@
+{
+  "order": 200,
+  "title": "Voice in a React app",
+  "stack": "Next.js",
+  "blurb": "A drop-in <100-line React component that speaks any text. Type, hit play, hear it — the API key stays server-side in a route handler."
+}
diff --git a/demos/react-tts-component/next.config.ts b/demos/react-tts-component/next.config.ts
new file mode 100644
index 0000000..aefa820
--- /dev/null
+++ b/demos/react-tts-component/next.config.ts
@@ -0,0 +1,13 @@
+import type { NextConfig } from "next";
+
+const basePath = "/react-tts-component";
+
+const nextConfig: NextConfig = {
+  // The Speechify SDK is server-only; keep it out of the client bundle.
+  serverExternalPackages: ["@speechify/api"],
+  // Mounted as a Vercel Service under this subpath on demos.speechify.ai.
+  // Standalone (`npm run dev`) also serves under this prefix.
+  basePath,
+};
+
+export default nextConfig;
diff --git a/demos/react-tts-component/package.json b/demos/react-tts-component/package.json
new file mode 100644
index 0000000..0981215
--- /dev/null
+++ b/demos/react-tts-component/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-tts-component",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Drop-in React component that adds a Speechify voice to any app",
+  "scripts": {
+    "dev": "next dev -p 8767",
+    "build": "next build",
+    "start": "next start -p 8767",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@speechify/api": "^3.0.1",
+    "next": "^16.2.10",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "typescript": "^5.6.0"
+  }
+}
diff --git a/demos/react-tts-component/tsconfig.json b/demos/react-tts-component/tsconfig.json
new file mode 100644
index 0000000..637ff2c
--- /dev/null
+++ b/demos/react-tts-component/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2022"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b4e8265..af9336e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,34 @@ importers:
         specifier: ^5.6.0
         version: 5.9.3
 
+  demos/react-tts-component:
+    dependencies:
+      '@speechify/api':
+        specifier: ^3.0.1
+        version: 3.0.1
+      next:
+        specifier: ^16.2.10
+        version: 16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.7
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.7(react@19.2.7)
+    devDependencies:
+      '@types/node':
+        specifier: ^22.0.0
+        version: 22.20.1
+      '@types/react':
+        specifier: ^19.2.0
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: ^19.2.0
+        version: 19.2.3(@types/react@19.2.17)
+      typescript:
+        specifier: ^5.6.0
+        version: 5.9.3
+
   site: {}
 
 packages:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index dd085e3..b8c97c7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,3 +8,4 @@
 packages:
   - "site"
   - "demos/next-voice-cloning-app"
+  - "demos/react-tts-component"
diff --git a/site/public/index.html b/site/public/index.html
index c1ded39..456a1cd 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -276,7 +276,7 @@
     <!-- End PostHog -->
 
     <!-- JSONLD:START -->
-    <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://demos.speechify.ai/#org","name":"Speechify AI","url":"https://speechify.ai","logo":"https://demos.speechify.ai/apple-touch-icon.png","sameAs":["https://github.com/SpeechifyInc","https://x.com/SpeechifyAI","https://www.linkedin.com/company/speechifyinc/"]},{"@type":"WebSite","@id":"https://demos.speechify.ai/#website","url":"https://demos.speechify.ai/","name":"Speechify Demos","description":"Open-source demos built on the Speechify API — text-to-speech, voice cloning, and real-time voice agents.","publisher":{"@id":"https://demos.speechify.ai/#org"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"SpeechifyAI","item":"https://speechify.ai"},{"@type":"ListItem","position":2,"name":"Demos","item":"https://demos.speechify.ai/"}]},{"@type":"ItemList","name":"Speechify API demos","numberOfItems":15,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"SoftwareApplication","name":"Voice cloning web app","description":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/next-voice-cloning-app","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":2,"item":{"@type":"SoftwareApplication","name":"Captions from speech marks","description":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/captions-speech-marks","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":3,"item":{"@type":"SoftwareApplication","name":"Voice cloning narration","description":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-cloning-narration","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":4,"item":{"@type":"SoftwareApplication","name":"Audiobook pipeline","description":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/audiobook-pipeline","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":5,"item":{"@type":"SoftwareApplication","name":"LiveKit agent (official plugin)","description":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-agent-speechify-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":6,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":7,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-node","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":8,"item":{"@type":"SoftwareApplication","name":"SSML emotion TTS","description":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/ssml-emotion-tts","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":9,"item":{"@type":"SoftwareApplication","name":"Web audio streaming","description":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/web-audio-streaming","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":10,"item":{"@type":"SoftwareApplication","name":"Deepgram voice agent shim","description":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/deepgram-voice-agent-shim","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":11,"item":{"@type":"SoftwareApplication","name":"Vapi custom voice","description":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vapi-custom-voice","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":12,"item":{"@type":"SoftwareApplication","name":"Pipecat agent","description":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/pipecat-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":13,"item":{"@type":"SoftwareApplication","name":"Mastra voice agent","description":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/mastra-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":14,"item":{"@type":"SoftwareApplication","name":"Voice agent capability showcase","description":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-agent-showcase","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":15,"item":{"@type":"SoftwareApplication","name":"Vercel AI SDK","description":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vercel-ai-sdk","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What are the Speechify demos?","acceptedAnswer":{"@type":"Answer","text":"Open-source, self-contained example apps for the Speechify API — text-to-speech, voice cloning, SSML, and real-time voice agents. Each demo lives in its own folder, runs on its own, and links to its source. Hosted demos run live in the browser."}},{"@type":"Question","name":"Are the demos free and open source?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every demo is MIT-licensed and published at github.com/Speechify-AI/demos. Clone a folder, add your Speechify API key, and run it."}},{"@type":"Question","name":"What do I need to run a demo?","acceptedAnswer":{"@type":"Answer","text":"A Speechify API key from platform.speechify.ai/api-keys, plus the runtime the demo uses (Node, Python, or Go). Each demo's README lists its exact prerequisites."}},{"@type":"Question","name":"Which demos can I try without installing anything?","acceptedAnswer":{"@type":"Answer","text":"Demos marked LIVE run hosted at demos.speechify.ai/<demo-name>. The rest are clone-and-run from the repo."}}]}]}</script>
+    <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://demos.speechify.ai/#org","name":"Speechify AI","url":"https://speechify.ai","logo":"https://demos.speechify.ai/apple-touch-icon.png","sameAs":["https://github.com/SpeechifyInc","https://x.com/SpeechifyAI","https://www.linkedin.com/company/speechifyinc/"]},{"@type":"WebSite","@id":"https://demos.speechify.ai/#website","url":"https://demos.speechify.ai/","name":"Speechify Demos","description":"Open-source demos built on the Speechify API — text-to-speech, voice cloning, and real-time voice agents.","publisher":{"@id":"https://demos.speechify.ai/#org"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"SpeechifyAI","item":"https://speechify.ai"},{"@type":"ListItem","position":2,"name":"Demos","item":"https://demos.speechify.ai/"}]},{"@type":"ItemList","name":"Speechify API demos","numberOfItems":16,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"SoftwareApplication","name":"Voice cloning web app","description":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/next-voice-cloning-app","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":2,"item":{"@type":"SoftwareApplication","name":"Captions from speech marks","description":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/captions-speech-marks","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":3,"item":{"@type":"SoftwareApplication","name":"Voice cloning narration","description":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-cloning-narration","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":4,"item":{"@type":"SoftwareApplication","name":"Audiobook pipeline","description":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/audiobook-pipeline","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":5,"item":{"@type":"SoftwareApplication","name":"LiveKit agent (official plugin)","description":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-agent-speechify-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":6,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-python","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":7,"item":{"@type":"SoftwareApplication","name":"LiveKit voice agent","description":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/livekit-voice-agent-node","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":8,"item":{"@type":"SoftwareApplication","name":"SSML emotion TTS","description":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/ssml-emotion-tts","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":9,"item":{"@type":"SoftwareApplication","name":"Web audio streaming","description":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/web-audio-streaming","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":10,"item":{"@type":"SoftwareApplication","name":"Deepgram voice agent shim","description":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/deepgram-voice-agent-shim","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":11,"item":{"@type":"SoftwareApplication","name":"Vapi custom voice","description":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vapi-custom-voice","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":12,"item":{"@type":"SoftwareApplication","name":"Pipecat agent","description":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/pipecat-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":13,"item":{"@type":"SoftwareApplication","name":"Mastra voice agent","description":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/mastra-agent-speechify","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":14,"item":{"@type":"SoftwareApplication","name":"Voice agent capability showcase","description":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/voice-agent-showcase","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":15,"item":{"@type":"SoftwareApplication","name":"Vercel AI SDK","description":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://github.com/Speechify-AI/demos/tree/main/demos/vercel-ai-sdk","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}},{"@type":"ListItem","position":16,"item":{"@type":"SoftwareApplication","name":"Voice in a React app","description":"A drop-in <100-line React component that speaks any text. Type, hit play, hear it — the API key stays server-side in a route handler.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","url":"https://demos.speechify.ai/react-tts-component","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What are the Speechify demos?","acceptedAnswer":{"@type":"Answer","text":"Open-source, self-contained example apps for the Speechify API — text-to-speech, voice cloning, SSML, and real-time voice agents. Each demo lives in its own folder, runs on its own, and links to its source. Hosted demos run live in the browser."}},{"@type":"Question","name":"Are the demos free and open source?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every demo is MIT-licensed and published at github.com/Speechify-AI/demos. Clone a folder, add your Speechify API key, and run it."}},{"@type":"Question","name":"What do I need to run a demo?","acceptedAnswer":{"@type":"Answer","text":"A Speechify API key from platform.speechify.ai/api-keys, plus the runtime the demo uses (Node, Python, or Go). Each demo's README lists its exact prerequisites."}},{"@type":"Question","name":"Which demos can I try without installing anything?","acceptedAnswer":{"@type":"Answer","text":"Demos marked LIVE run hosted at demos.speechify.ai/<demo-name>. The rest are clone-and-run from the repo."}}]}]}</script>
 <!-- JSONLD:END -->
   </head>
   <body>
@@ -368,7 +368,7 @@ <h2>FAQ</h2>
 
     <script>
       /* DEMOS_DATA:START */
-      window.__DEMOS__ = [{"slug":"next-voice-cloning-app","repoPath":"demos/next-voice-cloning-app","title":"Voice cloning web app","stack":"Next.js","hosted":true,"blurb":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers."},{"slug":"captions-speech-marks","repoPath":"demos/captions-speech-marks","title":"Captions from speech marks","stack":"TypeScript (native)","hosted":false,"blurb":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included."},{"slug":"voice-cloning-narration","repoPath":"demos/voice-cloning-narration","title":"Voice cloning narration","stack":"TypeScript (native)","hosted":false,"blurb":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle."},{"slug":"audiobook-pipeline","repoPath":"demos/audiobook-pipeline","title":"Audiobook pipeline","stack":"Python (SDK)","hosted":false,"blurb":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg."},{"slug":"livekit-agent-speechify-python","repoPath":"demos/livekit-agent-speechify-python","title":"LiveKit agent (official plugin)","stack":"Python (LiveKit)","hosted":false,"blurb":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"livekit-voice-agent-python","repoPath":"demos/livekit-voice-agent-python","title":"LiveKit voice agent","stack":"Python (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work."},{"slug":"livekit-voice-agent-node","repoPath":"demos/livekit-voice-agent-node","title":"LiveKit voice agent","stack":"TypeScript (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"ssml-emotion-tts","repoPath":"demos/ssml-emotion-tts","title":"SSML emotion TTS","stack":"TypeScript (SDK)","hosted":false,"blurb":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request."},{"slug":"web-audio-streaming","repoPath":"demos/web-audio-streaming","title":"Web audio streaming","stack":"TypeScript (browser)","hosted":false,"blurb":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side."},{"slug":"deepgram-voice-agent-shim","repoPath":"demos/deepgram-voice-agent-shim","title":"Deepgram voice agent shim","stack":"Go shim + Node","hosted":false,"blurb":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side."},{"slug":"vapi-custom-voice","repoPath":"demos/vapi-custom-voice","title":"Vapi custom voice","stack":"Go shim","hosted":false,"blurb":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side."},{"slug":"pipecat-agent-speechify","repoPath":"demos/pipecat-agent-speechify","title":"Pipecat agent","stack":"Python (Pipecat)","hosted":false,"blurb":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService."},{"slug":"mastra-agent-speechify","repoPath":"demos/mastra-agent-speechify","title":"Mastra voice agent","stack":"TypeScript (Mastra)","hosted":false,"blurb":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`."},{"slug":"voice-agent-showcase","repoPath":"demos/voice-agent-showcase","title":"Voice agent capability showcase","stack":"Cloudflare Workers","hosted":false,"blurb":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting."},{"slug":"vercel-ai-sdk","repoPath":"demos/vercel-ai-sdk","title":"Vercel AI SDK","stack":"TypeScript (Vercel AI SDK)","hosted":false,"blurb":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`."}];
+      window.__DEMOS__ = [{"slug":"next-voice-cloning-app","repoPath":"demos/next-voice-cloning-app","title":"Voice cloning web app","stack":"Next.js","hosted":true,"blurb":"Upload a sample, clone the voice, synthesize with the clone. The API key stays server-side in route handlers."},{"slug":"captions-speech-marks","repoPath":"demos/captions-speech-marks","title":"Captions from speech marks","stack":"TypeScript (native)","hosted":false,"blurb":"Synthesizes audio and builds a WebVTT caption file from the speech marks the API returns in the same response. Karaoke-highlight HTML demo included."},{"slug":"voice-cloning-narration","repoPath":"demos/voice-cloning-narration","title":"Voice cloning narration","stack":"TypeScript (native)","hosted":false,"blurb":"Clones a voice from a 10-30 sec WAV sample, synthesizes with the new voice, deletes the clone. End-to-end lifecycle."},{"slug":"audiobook-pipeline","repoPath":"demos/audiobook-pipeline","title":"Audiobook pipeline","stack":"Python (SDK)","hosted":false,"blurb":"Chunks long-form text on sentence boundaries, synthesizes each chunk via the Speechify Python SDK, concatenates the MP3s with ffmpeg."},{"slug":"livekit-agent-speechify-python","repoPath":"demos/livekit-agent-speechify-python","title":"LiveKit agent (official plugin)","stack":"Python (LiveKit)","hosted":false,"blurb":"Real-time voice assistant using LiveKit's official livekit-plugins-speechify package for TTS, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"livekit-voice-agent-python","repoPath":"demos/livekit-voice-agent-python","title":"LiveKit voice agent","stack":"Python (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession. Prefer the official LiveKit plugin demo for new work."},{"slug":"livekit-voice-agent-node","repoPath":"demos/livekit-voice-agent-node","title":"LiveKit voice agent","stack":"TypeScript (LiveKit)","hosted":false,"blurb":"Legacy Speechify-owned LiveKit TTS demo, with Deepgram STT and an OpenAI LLM in a LiveKit AgentSession."},{"slug":"ssml-emotion-tts","repoPath":"demos/ssml-emotion-tts","title":"SSML emotion TTS","stack":"TypeScript (SDK)","hosted":false,"blurb":"Drives emotion, pauses, prosody, emphasis, and pronunciation with SSML in a single POST /v1/audio/speech request."},{"slug":"web-audio-streaming","repoPath":"demos/web-audio-streaming","title":"Web audio streaming","stack":"TypeScript (browser)","hosted":false,"blurb":"Streams Speechify PCM into the browser Web Audio API for low-latency playback, behind a zero-dep proxy that keeps the key server-side."},{"slug":"deepgram-voice-agent-shim","repoPath":"demos/deepgram-voice-agent-shim","title":"Deepgram voice agent shim","stack":"Go shim + Node","hosted":false,"blurb":"Points Deepgram Voice Agent at the tts-shims OpenAI-compatible proxy so it speaks with a Speechify voice, key held server-side."},{"slug":"vapi-custom-voice","repoPath":"demos/vapi-custom-voice","title":"Vapi custom voice","stack":"Go shim","hosted":false,"blurb":"Points Vapi custom voice at the tts-shims Vapi-compatible proxy so it speaks with Speechify raw PCM, key held server-side."},{"slug":"pipecat-agent-speechify","repoPath":"demos/pipecat-agent-speechify","title":"Pipecat agent","stack":"Python (Pipecat)","hosted":false,"blurb":"Real-time voice pipeline using Pipecat with Deepgram STT, Anthropic Claude, and Speechify TTS through SpeechifyTTSService."},{"slug":"mastra-agent-speechify","repoPath":"demos/mastra-agent-speechify","title":"Mastra voice agent","stack":"TypeScript (Mastra)","hosted":false,"blurb":"Text-in, speech-out Mastra Agent using an OpenAI LLM for replies and Speechify's simba-3.2 model for TTS via `@mastra/voice-speechify`."},{"slug":"voice-agent-showcase","repoPath":"demos/voice-agent-showcase","title":"Voice agent capability showcase","stack":"Cloudflare Workers","hosted":false,"blurb":"One page, ten live Voice Agents API demos: calendar booking, policy-bound support, a page copilot, form intake, US outbound calls with a 5-minute cap, a voice gallery, mid-call language handoff, cross-call memory, a grounded knowledge base, and dual-control troubleshooting."},{"slug":"vercel-ai-sdk","repoPath":"demos/vercel-ai-sdk","title":"Vercel AI SDK","stack":"TypeScript (Vercel AI SDK)","hosted":false,"blurb":"Speechify TTS through the Vercel AI SDK's unified `generateSpeech` interface via the official `@speechify/vercel` provider — one-line swap from OpenAI/ElevenLabs, plus word-level speech marks from `providerMetadata`."},{"slug":"react-tts-component","repoPath":"demos/react-tts-component","title":"Voice in a React app","stack":"Next.js","hosted":true,"blurb":"A drop-in <100-line React component that speaks any text. Type, hit play, hear it — the API key stays server-side in a route handler."}];
 /* DEMOS_DATA:END */
     </script>
     <script>
diff --git a/vercel.json b/vercel.json
index 52519fb..8816dcd 100644
--- a/vercel.json
+++ b/vercel.json
@@ -9,6 +9,10 @@
     "next-voice-cloning-app": {
       "root": "demos/next-voice-cloning-app/",
       "framework": "nextjs"
+    },
+    "react-tts-component": {
+      "root": "demos/react-tts-component/",
+      "framework": "nextjs"
     }
   },
   "rewrites": [
@@ -16,6 +20,10 @@
       "source": "/next-voice-cloning-app/:path*",
       "destination": { "service": "next-voice-cloning-app" }
     },
+    {
+      "source": "/react-tts-component/:path*",
+      "destination": { "service": "react-tts-component" }
+    },
     {
       "source": "/",
       "destination": { "service": "site", "path": "/index.html" }

From 43185c9b58c3b6a91f7894d60f7228bc678347a9 Mon Sep 17 00:00:00 2001
From: luke-speechify <289678208+luke-speechify@users.noreply.github.com>
Date: Fri, 21 Aug 2026 01:09:31 +0100
Subject: [PATCH 2/2] feat(react-tts-component): apply Speechify brand styling
 and add real-API e2e

Apply the brand base tokens and pill buttons, add a mono eyebrow and
sentence-case heading. Fix the client to call the basePath-prefixed
/api/speak route so the Play button works under the demo mount. Add a
Playwright e2e that drives Play against the real Speechify API.
---
 demos/react-tts-component/.gitignore          |   4 +
 demos/react-tts-component/app/globals.css     | 213 ++++++++++++------
 demos/react-tts-component/app/page.tsx        |  20 +-
 .../components/SpeechifyVoice.tsx             |   6 +-
 .../e2e/react-tts-component.spec.ts           |  32 +++
 demos/react-tts-component/package.json        |   4 +-
 .../react-tts-component/playwright.config.ts  |  20 ++
 pnpm-lock.yaml                                |  45 +++-
 8 files changed, 261 insertions(+), 83 deletions(-)
 create mode 100644 demos/react-tts-component/e2e/react-tts-component.spec.ts
 create mode 100644 demos/react-tts-component/playwright.config.ts

diff --git a/demos/react-tts-component/.gitignore b/demos/react-tts-component/.gitignore
index 95d1bcb..e838375 100644
--- a/demos/react-tts-component/.gitignore
+++ b/demos/react-tts-component/.gitignore
@@ -3,3 +3,7 @@ node_modules/
 .env
 next-env.d.ts
 *.tsbuildinfo
+test-results/
+playwright-report/
+/.playwright/
+.last-run.json
diff --git a/demos/react-tts-component/app/globals.css b/demos/react-tts-component/app/globals.css
index 3268cf2..b6f6e59 100644
--- a/demos/react-tts-component/app/globals.css
+++ b/demos/react-tts-component/app/globals.css
@@ -1,121 +1,190 @@
+/* Speechify brand base — mirrors demos.speechify.ai/site (speechify.ai/brand).
+ * ABC Diatype is licensed and NOT committed; it is loaded cross-origin from
+ * speechify.ai/fonts (served with Access-Control-Allow-Origin: *). Monochrome
+ * palette, thin display type, pill ink buttons, sentence-case voice.
+ * Paste this block at the TOP of the demo's app/globals.css, then make the
+ * demo-specific rules below it reference these tokens (no hardcoded colours). */
+
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
+@font-face { font-family: "ABCDiatype"; src: url("https://speechify.ai/fonts/ABCDiatype-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
+
 :root {
-  color-scheme: light dark;
-  --fg: #111;
-  --bg: #fff;
-  --muted: #666;
-  --border: #ddd;
-  --surface: #f6f6f6;
-  --accent: #111;
-  --accent-fg: #fff;
+  --font-sans: "ABCDiatype", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace;
+
+  --surface-page: #ffffff;
+  --surface-card: #ffffff;
+  --surface-subtle: #f5f5f5;
+  --surface-raised: #fafafa;
+  --text-primary: #0a0a0a;
+  --text-secondary: #525252;
+  --text-tertiary: #666666;
+  --border-subtle: #e5e5e5;
+  --border-strong: #d1d1d4;
+  --action: #0a0a0a;
+  --action-hover: #2a2a2e;
+  --action-foreground: #fafafa;
+  --focus-ring: rgba(10, 10, 10, 0.22);
+  --success: #00c270;
+  --danger: #b42318;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
 }
 
+/* Interactive apps: keep a monochrome dark mapping so night viewers aren't
+ * blinded. Still monochrome, still on-brand (inverted ink/paper). */
 @media (prefers-color-scheme: dark) {
   :root {
-    --fg: #f2f2f2;
-    --bg: #0c0c0c;
-    --muted: #999;
-    --border: #2a2a2a;
-    --surface: #161616;
-    --accent: #f2f2f2;
-    --accent-fg: #0c0c0c;
+    --surface-page: #0a0a0a;
+    --surface-card: #101010;
+    --surface-subtle: #161616;
+    --surface-raised: #141414;
+    --text-primary: #fafafa;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #8a8a8a;
+    --border-subtle: #262626;
+    --border-strong: #3a3a3a;
+    --action: #fafafa;
+    --action-hover: #e5e5e5;
+    --action-foreground: #0a0a0a;
+    --focus-ring: rgba(250, 250, 250, 0.28);
   }
 }
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box; }
 
 body {
   margin: 0;
-  padding: 2rem 1rem;
-  background: var(--bg);
-  color: var(--fg);
-  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
-  line-height: 1.5;
+  padding: 4rem 1.5rem;
+  background: var(--surface-page);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-weight: 400;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
 main {
-  max-width: 34rem;
+  max-width: 44rem;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1.75rem;
 }
 
+/* Thin display headings, tight tracking, sentence case (author copy in sentence case). */
 h1 {
-  font-size: 1.6rem;
-  font-weight: 500;
+  font-weight: 100;
+  font-size: clamp(2.25rem, 6vw, 3.5rem);
+  line-height: 1.02;
+  letter-spacing: -0.03em;
   margin: 0 0 0.5rem;
 }
+h2 { font-weight: 300; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
+
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--text-tertiary);
+  text-transform: none;
+  margin: 0 0 0.75rem;
+}
 
 .lead {
-  color: var(--muted);
+  max-width: 62ch;
+  color: var(--text-secondary);
+  font-size: 1.0625rem;
+  line-height: 1.55;
   margin: 0;
 }
 
+a { color: var(--text-primary); text-underline-offset: 2px; }
+
+code, kbd, samp { font-family: var(--font-mono); }
 code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  background: var(--surface);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
-  font-size: 0.9em;
+  background: var(--surface-subtle);
+  border: 1px solid var(--border-subtle);
+  padding: 0.08em 0.38em;
+  border-radius: 5px;
+  font-size: 0.88em;
 }
 
-.step {
-  border: 1px solid var(--border);
-  border-radius: 0.6rem;
-  padding: 1.1rem;
-  background: var(--surface);
+.card, .step {
+  background: var(--surface-subtle);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
 }
 
-.step h2 {
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--muted);
-  margin: 0 0 0.75rem;
-}
+label { display: block; font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 0.5rem; }
 
-textarea,
-select {
+input[type="text"], input[type="email"], textarea, select {
   width: 100%;
   font: inherit;
-  color: var(--fg);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 0.4rem;
-  padding: 0.6rem 0.7rem;
-  resize: vertical;
+  color: var(--text-primary);
+  background: var(--surface-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: 0.65rem 0.8rem;
 }
+textarea { resize: vertical; }
 
-.play {
-  display: flex;
-  justify-content: center;
+input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 1px;
 }
 
-.sv-btn {
+/* Pill buttons — medium weight only, never 600. */
+.btn, button.btn {
   font: inherit;
   font-weight: 500;
   cursor: pointer;
-  color: var(--accent-fg);
-  background: var(--accent);
-  border: none;
-  border-radius: 999px;
-  padding: 0.7rem 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  border-radius: var(--radius-pill);
+  padding: 0.65rem 1.5rem;
+  border: 1px solid transparent;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+.btn-primary { background: var(--action); color: var(--action-foreground); }
+.btn-primary:hover:not(:disabled) { background: var(--action-hover); }
+.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
+.btn-outline:hover:not(:disabled) { background: var(--action); color: var(--action-foreground); border-color: var(--action); }
+.btn:disabled { opacity: 0.55; cursor: default; }
+
+footer {
+  color: var(--text-tertiary);
+  font-size: 0.9rem;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 1.25rem;
 }
+footer a { color: inherit; }
 
-.sv-btn:disabled {
-  opacity: 0.6;
-  cursor: default;
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
 }
 
-footer {
-  color: var(--muted);
-  font-size: 0.9rem;
-  border-top: 1px solid var(--border);
-  padding-top: 1rem;
+/* ---- react-tts-component specifics ---- */
+.step h2 {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  margin: 0 0 0.75rem;
 }
 
-footer a {
-  color: inherit;
+.play {
+  display: flex;
+  justify-content: center;
 }
diff --git a/demos/react-tts-component/app/page.tsx b/demos/react-tts-component/app/page.tsx
index 242f7ea..810875c 100644
--- a/demos/react-tts-component/app/page.tsx
+++ b/demos/react-tts-component/app/page.tsx
@@ -6,6 +6,11 @@ import { SpeechifyVoice } from "../components/SpeechifyVoice";
 // Curated simba-3.2 voices. Browse the full catalog at platform.speechify.ai.
 const VOICES = ["geffen_32", "harper_32", "dominic_32", "beatrice_32", "wyatt_32"];
 
+// This app is mounted under a basePath (see next.config.ts), so the route
+// handler lives at `${basePath}/api/speak`. Client fetches are not basePath-aware,
+// so the demo passes the prefixed endpoint to the (root-relative) component.
+const BASE_PATH = "/react-tts-component";
+
 type TurnstileHandle = {
   getToken: (opts?: { timeout?: number }) => Promise<string | null>;
   reset: () => void;
@@ -49,10 +54,12 @@ export default function Home() {
   return (
     <main>
       <header>
-        <h1>Voice in a React app</h1>
+        <p className="eyebrow">SpeechifyAI · React TTS</p>
+        <h1>Voice in a React app.</h1>
         <p className="lead">
-          One component, <code>&lt;SpeechifyVoice&gt;</code>, turns any text into speech. The API
-          key stays on the server — the button just calls your own route handler.
+          One component, <code>&lt;SpeechifyVoice&gt;</code>, turns any text into speech with
+          SpeechifyAI. The API key stays on the server — the button just calls your own route
+          handler.
         </p>
       </header>
 
@@ -75,7 +82,12 @@ export default function Home() {
       <div id="turnstile-container" />
 
       <div className="play">
-        <SpeechifyVoice text={text} voiceId={voiceId} getToken={getToken} />
+        <SpeechifyVoice
+          text={text}
+          voiceId={voiceId}
+          getToken={getToken}
+          endpoint={`${BASE_PATH}/api/speak`}
+        />
       </div>
 
       <footer>
diff --git a/demos/react-tts-component/components/SpeechifyVoice.tsx b/demos/react-tts-component/components/SpeechifyVoice.tsx
index 81d688b..1472d2d 100644
--- a/demos/react-tts-component/components/SpeechifyVoice.tsx
+++ b/demos/react-tts-component/components/SpeechifyVoice.tsx
@@ -29,7 +29,7 @@ export function SpeechifyVoice({
   text,
   endpoint = "/api/speak",
   voiceId = "geffen_32",
-  label = "▶ Play",
+  label = "Play",
   getToken,
 }: Props) {
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -63,11 +63,11 @@ export function SpeechifyVoice({
 
   return (
     <>
-      <button onClick={speak} disabled={state === "loading"} className="sv-btn">
+      <button onClick={speak} disabled={state === "loading"} className="btn btn-primary">
         {state === "loading"
           ? "Synthesizing…"
           : state === "playing"
-            ? "▮▮ Playing"
+            ? "Playing"
             : state === "error"
               ? "Retry"
               : label}
diff --git a/demos/react-tts-component/e2e/react-tts-component.spec.ts b/demos/react-tts-component/e2e/react-tts-component.spec.ts
new file mode 100644
index 0000000..516c094
--- /dev/null
+++ b/demos/react-tts-component/e2e/react-tts-component.spec.ts
@@ -0,0 +1,32 @@
+import { expect, test } from "@playwright/test";
+
+test.skip(!process.env.SPEECHIFY_API_KEY, "needs SPEECHIFY_API_KEY");
+
+test("speaks text against the real Speechify API", async ({ page }) => {
+  await page.goto("/react-tts-component");
+
+  // Page shell renders.
+  await expect(page.getByRole("heading", { name: /voice in a react app/i })).toBeVisible();
+  const playButton = page.getByRole("button", { name: "Play" });
+  await expect(playButton).toBeVisible();
+  await expect(page.locator("#turnstile-container")).toBeAttached();
+
+  // Keep the synthesis input short — real credits.
+  await page.locator("textarea").fill("Hello from Speechify.");
+
+  // Drive the core flow.
+  const responsePromise = page.waitForResponse(
+    (r) => r.url().includes("/api/speak") && r.status() === 200,
+    { timeout: 60_000 },
+  );
+  await playButton.click();
+
+  const response = await responsePromise;
+  const body = (await response.json()) as { audio?: string };
+  expect(typeof body.audio).toBe("string");
+  expect(body.audio!.length).toBeGreaterThan(1000);
+
+  // UI reflects success: the audio element receives a data src.
+  const audio = page.locator("audio");
+  await expect(audio).toHaveAttribute("src", /^data:audio\/mpeg;base64,/, { timeout: 30_000 });
+});
diff --git a/demos/react-tts-component/package.json b/demos/react-tts-component/package.json
index 0981215..043a5cc 100644
--- a/demos/react-tts-component/package.json
+++ b/demos/react-tts-component/package.json
@@ -9,7 +9,8 @@
     "build": "next build",
     "start": "next start -p 8767",
     "lint": "next lint",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "e2e": "playwright test"
   },
   "dependencies": {
     "@speechify/api": "^3.0.1",
@@ -18,6 +19,7 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.50.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
diff --git a/demos/react-tts-component/playwright.config.ts b/demos/react-tts-component/playwright.config.ts
new file mode 100644
index 0000000..128540e
--- /dev/null
+++ b/demos/react-tts-component/playwright.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 90_000,
+  expect: { timeout: 30_000 },
+  reporter: "list",
+  fullyParallel: false,
+  workers: 1,
+  use: {
+    baseURL: "http://localhost:8767",
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:8767/react-tts-component",
+    timeout: 120_000,
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af9336e..afc189c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,7 +19,7 @@ importers:
         version: 3.0.1
       next:
         specifier: ^16.2.10
-        version: 16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.0
         version: 19.2.7
@@ -47,7 +47,7 @@ importers:
         version: 3.0.1
       next:
         specifier: ^16.2.10
-        version: 16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.0
         version: 19.2.7
@@ -55,6 +55,9 @@ importers:
         specifier: ^19.2.0
         version: 19.2.7(react@19.2.7)
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.50.0
+        version: 1.62.1
       '@types/node':
         specifier: ^22.0.0
         version: 22.20.1
@@ -263,6 +266,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@playwright/test@1.62.1':
+    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   '@speechify/api@3.0.1':
     resolution: {integrity: sha512-bEqbyvwGW0A/cgq+ZsQJVP3Hm4/0Bm1sniVtPLBh7vDNG2f/YY8y8sweWojoUnhIeIAL6bHBde43+VZLA2MYpA==}
     engines: {node: '>=18.0.0'}
@@ -329,6 +337,11 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   nanoid@3.3.16:
     resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -358,6 +371,16 @@ packages:
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -545,6 +568,10 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.2.10':
     optional: true
 
+  '@playwright/test@1.62.1':
+    dependencies:
+      playwright: 1.62.1
+
   '@speechify/api@3.0.1': {}
 
   '@swc/helpers@0.5.15':
@@ -592,9 +619,12 @@ snapshots:
   detect-libc@2.1.2:
     optional: true
 
+  fsevents@2.3.2:
+    optional: true
+
   nanoid@3.3.16: {}
 
-  next@16.2.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+  next@16.2.10(@playwright/test@1.62.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       '@next/env': 16.2.10
       '@swc/helpers': 0.5.15
@@ -613,6 +643,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 16.2.10
       '@next/swc-win32-arm64-msvc': 16.2.10
       '@next/swc-win32-x64-msvc': 16.2.10
+      '@playwright/test': 1.62.1
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -620,6 +651,14 @@ snapshots:
 
   picocolors@1.1.1: {}
 
+  playwright-core@1.62.1: {}
+
+  playwright@1.62.1:
+    dependencies:
+      playwright-core: 1.62.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.16