smallest-inc · abhishekmishragithub · May 29, 2026 · May 29, 2026 · entelligence-ai-pr-reviews · May 29, 2026
diff --git a/misc/voice-chat-widget/.env.example b/misc/voice-chat-widget/.env.example
@@ -0,0 +1,6 @@
+# Copy to .env.local
+# One key powers all three Smallest services used in this demo:
+#   - Pulse STT (WebSocket)
+#   - Lightning v3.1 TTS (WebSocket)
+#   - Electron LLM (OpenAI-compatible chat-completions)
+SMALLEST_API_KEY=your_key_here
diff --git a/misc/voice-chat-widget/.gitignore b/misc/voice-chat-widget/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.next/
+.env.local
+*.log
+next-env.d.ts
diff --git a/misc/voice-chat-widget/README.md b/misc/voice-chat-widget/README.md
diff --git a/misc/voice-chat-widget/app/api/chat/route.ts b/misc/voice-chat-widget/app/api/chat/route.ts
@@ -0,0 +1,87 @@
+/**
+ * LLM streaming via Smallest Electron (OpenAI-compatible chat-completions).
+ *
+ * Endpoint: POST https://api.smallest.ai/waves/v1/chat/completions
+ * Model:    electron
+ * Auth:     SMALLEST_API_KEY  (the same key used for STT + TTS)
+ *
+ * Output protocol: plain text tokens streamed over the response body. The
+ * client reads via fetch + ReadableStream and feeds chunks straight into the
+ * TTS pipe at sentence boundaries.
+ */
+export const runtime = "edge";
+
+const ELECTRON_URL = "https://api.smallest.ai/waves/v1/chat/completions";
+
+async function* electronStream(userText: string, key: string) {
+  const r = await fetch(ELECTRON_URL, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${key}`, "Content-Type": "application/json" },
+    body: JSON.stringify({
+      model: "electron",
+      stream: true,
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a concise, friendly voice assistant. Reply in 2-4 short sentences max. " +
+            "Speak naturally, like a real conversation. Do not use markdown formatting.",
+        },
+        { role: "user", content: userText },
+      ],
+    }),
+  });
+  if (!r.ok || !r.body) {
+    const errBody = await r.text().catch(() => "");
+    throw new Error(`Electron ${r.status}: ${errBody.slice(0, 200)}`);
+  }
+  const reader = r.body.getReader();
+  const dec = new TextDecoder();
+  let buf = "";
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += dec.decode(value, { stream: true });
+    const lines = buf.split("\n");
+    buf = lines.pop()!;
+    for (const line of lines) {
+      const t = line.trim();
+      if (!t.startsWith("data:")) continue;
+      const payload = t.slice(5).trim();
+      if (payload === "[DONE]") return;
+      try {
+        const m = JSON.parse(payload);
+        const tok = m.choices?.[0]?.delta?.content;
+        if (tok) yield tok;
+      } catch {}
+    }
+  }
+}
+
+export async function POST(req: Request) {
+  const { message } = await req.json();
-  const { message } = await req.json();
+  let message: string | undefined;
+  try {
+    ({ message } = await req.json());
+  } catch {
+    return new Response("Invalid JSON body", { status: 400 });
+  }
+  if (!message) {
+    return new Response("Missing 'message' field", { status: 400 });
+  }
-  const { message } = await req.json();
+  let message: string | undefined;
+  try {
+    ({ message } = await req.json());
+  } catch {
+    return new Response("Invalid JSON body", { status: 400 });
+  }
+  if (!message) {
+    return new Response("Missing 'message' field", { status: 400 });
+  }
+  const key = process.env.SMALLEST_API_KEY;
+  if (!key) {
+    return new Response("Missing SMALLEST_API_KEY in env", { status: 500 });
+  }
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      const enc = new TextEncoder();
+      try {
+        for await (const tok of electronStream(message, key)) controller.enqueue(enc.encode(tok));
+      } catch (e: any) {
+        controller.enqueue(enc.encode(`\n[error: ${e.message ?? "stream failed"}]`));
+      }
+      controller.close();
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "no-cache, no-transform",
+      "X-Accel-Buffering": "no",
+    },
+  });
+}
diff --git a/misc/voice-chat-widget/app/api/key/route.ts b/misc/voice-chat-widget/app/api/key/route.ts
@@ -0,0 +1,15 @@
+/**
+ * Returns the Smallest API key to the browser so the WS hooks can use it as a
+ * query param. For a real production deploy, replace this with a short-lived
+ * scoped token endpoint — exposing the long-lived API key to the browser is
+ * fine for a single-user demo, NOT for a public-facing app.
+ */
+export async function GET() {
+  const key = process.env.SMALLEST_API_KEY;
+  if (!key) {
+    return new Response("Missing SMALLEST_API_KEY in env", { status: 500 });
+  }
+  return new Response(JSON.stringify({ key }), {
+    headers: { "Content-Type": "application/json" },
+  });
+}
diff --git a/misc/voice-chat-widget/app/globals.css b/misc/voice-chat-widget/app/globals.css
@@ -0,0 +1,208 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #0b0d10;
+  --panel: #14181d;
+  --panel-2: #1b2128;
+  --line: #242a33;
+  --text: #e7ecf3;
+  --muted: #8a93a3;
+  --accent: #43b6b6;       /* Smallest teal */
+  --accent-2: #2fa39f;
+  --user: #2b6cb0;
+  --listen: #34d3a3;
+  --think: #f6c344;
+  --speak: #43b6b6;
+  --danger: #ff5e5e;       /* Smallest coral */
+}
+html, body { height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+.app {
+  max-width: 480px;
+  margin: 0 auto;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border-left: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+}
+.header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.header .logo {
+  width: 32px; height: 32px; border-radius: 8px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; color: #0b0d10; font-size: 14px;
+}
+.header .title { font-weight: 600; font-size: 15px; }
+.header .subtitle { font-size: 12px; color: var(--muted); }
+.status-pill {
+  margin-left: auto;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--panel-2);
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.status-pill .dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--muted);
+}
+.status-pill[data-state="listening"]  .dot { background: var(--listen); animation: pulse 1.2s infinite; }
+.status-pill[data-state="thinking"]   .dot { background: var(--think);  animation: pulse 1.2s infinite; }
+.status-pill[data-state="speaking"]   .dot { background: var(--speak);  animation: pulse 0.8s infinite; }
+.status-pill[data-state="listening"]  { color: var(--listen); }
+.status-pill[data-state="thinking"]   { color: var(--think); }
+.status-pill[data-state="speaking"]   { color: var(--speak); }
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.4); opacity: 0.6; }
+}
+
+.stream {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.msg { display: flex; gap: 10px; max-width: 100%; }
+.msg.user { justify-content: flex-end; }
+.msg .bubble {
+  padding: 10px 14px;
+  border-radius: 16px;
+  background: var(--panel-2);
+  max-width: 80%;
+  word-wrap: break-word;
+  border: 1px solid var(--line);
+  position: relative;
+}
+.msg.user .bubble {
+  background: var(--user);
+  border-color: var(--user);
+  border-bottom-right-radius: 4px;
+}
+.msg.assistant .bubble {
+  border-bottom-left-radius: 4px;
+}
+.msg.assistant .word          { transition: color 80ms linear, background 120ms; padding: 0 1px; border-radius: 3px; }
+.msg.assistant .word.spoken   { color: var(--muted); }
+.msg.assistant .word.current  { background: rgba(67, 182, 182, 0.25); color: var(--accent); font-weight: 600; }
+.msg .meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--muted);
+}
+.replay {
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.replay:hover { color: var(--accent-2); }
+.replay:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.composer {
+  border-top: 1px solid var(--line);
+  padding: 12px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.composer .input {
+  flex: 1;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 10px 16px;
+  color: var(--text);
+  font: inherit;
+  outline: none;
+}
+.composer .input:focus { border-color: var(--accent); }
+.composer .input::placeholder { color: var(--muted); }
+.composer .input.live    { color: var(--listen); }
+.mic {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text); cursor: pointer; transition: all 0.15s;
+  flex-shrink: 0;
+}
+.mic:hover { border-color: var(--accent); color: var(--accent); }
+.mic[data-active="true"] {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: white;
+  animation: micPulse 1s infinite;
+}
+@keyframes micPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255,94,94,0.5); }
+  50%      { box-shadow: 0 0 0 10px rgba(255,94,94,0); }
+}
+.send {
+  width: 44px; height: 44px; border-radius: 50%;
+  background: var(--accent);
+  color: #0b0d10; border: none; cursor: pointer; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700;
+}
+.send:hover { background: var(--accent-2); }
+.send:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }
+
+.waveform {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  height: 16px;
+}
+.waveform span {
+  width: 2px;
+  background: var(--listen);
+  border-radius: 1px;
+  animation: wave 0.9s ease-in-out infinite;
+}
+.waveform span:nth-child(1) { animation-delay: 0s;   height: 30%; }
+.waveform span:nth-child(2) { animation-delay: 0.1s; height: 60%; }
+.waveform span:nth-child(3) { animation-delay: 0.2s; height: 100%; }
+.waveform span:nth-child(4) { animation-delay: 0.3s; height: 60%; }
+.waveform span:nth-child(5) { animation-delay: 0.4s; height: 30%; }
+@keyframes wave {
+  0%, 100% { transform: scaleY(0.4); }
+  50%      { transform: scaleY(1); }
+}
+
+.footer-note {
+  padding: 8px 16px 14px;
+  font-size: 11px;
+  color: var(--muted);
+  text-align: center;
+}
diff --git a/misc/voice-chat-widget/app/layout.tsx b/misc/voice-chat-widget/app/layout.tsx
@@ -0,0 +1,14 @@
+import "./globals.css";
+
+export const metadata = {
+  title: "Smallest AI — live STT + streaming TTS chat",
+  description: "Demo widget combining Pulse STT WS + Lightning v3.1 TTS WS for fully real-time voice chat.",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}