# Integrate EVI into Next.js Applications Using Hume’s React SDK

With Hume’s [React SDK](https://www.npmjs.com/package/@humeai/voice-react), WebSocket connection management is handled for you and the complexities of audio capture, playback, and streaming are abstracted away. You can integrate EVI into your React app with just a few hooks and components, without writing any low-level WebSocket or audio code.

In this guide, you’ll learn how to integrate EVI into your Next.js applications using Hume’s React SDK, with step-by-step instructions for both the **App Router** and the **Pages Router**.

[EVI Next.js Starter](https://vercel.com/templates/next.js/empathic-voice-interface-starter)  
Kickstart your project with our pre-configured Vercel template.  
[Looking for sample code?](https://github.com/HumeAI/hume-api-examples/tree/main/evi)  
See the complete implementation of this guide on GitHub.  
  
Explore or contribute to Hume’s React SDK on GitHub.

**This guide is broken up into five sections:**

1. [**Installation**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/nextjs#installation): Install Hume SDK packages.
2. [**Authentication**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/nextjs#authenticate): Generate and use an access token to authenticate with EVI.
3. [**Context provider**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/nextjs#context-provider): Set up the `<VoiceProvider/>`.
4. [**Connection**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/nextjs#connection): Open a WebSocket connection and start a chat with EVI.
5. [**Display chat**](https://dev.hume.ai/docs/speech-to-speech-evi/quickstart/nextjs#display-chat): Display chat messages in the UI.

Before you begin, you’ll need an existing [Next.js project](https://nextjs.org/docs/getting-started/installation).

## Installation

Install Hume’s [React SDK](https://www.npmjs.com/package/@humeai/voice-react) and [TypeScript SDK](https://www.npmjs.com/package/hume) packages.

###### pnpm

###### npm

###### yarn

###### bun

```
pnpm i @humeai/voice-react hume
```

## Authentication

Generate an access token for authentication. Doing so will require your **API key** and **Secret key**. These keys can be obtained by logging into the portal and visiting the [API keys page](https://app.hume.ai/keys).

**Load your API key and secret from environment variables.** Avoid hardcoding them in your code to prevent credential leaks and unauthorized access.

###### App Router

###### Pages Router

In your root component, use the TypeScript SDK’s `fetchAccessToken` method to fetch your access token.

`./app/page.tsx`

```
import dynamic from "next/dynamic";
import { fetchAccessToken } from "hume";

const Chat = dynamic(() => import("@/components/Chat"), {
  ssr: false,
});

export default async function Page() {
  const accessToken = await fetchAccessToken({
    apiKey: String(process.env.HUME_API_KEY),
    secretKey: String(process.env.HUME_SECRET_KEY),
  });

return (
    <div className={"grow flex flex-col"}>
      <Chat accessToken={accessToken} />
    </div>
  );
}
```

## Context Provider

After fetching our access token we can pass it to our `Chat` component. First we set up the `<VoiceProvider/>` so that our `Messages` and `StartCall` components can access the context.

We also pass the access token to the `accessToken` prop of the `StartCall` component for setting up the WebSocket connection.

###### App Router

###### Pages Router

`./app/page.tsx`

```
import { VoiceProvider } from "@humeai/voice-react";
import Messages from "./Messages";
import StartCall from "./StartCall";

export default function Chat({
  accessToken,
}: {
  accessToken: string;
}) {
  return (
    <VoiceProvider>
      <Messages />
      <StartCall accessToken={accessToken}/>
    </VoiceProvider>
  );
}
```

## Connection

Use the `useVoice` hook’s `connect` method for starting a Chat session. It is important that this event is attached to a user interaction event (like a click) so that the browser is capable of recording and playing back audio.

Implementing this step is the same whether you are using the **App Router** or **Pages Router**.

`./components/StartCall.tsx`

```
"use client";
import {
  useVoice,
  ConnectOptions,
  VoiceReadyState
} from "@humeai/voice-react";

export default function StartCall({
  accessToken,
}: {
  accessToken: string;
}) {
  const { connect, disconnect, readyState } = useVoice();

if (readyState === VoiceReadyState.OPEN) {
    return (
      <button
        onClick={() => {
          disconnect();
        }}
      >
        End Session
      </button>
    );
  }

return (
    <button
      onClick={() => {
        connect({
          auth: { type: "accessToken", value: accessToken }
        })
          .then(() => {
            /* handle success */
          })
          .catch(() => {
            /* handle error */
          });
      }}
    >
      Start Session
    </button>
  );
}
```

## Display chat

Use the `useVoice` hook to access the `messages` array. We can then map over the `messages` array to display the role (`Assistant` or `User`) and content of each message.

Implementing this step is the same whether you are using the **App Router** or **Pages Router**.

`./components/Messages.tsx`

```
import { useVoice } from "@humeai/voice-react";

export default function Messages() {
  const { messages } = useVoice();

return (
    <div>
      {messages.map((msg, index) => {
        if (msg.type === "user_message" || msg.type === "assistant_message") {
          return null;
        }

return (
          <div key={msg.type + index}>
            <div>{msg.message.role}</div>
            <div>{msg.message.content}</div>
          </div>
        );
      })}
    </div>
  );
}
```

## Next steps

**Congratulations!** You’ve successfully integrated EVI using Hume’s React SDK.

Next, consider exploring these areas to enhance your EVI application:

[Configure EVI](https://dev.hume.ai/docs/speech-to-speech-evi/configuration/build-a-configuration)  
See detailed instructions on how you can customize EVI for your application needs.  
[Chat History](https://dev.hume.ai/docs/speech-to-speech-evi/features/chat-history)  
Learn how you can access and manage conversation transcripts and expression measures.

For further details and practical examples, explore the [API Reference](https://dev.hume.ai/reference/speech-to-speech-evi/chat) and our [Hume API Examples](https://github.com/HumeAI/hume-api-examples/tree/main/evi) on GitHub.

* * *