Build a Grammarly Alternative Using ToolJet and OpenAI in 10 Minutes

This tutorial will walk you through the process of creating an intuitive and functional grammar-checking and content-enhancement app using ToolJet and OpenAI. This comprehensive guide will provide you a basic structure to build a custom Grammarly alternative that can be fine-tuned to your exact needs. We will use ToolJet’s visual app builder to quickly build an elegant user interface, while the low-code query builder will help us connect with OpenAI for text analysis. Follow this tutorial to build a tool that checks grammar, fixes errors, humanizes content, and provides quality scores, all within a user-friendly interface.

Here’s a final preview of the application:

Prerequisites:

• ToolJet (https://github.com/ToolJet/ToolJet): An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
• OpenAI Account: Register for an OpenAI account to utilize AI-powered features in your applications by accessing APIs for advanced natural language processing. Sign up here.

Step 1. Setup

Setting up a data source in ToolJet is as easy as filling up a form. We will set up the data source and create a new app in the below steps.

• Access the OpenAI Console and generate a new secret key. Remember to copy this key for later use.
• Sign up for a free ToolJet cloud account if you haven’t already and log in.
• On the ToolJet dashboard, locate the Data Sources section on the left sidebar. Here, click on the +Add button under the OpenAI plugin.
• Now in the API Key field, paste the API key you copied from OpenAI Console and click on the Save button.

• Use the Test Connection button to ensure the OpenAI plugin is correctly connected to your ToolJet account.
• Finally, click on the Apps icon in the left sidebar and select Create new app. Name your application Wordly (or anything else based on your use-case), and click on Create app to finalize the app-creation.

Step 2. Building the User Interface

We’ll start by creating the user interface for the app. The UI will be divided into three main sections: the header, the input section, and the output section.

1. Header

The header serves as the title and branding area for your application. Here’s how to set it up:

• Add a Container for the Header:
  • Add a new Container component to serve as the header section and rename it to headerContainer.
  • Set the background color to white (#ffffff), border color to light blue (#d9e2fc), and add a border radius of 10px.
• Add a Logo and Title:
  • Inside the header container, add an Icon component for the logo. Set the icon to IconTextWrap and color to blue (#3e63dd).
  • Add a Text component next to the logo with the text “WORDLY” styled in bold with a font size of 26px and color blue (#3e63dd).
• Positioning:
  • Position the title on the left and logo on the right.

2. Input Section

This section will allow users to input the text they want to analyze.

• Create an Input Container:
  • Add a new Container for the input section and rename it to inputContainer.
  • Style it similarly to the header with a white background, light blue border, and a border radius of 10px.
• Add Input Elements:
  • Add a Text component at the top of the container with the label “Enter Text” styled in bold with a font size of 20px and color blue.
  • Add a TextArea component below the label for text input. Rename it to textInput and add some default text for testing.
• Add a Dropdown for Operation Selection:
  • Add a DropDown component with the label “Operation”. Rename it to operationDropdown.
  • Set the dropdown’s Option labels as the below array:
    {{[“List Grammatical Errors”, “Fix Grammatical Errors”, “Humanize Content”, and “Provide Content Score”]}}
  • Set the Option values as the below array:
    {{[“listGrammaticalErrors”, “fixGrammaticalErrors”, “humanizeContent”, “provideAScore” ]}}
• Add Generate and Copy Buttons:
  • Add a Button component labeled “GENERATE OUTPUT ” styled with a blue background. Rename it to generateButton.
  • Add another Button component next to it labeled “COPY ”. Rename it to copyButton.

3. Output Section

The output section will display the results of the text analysis.

• Create an Output Container:
  • Add another Container for the output section and rename it to outputContainer.
  • Style it with the same white background, light blue border, and border radius.
• Add Output Display Elements:
  • Add a Text component labeled “Output:” styled similarly to the input labels.
  • Add a Text component below it to display the output. This component will be updated with the results of the OpenAI queries.
  • Rename the text component to output, and under its Data property, set HTML as the type.

Step 3. Creating Queries

Next, we’ll create four OpenAI queries and JavaScript query that will conditionally trigger one of the OpenAI queries based on the selected operation.

• List Grammatical Errors:
  • Expand the Query Panel at the bottom of the screen and click on + Add button to create a new query – rename this query to listGrammaticalErrors.
  • Select OpenAI as the Data Source and select Chat as the Operation.
  • In the Message as input field, enter the following prompt:
    —
    Find all grammatical errors in the given text. List all errors inside an HTML section tag one by one with a header (in red, 16px) that provides the name of the error and a description (in black, 13px).

Text: {{components.textInput.value}}

• Create Three More Queries:
  • Create three more OpenAI queries – fixGrammaticalErrors, humanizeContent, and provideAScore.
    
  • Use the below prompt for the fixGrammaticalErrors query:
    —
    Review the following text, identify all grammatical errors, and provide a corrected version of the text. Provide the output in HTML format with in-line CSS.

Text: {{components.textInput.value}}
  • Prompt for humanizeContent query:
    —
    Rewrite the following content to make it sound more natural and human-written. Ensure the revised text is engaging, clear, and maintains the original meaning. Provide the output in HTML format with in-line CSS.

Text: {{components.textInput.value}}
  • Prompt for provideAScore query:
    —
    Analyze the following text and provide a score from 1 to 10 based on the quality of writing. Assess the text on the following factors: clarity, coherence, grammar, engagement, and overall quality. Present the output in HTML format within a table, using inline CSS for styling. The table should have a soft background color, progress bars for scores, and two columns: Criteria and Score. Include comments below the table in a list format. Add some margin before and after the table, and place "Overall" as the last item in the table. Include a header before the table.

Text: {{components.textInput.value}}
• Create a Query to Conditionally Trigger the OpenAI Queries
  
  • Create a JavaScript query named triggerQuery with the following code:
    

switch (components.operationDropdown.value) {
    case 'listGrammaticalErrors':
      await queries.listGrammaticalErrors.run();
      break;
    case 'fixGrammaticalErrors':
      await queries.fixGrammaticalErrors.run();
      break;
    case 'humanizeContent':
      await queries.humanizeContent.run();
      break;
    case 'provideAScore':
      await queries.provideAScore.run();
      break;
  }

Step 4. Configuring Events and Other Functionalities

Finally, configure the events and bind queries with components:

• Generate Button:
  • Select the Generate button, navigate to its properties panel on the right and create a new event.
  • For the event configuration, select Action as Control Component.
  • Under Action Options, set the Component as output, Action as Clear.
  • Create another On click event to run the triggerQuery JavaScript query.

• Copy Button:
  • Create a new event, select Copy to clipboard as the event, and enter {{components.output.text}} under its Text property.
• Update the Output on Query Success:
  • Add a new Query Success event handler to the query and select Action as Control Component.
  • Under Action Options, set the Component as output, Action as Set text, and Text as {{queries.fixGrammaticalErrors.data}}.

Follow the same steps for the remaining three OpenAI queries to populate the output component with the returned text of the query.

With this, the functionality of our application is fully complete. Enter some text in the input field, click on the Generate button and test the output for the available operations.

Conclusion

Congratulations! You’ve built a Grammarly alternative in less than 10 minutes. Using ToolJet’s flexibility with OpenAI, continue adjusting the application’s functionality to meet your specific needs. You can create new OpenAI queries and adjust the prompts for a variety of text analysis scenarios such as changing the tone of the content, improving SEO, changing language out of the output content, improve clarity, etc.

To learn more, check out the ToolJet documentation or connect with us on Slack.