Build a Full-Stack AI Application in React with the Elegance SDK

In this article, we'll journey through the world of the Elegance SDK, and explore how to build a full-stack AI application using React.

Build a Full-Stack AI App in React with the Elegance SDK

In the realm of real-time AI application development, few tools offer as much power and flexibility as the Elegance SDK. Pre-configured to harmoniously work with SingleStore, this SDK provides developers with a treasure trove of tools to craft impeccable full-stack applications infused with AI capabilities.

In this article, we'll journey through the world of the Elegance SDK, and explore how to build a full-stack AI application using React.

What is the Elegance SDK?

The Elegance SDK is a pioneering toolkit designed to facilitate the swift construction of real-time AI applications. Its robust integrations with SingleStoreDB streamline the process, providing developers with a pre-configured environment ready for efficient application development.

Notably, the Elegance SDK is a full-stack JavaScript toolkit, implying its capabilities stretch from back-end operations, using Node.js, to front-end endeavors — particularly with React.js.

Key features:

Pre-configured SingleStoreDB connection. Say goodbye to the often tedious process of setting up database connections. Elegance SDK provides a seamless connection experience with SingleStoreDB, ensuring your data flows without a hitch.
AI integrations. Harness the power of AI with minimal hassle. From chat completions to content suggestions, the SDK offers tools that tap into the OpenAI API, imbuing your applications with intelligent functionalities.
Support for multiple databases. Beyond SingleStoreDB, the SDK is versatile, offering support for MySQL and MongoDB using SingleStore Kai™.
File embeddings generation. An intriguing feature, this allows developers to convert various file formats into actionable insights, paving the way for enhanced data analysis.
Full-stack tooling. With ready-to-use Node.js controllers for the back end and React.js hooks for the front end, the SDK ensures a holistic development experience.

Tutorial: Let’s build a full stack AI app

Let’s see the magic of Elegance SDK

Create your Singlestore Helios account for free
Install GitHub CLI. This is needed to clone our sample repo for the tutorial
Download Node.js and npm from the official Node.js website (npm will be installed automatically)

The next step is to create a workspace. I have created my workspace named elegancesdk.

You can see from the following screenshot that, by default, you will have some sample databases created.

Let’s create a new database named books_chat_mysql under elegancesdk workspace as suggested in this step-by-step GitHub repo.

You can see our new database under ‘elegancesdk’.

Now, let’s clone this repository and follow the steps shared in the README.md file.

Open your favorite terminal and clone the repo using the following command:

git clone https://github.com/singlestore-labs/elegance-sdk-app-books-chat.git

The code and all the components get downloaded in your local machine.

The first thing after cloning the code to your local machine is to set the environment variables specified in the .env.sample file.

Create a new .env file and add these environment variables.

Set the NEXT_PUBLIC_CONNECTION_TYPE as mysql or kai. I am setting it up as mysql.

Get the DB_PASSWORD from ‘Access’ tab

You should get an idea of how to go to the ‘Access’ tab from the below screenshot. It is present on your SingleStore dashboard.

Click on the ‘Access’ tab and you should see the username and password.

MYSQL_USER is set to admin

Get MYSQL_HOST from connecting directly to your workspace, as shown here.

Go to the ‘Your App’ tab and select ‘Node.js’. You should see the ‘Host’ parameter; copy it and use it in your environment variable.

Get the MYSQL_URI from the ‘SQL IDE’ tab.

Next, set the last environment variable ‘OPEN_API_KEY’ and we are done. Save the file.

Next, get your ‘OPEN_API_KEY’. If not, take a look at the following instructions.

If you are already logged in into your OpenAI account, you can find your Secret API key in your User settings.

Make sure to install the dependencies using the following command.

npm i

Then, use the following command to run the application.

sh ./scripts/start.sh

You can see the application running on port 3000 as specified in the preceding screenshot.

You can then interact with your application. For example, by modifying the ratings, and entering a message as shown here.

You can go back to your database list and within it (i.e. books_chat_mysql) you can see the tables and embeddings.

Click on the first item from the a_journey_to_the_centre_of_the_e and you should see the embedding.

If you want to go a little deeper and understand how the embeddings look, click on ‘Sample Data’ to see the embeddings.

Customize and build your own app

The beauty, or should we say the elegance, of the Elegance SDK is how easy it is to build your own application on top of it. In the following section, I will walk you through building your own app on top of the Elegance SDK.

Follow the steps shared in this repository. Make sure your database is configured before moving forward, using the tutorial to guide you.

Start with the following command

npx create-singlestoredb-app --template elegance-next

The base Elegance SDK template is loaded into the folder you are in.

Set the environment variables, using the tutorial shared.

Install all the required dependencies using the following command.

npm i

Once the dependencies are installed, let’s build the application using the following command.

npm run build

Now, let’s run the application using the following command.

npm run dev

Once you do that, you should see your application running.

You can change the look and application per your requirements by modifying the code to meet your application’s needs.

You can learn more about the SingleStore Elegance SDK here. Also, take a look at this detailed webinar on SingleStore Elegance SDK from our engineers.

Conclusion

The future of application development is real time and AI driven. With tools like the Elegance SDK, developers are equipped with the resources they need to usher in this future.

By combining the raw power of SingleStoreDB with the intelligent capabilities of AI, the SDK provides a platform for creating revolutionary applications. So, dive in, explore its myriad features and craft your next groundbreaking full-stack AI app with React.