Skip to main content

Get data insights on the client using Squid AI

Use Squid AI to get information about your data in real time.​

TL;DR​​

See how Squid AI can answer questions about data using a set of people's favorite pets.​

What you'll build​

  • An app that lets you ask questions about people's favorite pet and the pet that they own.
  • Data is randomly generated and stored in Squid's built-in database integration.

What you'll learn​

  • Using Squid's executeAiQuery method to ask questions about your data.
  • Configuring an Executable function to enable the client to interface with the backend.

You'll need some experience with TypeScript. Experience with React is useful, but not required.

Environment setup​

  1. Install the Squid CLI using the following command:
npm install -g @squidcloud/cli
  1. Download the ai-for-data code sample:
    2. squid init-sample ai-for-data --template ai-for-data
    Open the project in the IDE of your choice.

Set up the Squid backend​

There are two subfolders that make up the ai-for-data project: frontend and backend. The backend folder contains the Squid backend for the app.

  1. Navigate to the Squid Cloud Console and create a new application named ai-for-data.
  1. In the Squid Cloud Console, navigate to the application overview page and scroll to the Backend project section. Click Create .env file and copy the command.

Copy Env Command

  1. In the terminal, change to the backend directory:
cd backend
  1. Create the .env file using the command you copied from the console. The command has the following format:
squid init-env \
--appId YOUR_APP_ID \
--apiKey YOUR_API_KEY \
--environmentId dev \
--squidDeveloperId YOUR_SQUID_DEVELOPER_KEY \
--region us-east-1.aws
  1. Install the required dependencies:
npm install

The backend is now set up and ready to use with a frontend!

Configure the frontend​

The following steps add configuration parameters to connect the application to Squid.

  1. Open a new terminal window and navigate to the project's frontend. You should now have two open terminal windows: one for the app's backend and one for the frontend.
cd frontend
  1. Install the required dependencies:
npm install
  1. Run the following command to create a .env.local file with the Squid environment configuration needed to initialize Squid:
npm run setup-env

Run the application locally​

  1. Start the Squid backend locally using the following command in the terminal opened to your app's backend:
squid start
  1. Start the frontend using the following command in the terminal opened to your app's frontend:
npm run dev
  1. To view the app, navigate to localhost:PORT where PORT is logged in the terminal. The address will likely be http://localhost:5173.

View the app's functionality​

  1. Click the Add mock data button to add randomly-generated data to the database. The data is syncing to the client in real time, so you can observe that it has been added.

  2. In the Squid Cloud Console, click the Integrations tab for your app.

  3. Click the ... in the built_in_db integration, and select Schema from the dropdown.

  4. Click the pencil button on the animals collection. Add the following to the collection description:

Each doc is a user survey response about their favorite type of pet and the current pet they own.
  1. Click the ... button on the current_pet field and selecting Edit field from the dropdown menu. Add the following description, and then click Done.
The animal the user currently owns as a pet
  1. Click the ... button on the favorite_pet field and selecting Edit field from the dropdown menu. Add the following description, and then click Done.
The user's favorite animal to have as a pet

  1. Click Save schema. This provides a schema and descriptions to Squid AI so it knows how to form queries for your data.

  2. Back in the sample app, ask the chatbot questions about people's pets. Here are some suggestions:

  • How many people's favorite pet is a cat?
  • How many people's favorite pet is not a reptile?
  • How many people own a bird?
  • Which animal is the most likely to be someone's favorite pet, but not a pet they own?

Code breakdown​

Execute the AI query in the backend​

In the Squid backend, the data-ai-service.ts file has a class with the @executable decorator. A Squid Executable provides the client with a function that runs on the server.

Caution

Executables can be accessed directly from the client and have unlimited permissions to access backend resources and secrets. This means that you need to take extra care to make sure that only authorized users are able to execute them.

The executeAiQuery method takes the integration ID of the database and the question as parameters, and returns a promise that resolves to Squid AI's response. Learn more in the Squid AI queries docs.

backend/src/data-ai-service.ts
export class SquidAiDataService extends SquidService {
  @executable()
  async askQuestion(question: string): Promise<AiResponse> {
    const aiResponse = await this.squid
      .ai()
      .executeAiQuery('built_in_db', question);
    return {
      author: 'ai',
      answer: aiResponse.answer,
      executedQuery: aiResponse.executedQuery,
      explanation: aiResponse.explanation,
    };
  }
}

Ask the question in the client​

On the frontend, the client passes their question to the backend using the executeFunction method, passing the name of the Squid Executable function they're executing and any parameters for that function.

frontend/src/components/aiDatabot.tsx
squid.executeFunction('askQuestion', question).then((response) => {
    // Handle the response
}

And that's it!​

Congratulations! You have successfully built and run a web app that uses a chatbot run on Squid AI to answer questions about data. Here are some things to try next:

Additional notes​

Squid Cloud environments​

  • Squid provides two different target environments: dev for development and prod for production. For this tutorial, we use the dev environment. To learn more, read about Squid's environments.
  • Your Squid developer ID is only used when running the project locally.

Squid Cloud functionality​

  • When using the Squid Cloud built-in database, your Squid backend is fully functional without additional customization. You can also add features to the Squid backend like Schedulers, Triggers in response to database events, native queries for executing raw SQL or database-specific queries, and more. See the Backend SDK docs to check out all the options.
  • Since the built-in database is document-based, the notes collection represents a collection of documents. When using a SQL database, the collection represents a table where documents are rows of the table.