Skip to content

Commit 45ed125

Browse files
muzzammilkatelia-engmuzzammilkatelia-eng
authored
Initial commit
0 parents  commit 45ed125

36 files changed

+6593
-0
lines changed

‎.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
HUME_API_KEY=
2+
HUME_SECRET_KEY=
3+
NEXT_PUBLIC_HUME_CONFIG_ID=

‎.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Node.js
2+
node_modules/
3+
npm-debug.log
4+
yarn-error.log
5+
6+
# Next.js
7+
/.next/
8+
/out/
9+
10+
# Build files
11+
/.build/
12+
/.cache/
13+
/.vercel/
14+
15+
# Environment variables
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
# IDE files
22+
.vscode/
23+
.idea/
24+
*.iml
25+
26+
# Logs
27+
logs/
28+
*.log
29+
30+
# Dependency lock files
31+
yarn.lock
32+
package-lock.json
33+
34+
.DS_Store
35+
36+
# Environment files
37+
.env
38+
.env*.local

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v18.17.0

‎README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div align="center">
2+
<img src="https://storage.googleapis.com/hume-public-logos/hume/hume-banner.png">
3+
<h1>EVI Next.js App Router Example</h1>
4+
</div>
5+
6+
![preview.png](preview.png)
7+
8+
## Overview
9+
10+
This project features a sample implementation of Hume's [Empathic Voice Interface](https://hume.docs.buildwithfern.com/docs/empathic-voice-interface-evi/overview) using Hume's React SDK. Here, we have a simple EVI that uses the Next.js App Router.
11+
12+
## Project deployment
13+
14+
Click the button below to deploy this example project with Vercel:
15+
16+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhumeai%2Fhume-evi-next-js-starter&env=HUME_API_KEY,HUME_SECRET_KEY)
17+
18+
Below are the steps to completing deployment:
19+
20+
1. Create a Git Repository for your project.
21+
2. Provide the required environment variables. To get your API key and Client Secret key, log into the portal and visit the [API keys page](https://beta.hume.ai/settings/keys).
22+
23+
## Support
24+
25+
If you have questions, require assistance, or wish to engage in discussions pertaining to this starter template, [please reach out to us on Discord](https://link.hume.ai/discord).

‎app/error.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import Link from "next/link";
5+
6+
export default function Error({
7+
error,
8+
reset,
9+
}: {
10+
error: Error;
11+
reset: () => void;
12+
}) {
13+
return (
14+
<div className={"absolute inset-0 grid place-content-center"}>
15+
<div className={"p-4 border border-border rounded-xl max-w-sm"}>
16+
<div>
17+
<h1 className={"text-foreground font-medium text-base"}>
18+
An error occurred
19+
</h1>
20+
<p className={"text-muted-foreground text-sm"}>{error.message}</p>
21+
</div>
22+
<div className={"pt-4 flex gap-2"}>
23+
<Button className={"rounded-full flex-1"} variant={"secondary"} asChild>
24+
<Link href={"https://dev.hume.ai/"} target={"_blank"}>
25+
View Documentation
26+
</Link>
27+
</Button>
28+
<Button className={"rounded-full flex-1"} onClick={reset}>
29+
Try again
30+
</Button>
31+
</div>
32+
</div>
33+
</div>
34+
);
35+
}

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
4+
@custom-variant dark (&:is(.dark *));
5+
6+
:root {
7+
--background: oklch(1 0 0);
8+
--foreground: oklch(0.145 0 0);
9+
--card: oklch(1 0 0);
10+
--card-foreground: oklch(0.145 0 0);
11+
--popover: oklch(1 0 0);
12+
--popover-foreground: oklch(0.145 0 0);
13+
--primary: oklch(0.205 0 0);
14+
--primary-foreground: oklch(0.985 0 0);
15+
--secondary: oklch(0.97 0 0);
16+
--secondary-foreground: oklch(0.205 0 0);
17+
--muted: oklch(0.97 0 0);
18+
--muted-foreground: oklch(0.556 0 0);
19+
--accent: oklch(0.97 0 0);
20+
--accent-foreground: oklch(0.205 0 0);
21+
--destructive: oklch(0.577 0.245 27.325);
22+
--destructive-foreground: oklch(0.577 0.245 27.325);
23+
--border: oklch(0.922 0 0);
24+
--input: oklch(0.922 0 0);
25+
--ring: oklch(0.708 0 0);
26+
--chart-1: oklch(0.646 0.222 41.116);
27+
--chart-2: oklch(0.6 0.118 184.704);
28+
--chart-3: oklch(0.398 0.07 227.392);
29+
--chart-4: oklch(0.828 0.189 84.429);
30+
--chart-5: oklch(0.769 0.188 70.08);
31+
--radius: 0.625rem;
32+
--sidebar: oklch(0.985 0 0);
33+
--sidebar-foreground: oklch(0.145 0 0);
34+
--sidebar-primary: oklch(0.205 0 0);
35+
--sidebar-primary-foreground: oklch(0.985 0 0);
36+
--sidebar-accent: oklch(0.97 0 0);
37+
--sidebar-accent-foreground: oklch(0.205 0 0);
38+
--sidebar-border: oklch(0.922 0 0);
39+
--sidebar-ring: oklch(0.708 0 0);
40+
}
41+
42+
.dark {
43+
--background: oklch(0.145 0 0);
44+
--foreground: oklch(0.985 0 0);
45+
--card: oklch(0.145 0 0);
46+
--card-foreground: oklch(0.985 0 0);
47+
--popover: oklch(0.145 0 0);
48+
--popover-foreground: oklch(0.985 0 0);
49+
--primary: oklch(0.985 0 0);
50+
--primary-foreground: oklch(0.205 0 0);
51+
--secondary: oklch(0.269 0 0);
52+
--secondary-foreground: oklch(0.985 0 0);
53+
--muted: oklch(0.269 0 0);
54+
--muted-foreground: oklch(0.708 0 0);
55+
--accent: oklch(0.269 0 0);
56+
--accent-foreground: oklch(0.985 0 0);
57+
--destructive: oklch(0.396 0.141 25.723);
58+
--destructive-foreground: oklch(0.637 0.237 25.331);
59+
--border: oklch(0.269 0 0);
60+
--input: oklch(0.269 0 0);
61+
--ring: oklch(0.439 0 0);
62+
--chart-1: oklch(0.488 0.243 264.376);
63+
--chart-2: oklch(0.696 0.17 162.48);
64+
--chart-3: oklch(0.769 0.188 70.08);
65+
--chart-4: oklch(0.627 0.265 303.9);
66+
--chart-5: oklch(0.645 0.246 16.439);
67+
--sidebar: oklch(0.205 0 0);
68+
--sidebar-foreground: oklch(0.985 0 0);
69+
--sidebar-primary: oklch(0.488 0.243 264.376);
70+
--sidebar-primary-foreground: oklch(0.985 0 0);
71+
--sidebar-accent: oklch(0.269 0 0);
72+
--sidebar-accent-foreground: oklch(0.985 0 0);
73+
--sidebar-border: oklch(0.269 0 0);
74+
--sidebar-ring: oklch(0.439 0 0);
75+
}
76+
77+
@theme inline {
78+
--color-background: var(--background);
79+
--color-foreground: var(--foreground);
80+
--color-card: var(--card);
81+
--color-card-foreground: var(--card-foreground);
82+
--color-popover: var(--popover);
83+
--color-popover-foreground: var(--popover-foreground);
84+
--color-primary: var(--primary);
85+
--color-primary-foreground: var(--primary-foreground);
86+
--color-secondary: var(--secondary);
87+
--color-secondary-foreground: var(--secondary-foreground);
88+
--color-muted: var(--muted);
89+
--color-muted-foreground: var(--muted-foreground);
90+
--color-accent: var(--accent);
91+
--color-accent-foreground: var(--accent-foreground);
92+
--color-destructive: var(--destructive);
93+
--color-destructive-foreground: var(--destructive-foreground);
94+
--color-border: var(--border);
95+
--color-input: var(--input);
96+
--color-ring: var(--ring);
97+
--color-chart-1: var(--chart-1);
98+
--color-chart-2: var(--chart-2);
99+
--color-chart-3: var(--chart-3);
100+
--color-chart-4: var(--chart-4);
101+
--color-chart-5: var(--chart-5);
102+
--radius-sm: calc(var(--radius) - 4px);
103+
--radius-md: calc(var(--radius) - 2px);
104+
--radius-lg: var(--radius);
105+
--radius-xl: calc(var(--radius) + 4px);
106+
--color-sidebar: var(--sidebar);
107+
--color-sidebar-foreground: var(--sidebar-foreground);
108+
--color-sidebar-primary: var(--sidebar-primary);
109+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
110+
--color-sidebar-accent: var(--sidebar-accent);
111+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
112+
--color-sidebar-border: var(--sidebar-border);
113+
--color-sidebar-ring: var(--sidebar-ring);
114+
}
115+
116+
@layer base {
117+
* {
118+
@apply border-border outline-ring/50;
119+
}
120+
body {
121+
@apply bg-background text-foreground;
122+
}
123+
}

‎app/layout.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import type { Metadata } from "next";
2+
import { GeistSans } from "geist/font/sans";
3+
import { GeistMono } from "geist/font/mono";
4+
import "./globals.css";
5+
import { Nav } from "@/components/Nav";
6+
import { cn } from "@/utils";
7+
import { Toaster } from "@/components/ui/sonner";
8+
import { ThemeProvider } from "@/components/ThemeProvider";
9+
10+
export const metadata: Metadata = {
11+
title: "Hume AI - EVI - Next.js Starter",
12+
description: "A Next.js starter using Hume AI's Empathic Voice Interface",
13+
};
14+
15+
export default function RootLayout({
16+
children,
17+
}: Readonly<{
18+
children: React.ReactNode;
19+
}>) {
20+
return (
21+
<html lang="en">
22+
<body
23+
className={cn(
24+
GeistSans.variable,
25+
GeistMono.variable,
26+
"flex flex-col min-h-screen"
27+
)}
28+
>
29+
<ThemeProvider
30+
attribute="class"
31+
defaultTheme="light"
32+
enableSystem
33+
disableTransitionOnChange
34+
>
35+
<Nav />
36+
{children}
37+
<Toaster position="top-center" richColors={true} />
38+
</ThemeProvider>
39+
</body>
40+
</html>
41+
);
42+
}

‎app/page.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { getHumeAccessToken } from "@/utils/getHumeAccessToken";
2+
import dynamic from "next/dynamic";
3+
4+
const Chat = dynamic(() => import("@/components/Chat"), {
5+
ssr: false,
6+
});
7+
8+
export default async function Page() {
9+
const accessToken = await getHumeAccessToken();
10+
11+
if (!accessToken) {
12+
throw new Error('Unable to get access token');
13+
}
14+
15+
return (
16+
<div className={"grow flex flex-col"}>
17+
<Chat accessToken={accessToken} />
18+
</div>
19+
);
20+
}

‎components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

0 commit comments

Comments
 (0)