ConsumableAI is Natural language to SQL translation tool that makes it easy for developers to add real-time translation to their applications. ConsumableAI provide integration with open source data visualisation tools like Redash. Redash is a popular open-source data visualisation and exploration platform that helps organisations make sense of their data. In this guide, we will show you how to install the ConsumableAI SDK in Redash so that you can add translation capabilities to your queries.

Estimated integration effort : 30 min

Prerequisites

Before you begin, you should have the following:

• A Redash instance set up.
  • To self host redash, you can use this guideline
  • To make yourself comfortable with Redash you can use this link
• Node.js and npm installed.

Installation Steps

To install the ConsumableAI SDK in Redash, follow these steps:

1. Install the SDK by running the command npm i consumableai. This will install the ConsumableAI SDK and all its dependencies.

2. In the file client/app/pages/queries/QuerySource.jsx, import the SDK by adding the following line:

   import TranslateQuery from "consumableai";
   

   This will import the TranslateQuery class from the SDK.

3. Add the appKey as shown in the code snippet below:

   const client = new TranslateQuery({
       apiKey: <secret_key_of_the_user>,
   });
   

   Replace the apiKey with your own ConsumableAI API key. You can get an API key by signing in on ConsumableAI's website > create organisation > navigate to organisation page > users > click on Generate API token.

   Incase you still have issues, please reach out to us on [email protected]

4. Add the following function to enable translation in the same file:

   
   const [isTranslating, setIsTranslating] = useState(false);
   const updateTranslate = async () => {
       setIsTranslating(true);
       const responseTranslate = await client.translate(query.query);
       const formattedQueryText = queryFormat.formatQuery(
         `--${query.query} \\n ${responseTranslate?.text}` || "",
         querySyntax
       );
       setQuery(extend(query.clone(), { query: formattedQueryText }));
       setIsTranslating(false);
   };
   
   

   This function takes the query text, sends it to ConsumableAI for translation, and then formats the translated text so that it can be displayed in Redash.

5. In the Query.Controls component, add the translateButtonProps prop alongside saveButtonProps:

   translateButtonProps={{
     text: (
       <React.Fragment>
         <span className="hidden-xs">Translate</span>
       </React.Fragment>
     ),
     onClick: updateTranslate,
     loading: isTranslating,
   }}
   

   This will add a Translate button to the query editor in Redash. When the user clicks on this button, the updateTranslate function will be called to translate the query.

6. Add the following line of code before the saveButtonProps line to enable the Translate button in Redash in In the file client/app/components/queries/QueryEditor/QueryEditorControls.jsx after importing in the props translateButtonProps:

   {translateButtonProps !== false && (
         <ButtonTooltip title={translateButtonProps.title} shortcut={translateButtonProps.shortcut}>
           <Button
             className="query-editor-controls-button m-l-5"
             onClick={translateButtonProps.onClick}
             loading={translateButtonProps.loading}
             data-test="TranslateButton">
             {translateButtonProps.text}
           </Button>
         </ButtonTooltip>
       )}
   
   

   This will add the Translate button to the query editor in Redash.

Congratulations! You have successfully installed the ConsumableAI SDK in Redash and enabled the Translate button. Now you can translate your queries in real-time to SQL and get your relevant data in no time by typing in plain english.

Conclusion

In this guide, we showed you how to install the ConsumableAI SDK in Redash and add translation capabilities to your queries. We hope this guide was helpful, and we encourage you to explore the many other features that ConsumableAI has to offer. If you have any questions or feedback, please feel free to contact us at [email protected]. Thank you for using ConsumableAI!