Project Creation

Daily Bots typically require developers to build both client-side code and a server-side endpoint for securely passing secrets (such as service API keys.)

We’ll use Next.js in this tutorial as it provdides a simple API for server-side routes out of the box.

Next.js will allow us to build our web client using React. We can use the RTVI React library to benefit from the hooks and components in our code to make it less verbose.

​

Creating a new Next.js project

First, we need to create a new Next.js project. We’ll use the create-next-app command to do this.

Open a terminal window and run the following command:

yarn create next-app my-daily-bot

It will ask you some questions about how to build your project. We’ll follow the default suggestions for this tutorial:

• Would you like to use TypeScript? No / Yes
• Would you like to use ESLint? No / Yes
• Would you like to use Tailwind CSS? No / Yes
• Would you like to use src/ directory? No / Yes
• Would you like to use App Router? (recommended) No / Yes
• Would you like to customize the default import alias (@/*) No / Yes

Assuming everything went well, you should see a new directory called my-daily-bot in your current directory.

Navigate to the new directory:

cd my-daily-bot

​

Installing the RTVI client libraries

Daily Bots leverages the RTVI open standard for real-time inference.

Let’s install the RTVI client libraries:

yarn add realtime-ai realtime-ai-react realtime-ai-daily

​

Test everything is setup correctly

Now that we have our project setup, let’s test that everything works as expected.

Run the following command to start the development server and open the provided URL in your browser:

yarn run dev

You should see a page that looks like this: