Zg/tts next js chat

tts/tts-next-js-chat/.env.example

@@ -0,0 +1,3 @@
+HUME_API_KEY=
+ANTHROPIC_API_KEY=
+GROQ_API_KEY=

tts/tts-next-js-chat/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

tts/tts-next-js-chat/README.md

@@ -0,0 +1,66 @@
+<div align="center">
+  <img src="https://storage.googleapis.com/hume-public-logos/hume/hume-banner.png">
+  <h1>Text-to-Speech | Next.js Chat Example</h1>
+</div>
+
+![preview.png](preview.png)
+
+## Overview
+
+This project demonstrates how to build a basic streaming conversational interface with [Hume’s TTS (streaming) API](https://dev.hume.ai/reference/text-to-speech-tts/synthesize-json-streaming) that:
+
+- Captures text, or transcribed microphone audio with Groq’s Whisper Large v3 Turbo model.
+- Sends the text input to Anthropic’s Claude model using the Vercel AI SDK.
+- Streams assistant responses back as text and synthesizes them to audio with Hume’s Octave model.
+
+In addition to demonstrating how to implement TTS streaming for real-time use cases, this project also demonstrates how to:
+
+1. Consume Hume TTS APIs in the browser without exposing your Hume API key (via Next.js backend).
+2. How to fetch voices from Hume's [Voice Library](https://platform.hume.ai/tts/voice-library), as well as your own `Custom Voices`, to be listed in your UI.
+
+## Instructions
+
+### Clone this examples repository:
+
+```shell
+git clone https://github.com/HumeAI/hume-api-examples
+cd hume-api-examples/tts/tts-next-js-chat
+```
+
+### Install dependencies:
+
+```shell
+npm run install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+### Set up your API keys:
+
+This project requires API keys for Hume, Anthropic, and Groq. Retrieve them from the [Hume AI platform](https://platform.hume.ai/settings/keys), [Anthropic](https://www.anthropic.com/api), and [Groq](https://groq.com/), then place them in a `.env.local` file:
+
+```shell
+echo "HUME_API_KEY=your_hume_api_key" > .env.local
+echo "ANTHROPIC_API_KEY=your_anthropic_api_key" >> .env.local
+echo "GROQ_API_KEY=your_groq_api_key" >> .env.local
+```
+
+### Run the development server:
+
+```shell
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+### Open the app:
+
+Navigate to http://localhost:3000. Use the microphone button to record, click again to stop recording, transcribe speech, send transcription text to Claude, and finally feed Claude's text output to Hume's TTS streaming API to hear Claude's responses voiced with a voice from Hume's voice library or a voice you designed.

tts/tts-next-js-chat/eslint.config.mjs

@@ -0,0 +1,17 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const nextConfigs = [...compat.extends("next/core-web-vitals")];
+
+const eslintConfig = [...nextConfigs, eslintConfigPrettier];
+
+export default eslintConfig;

tts/tts-next-js-chat/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

tts/tts-next-js-chat/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "tts-next-js-chat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/anthropic": "^1.2.10",
+    "@ai-sdk/groq": "^1.2.8",
+    "@ai-sdk/react": "^1.2.9",
+    "@heroicons/react": "^2.2.0",
+    "ai": "^4.3.10",
+    "hume": "^0.10.3",
+    "next": "15.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.1",
+    "eslint-config-prettier": "^10.1.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "@eslint/eslintrc": "^3"
+  }
+}