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:
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:
Installing the RTVI client libraries
Daily Bots leverages the RTVI open standard for real-time inference.
Using RTVI is optional, but will make interfacing with your Daily Bot much easier.
Let’s install the RTVI client libraries:
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:
You should see a page that looks like this: