Skip to main content

Data insights using Query with AI

Use Squid AI's Query with AI feature 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 pets and the pets 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. In the Squid Console, switch to the dev environment.

switch environment

  1. Download the ai-for-data code sample using the following command. Replace the placeholders with the values from your Squid application as shown in the console.
    2. squid init-sample ai-for-data --template ai-for-data --appId YOUR_SQUID_APP_ID --apiKey YOUR_SQUID_API_KEY --environmentId dev --squidDeveloperId YOUR_SQUID_DEVELOPER_ID --region YOUR_REGION
  1. Open the project in the IDE of your choice.
  2. Start the app locally by runnning the following command in the project folder:
npm run start
  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 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 select 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 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 functionality​

  • When using the Squid 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.