-
Something went wrong!
-
reset()
- }
- >
- Try again
-
+
+
+
An unexpected error occurred
+
Please try again later
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/evi/evi-next-js-function-calling/app/globals.css b/evi/evi-next-js-function-calling/app/globals.css
index 875c01e8..ff533c3b 100644
--- a/evi/evi-next-js-function-calling/app/globals.css
+++ b/evi/evi-next-js-function-calling/app/globals.css
@@ -2,32 +2,58 @@
@tailwind components;
@tailwind utilities;
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
+@layer base {
:root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 240 5.9% 10%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 5.9% 10%;
+ --radius: 0.5rem;
}
-}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+ .dark {
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 5.9% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
+ }
}
-@layer utilities {
- .text-balance {
- text-wrap: balance;
+@layer base {
+ * {
+ @apply border-border font-sans;
+ }
+ body {
+ @apply bg-background text-foreground;
}
}
diff --git a/evi/evi-next-js-function-calling/app/layout.tsx b/evi/evi-next-js-function-calling/app/layout.tsx
index 3314e478..b390940a 100644
--- a/evi/evi-next-js-function-calling/app/layout.tsx
+++ b/evi/evi-next-js-function-calling/app/layout.tsx
@@ -1,12 +1,13 @@
import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import { Nav } from "@/components/Nav";
+import { cn } from "@/utils";
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "Hume AI - EVI - Next.js Starter",
+ description: "A Next.js starter using Hume AI's Empathic Voice Interface",
};
export default function RootLayout({
@@ -16,7 +17,16 @@ export default function RootLayout({
}>) {
return (
- {children}
+
+
+ {children}
+
);
}
diff --git a/evi/evi-next-js-function-calling/app/page.tsx b/evi/evi-next-js-function-calling/app/page.tsx
index f0c03f8c..90872adb 100644
--- a/evi/evi-next-js-function-calling/app/page.tsx
+++ b/evi/evi-next-js-function-calling/app/page.tsx
@@ -1,6 +1,9 @@
-// ./app/page.tsx
-import ClientComponent from './components/ClientComponent';
-import { getHumeAccessToken } from '@/utils/getHumeAccessToken';
+import { getHumeAccessToken } from "@/utils/getHumeAccessToken";
+import dynamic from "next/dynamic";
+
+const Chat = dynamic(() => import("@/components/Chat"), {
+ ssr: false,
+});
export default async function Page() {
const accessToken = await getHumeAccessToken();
@@ -9,5 +12,9 @@ export default async function Page() {
throw new Error();
}
- return
;
+ return (
+
+
+ );
}
diff --git a/evi/evi-next-js-function-calling/components.json b/evi/evi-next-js-function-calling/components.json
new file mode 100644
index 00000000..97cc91df
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components.json
@@ -0,0 +1,17 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "app/globals.css",
+ "baseColor": "slate",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/utils"
+ }
+}
diff --git a/evi/evi-next-js-function-calling/components/Chat.tsx b/evi/evi-next-js-function-calling/components/Chat.tsx
new file mode 100644
index 00000000..e8a7b2d7
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components/Chat.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { VoiceProvider, ToolCallHandler } from "@humeai/voice-react";
+import Messages from "./Messages";
+import Controls from "./Controls";
+import StartCall from "./StartCall";
+import { ComponentRef, useRef } from "react";
+
+const handleToolCall: ToolCallHandler = async (message, send) => {
+ if (message.name === "get_current_weather") {
+ try {
+ const response = await fetch("/api/fetchWeather", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ parameters: message.parameters }),
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ return send.success(result.data);
+ } else {
+ return send.error(result.error);
+ }
+ } catch (error) {
+ return send.error({
+ error: "Weather tool error",
+ code: "weather_tool_error",
+ level: "warn",
+ content: "There was an error with the weather tool",
+ });
+ }
+ }
+
+ return send.error({
+ error: "Tool not found",
+ code: "tool_not_found",
+ level: "warn",
+ content: "The tool you requested was not found",
+ });
+};
+
+export default function ClientComponent({
+ accessToken,
+}: {
+ accessToken: string;
+}) {
+ const timeout = useRef
(null);
+ const ref = useRef | null>(null);
+
+ return (
+
+ {
+ if (timeout.current) {
+ window.clearTimeout(timeout.current);
+ }
+
+ timeout.current = window.setTimeout(() => {
+ if (ref.current) {
+ const scrollHeight = ref.current.scrollHeight;
+
+ ref.current.scrollTo({
+ top: scrollHeight,
+ behavior: "smooth",
+ });
+ }
+ }, 200);
+ }}
+ >
+
+
+ );
+}
diff --git a/evi/evi-next-js-function-calling/components/Controls.tsx b/evi/evi-next-js-function-calling/components/Controls.tsx
new file mode 100644
index 00000000..adb5d7c2
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components/Controls.tsx
@@ -0,0 +1,81 @@
+"use client";
+import { useVoice } from "@humeai/voice-react";
+import { Button } from "./ui/button";
+import { Mic, MicOff, Phone } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Toggle } from "./ui/toggle";
+import MicFFT from "./MicFFT";
+import { cn } from "@/utils";
+
+export default function Controls() {
+ const { disconnect, status, isMuted, unmute, mute, micFft } = useVoice();
+
+ return (
+
+
+ {status.value === "connected" ? (
+
+ {
+ if (isMuted) {
+ unmute();
+ } else {
+ mute();
+ }
+ }}
+ >
+ {isMuted ? (
+
+
+
+
+
+ {
+ disconnect();
+ }}
+ variant={"destructive"}
+ >
+
+
+ End Call
+
+
+ ) : null}
+
+
+ {top3.map(([key, value]) => (
+
+
+
{key}
+
{value.toFixed(2)}
+
+
+
+
`${value * 100}%`,
+ )}`,
+ }}
+ />
+
+
+ ))}
+
,
+ Record
+>(function Messages(_, ref) {
+ const { messages } = useVoice();
+
+ return (
+
+
+
+ {messages.map((msg, index) => {
+ if (
+ msg.type === "user_message" ||
+ msg.type === "assistant_message"
+ ) {
+ return (
+
+
+ {msg.message.role}
+
+ {msg.message.content}
+
+ );
+ }
+
+ return null;
+ })}
+
+
+
+ );
+});
+
+export default Messages;
diff --git a/evi/evi-next-js-function-calling/components/MicFFT.tsx b/evi/evi-next-js-function-calling/components/MicFFT.tsx
new file mode 100644
index 00000000..720356a2
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components/MicFFT.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "@/utils";
+import { motion } from "framer-motion";
+import { AutoSizer } from "react-virtualized";
+
+export default function MicFFT({
+ fft,
+ className,
+}: {
+ fft: number[];
+ className?: string;
+}) {
+ return (
+
+
+ {({ width, height }) => (
+
+ {Array.from({ length: 24 }).map((_, index) => {
+ const value = (fft[index] ?? 0) / 4;
+ const h = Math.min(Math.max(height * value, 2), height);
+ const yOffset = height * 0.5 - h * 0.5;
+
+ return (
+
+ )}
+
+
+
+
+
+ {
+ window.open(pkg.homepage, "_blank", "noopener noreferrer");
+ }}
+ variant={"ghost"}
+ className={"ml-auto flex items-center gap-1.5"}
+ >
+
+
+ Star on GitHub
+
+
+
+ {isDarkMode ? (
+
+ {isDarkMode ? "Light" : "Dark"} Mode
+
+
+
+ {status.value !== "connected" ? (
+
+
+
+ {
+ connect()
+ .then(() => {})
+ .catch(() => {})
+ .finally(() => {});
+ }}
+ >
+
+
+ Start Call
+
+
+
+
+ ) : null}
+
+ );
+}
diff --git a/evi/evi-next-js-function-calling/components/logos/GitHub.tsx b/evi/evi-next-js-function-calling/components/logos/GitHub.tsx
new file mode 100644
index 00000000..16d7ee9f
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components/logos/GitHub.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const Github = (props: SVGProps) => (
+
+
+);
+export default Github;
diff --git a/evi/evi-next-js-function-calling/components/logos/Hume.tsx b/evi/evi-next-js-function-calling/components/logos/Hume.tsx
new file mode 100644
index 00000000..7fd912ae
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components/logos/Hume.tsx
@@ -0,0 +1,103 @@
+import type { FC, SVGAttributes } from "react";
+import { useId } from "react";
+
+export type HumeLogoProps = SVGAttributes;
+
+export default function HumeLogo(props: HumeLogoProps) {
+ const id = useId();
+
+ const gradientId = `hume-logo-gradient-${id}`;
+
+ return (
+
+
+
+
+ );
+}
diff --git a/evi/evi-next-js-function-calling/components/ui/button.tsx b/evi/evi-next-js-function-calling/components/ui/button.tsx
new file mode 100644
index 00000000..3da02a40
--- /dev/null
+++ b/evi/evi-next-js-function-calling/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, ...props }, ref) => (
+ => {
const args = JSON.parse(parameters) as {
@@ -14,7 +14,7 @@ export const fetchWeather = async (parameters: string): Promise => {
// fetch latitude and longitude coordinates of location
const locationURL: string = `https://geocode.maps.co/search?q=${args.location}&api_key=${process.env.GEOCODING_API_KEY}`;
- const locationResponse = await fetch(locationURL, { method: 'GET' });
+ const locationResponse = await fetch(locationURL, { method: "GET" });
const locationJson = (await locationResponse.json()) as {
lat: string;
lon: string;
@@ -23,7 +23,9 @@ export const fetchWeather = async (parameters: string): Promise => {
// fetch point metadata for location
const pointMetadataURL: string = `https://api.weather.gov/points/${parseFloat(lat).toFixed(3)},${parseFloat(lon).toFixed(3)}`;
- const pointMetadataResponse = await fetch(pointMetadataURL, { method: 'GET' });
+ const pointMetadataResponse = await fetch(pointMetadataURL, {
+ method: "GET",
+ });
const pointMetadataJson = (await pointMetadataResponse.json()) as {
properties: {
gridId: string;
@@ -35,7 +37,9 @@ export const fetchWeather = async (parameters: string): Promise => {
// fetch current weather
const currentWeatherURL: string = `https://api.weather.gov/gridpoints/${gridId}/${gridX},${gridY}/forecast`;
- const currentWeatherResponse = await fetch(currentWeatherURL, { method: 'GET' });
+ const currentWeatherResponse = await fetch(currentWeatherURL, {
+ method: "GET",
+ });
const currentWeatherJson = (await currentWeatherResponse.json()) as {
properties: {
periods: Array<{
@@ -50,4 +54,4 @@ export const fetchWeather = async (parameters: string): Promise => {
const unit = args.format === "fahrenheit" ? "F" : "C";
const currentWeather = `${temperature}${unit}`;
return currentWeather;
-};
\ No newline at end of file
+};
diff --git a/evi/evi-next-js-function-calling/utils/index.ts b/evi/evi-next-js-function-calling/utils/index.ts
new file mode 100644
index 00000000..365058ce
--- /dev/null
+++ b/evi/evi-next-js-function-calling/utils/index.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}