This content originally appeared on DEV Community and was authored by Karan Rathod
This tutorial will walk you through the process of creating a Grammarly alternative using ToolJet and OpenAI. We will use ToolJet's visual app builder to design an elegant user interface for our application. Then we will use the platform's low-code query builder to connect with OpenAI to perform detailed text analysis. The completed application will allow you to perform four operations:
- List all grammatical errors in your text
- Fix all grammatical errors and return the revised text
- Provide a score for the text based on specific parameters: clarity, coherence, grammar, and engagement
- Make the content sound more natural (ideal for transforming generic AI-generated content with a more organic tone)
Feel free to adjust the structure and functionality of the application to match your exact content-enhancement needs.
Check out this tutorial to learn how to build a QR Code generator using ToolJet and Python.
Here's a final preview of the application:
Prerequisites:
ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
OpenAI Account : Register for an OpenAI account to utilize AI-powered features in your applications by accessing APIs such as GPT for advanced natural language processing. Sign up here.
Since integration in ToolJet is very straightforward, you can use any other service instead of OpenAI to build the same application.
Step 1. Set up Your First ToolJet Data Source
In the steps below, we will set up the data source and create a new app.
- 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.
- 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 to navigate to the applications section.
- Select "Create new app" and 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 will start by creating a minimal UI for the application. The UI will take around five minutes to build. First, we will build the header section, then the input section, and finally, the output section, where we will display the results of the text analysis.
Header
- For the Header, drop an Icon component on the empty canvas and place a Text component next to it. Set its Icon property to "IconTextWrap" and change its font size to 28.
We are using light blue ("#d9e2fc") as the primary color in this application. Update the color scheme of all the components accordingly.
Input Section
- Drag and drop a Container component below the header and rename it to mainContainer.
We will rename important components like containers and input fields to ensure that we can easily refer and access component-related data inside the app builder.
- Add a Text component at the top left of the container with the label 'Enter Text'. Add a Dropdown component next to it with the label 'Operation'. Rename it to operationDropdown.
- Set the dropdown's Option labels to:
{{['List Grammatical Errors', 'Fix Grammatical Errors', 'Humanize Content', 'Provide Content Score']}}. -Set the Option values to:{{['listGrammaticalErrors', 'fixGrammaticalErrors', 'humanizeContent', 'provideAScore']}}. - Add a Textarea component below and rename it to textInput. - Add a Button component labeled 'GENERATE OUTPUT ⚡' and rename it to generateButton.
- Add another Button component next to it labeled 'COPY 🗒️' and rename it to copyButton.
Output Section
- Add a Text component labeled 'Output'.
- Add another Text component below it to display the output. This component will display the data returned by the OpenAI queries.
- Rename the Text component to output, and under its Data property, set Markdown as the type.
Step 3. Creating Queries to Interact With OpenAI
Next, we’ll create four OpenAI queries and a 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 the 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 input field, enter the following prompt:
Find all grammatical errors in the given text. List each error with a heading and a description using Markdown. Include the following elements:
Header: Use a bold header with an appropriate emoji, and mention the error type.
Sentence: Provide the sentence which contains the error.
Description: Provide a brief description of the error and two line breaks after it.
Use these emojis for different types of errors:
Subject-Verb Agreement: 🧑🏫
Verb Tense: ⏳
Punctuation: 📝
Spelling: 🔠
Sentence Structure: 🏗️
(…please use other more names and related emojis if needed)
Ensure that each section clearly identifies the error type and provides a description.
Create Three More OpenAI Queries:
- Create three more OpenAI queries - fixGrammaticalErrors, humanizeContent, and provideAScore.
Prompt for fixGrammaticalErrors query:
Review the following text, identify all grammatical errors, and provide a corrected version of the text.
Provide the output in Markdown format.
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 Markdown format.
Text: {{components.textInput.value}}
Prompt for provideAScore query:
Analyze the following text and provide a score from 1 to 10 for
each of the following categories:
clarity, coherence, grammar, engagement, and overall quality.
Present the results in Markdown format with the following structure and no header:
**Overall Quality🌟**: [score]
Show the next four paremeters inside a block quote
Clarity💡: [score]
Coherence🔗: [score]
Grammar✅: [score]
Engagement🔥: [score]
<insert a line break here>
-------------------------------------------------------------------
**Comments**:
Add comments below the results.
Ensure to include a header before the results.
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;
}
This JavaScript query will check the selected operation from the operationDropdown component and run the relevant OpenAI query.
Step 4. Configuring Events and Other Functionalities
In the final step, we will configure the events and bind queries with components and see how it all comes together.
Update the Output on Query Success:
- Add a new Query Success event handler to the listGrammaticalErrors query and select Action as Control Component.
- Under Action Options, set the Component as output, Action as Set text, and Text as
{{queries.listGrammaticalErrors.data}}. - Follow the same steps for the remaining three OpenAI queries; this will populate the
outputcomponent with the returned data from the query.
Generate Button:
- Select the Generate Output button, navigate to its properties panel on the right and create a new event under Events.
- For the event configuration, select Action as Control Component. - Under Action Options, set the Component as output, Action as Clear.
This event will clear the output component every time the button is clicked.
- Add another event to the Generate Output button to run the JavaScript query when it is clicked.
This event will trigger the JavaScript query. The JavaScript query will then trigger one of the OpenAI queries based on the selected operation from the dropdown, and the output component will be populated with the latest data.
Copy Button
- Create a new event for the Copy button, select
Copy to clipboardas the event, and enter{{components.output.text}}under its Text property.
With this setting, every time you click on the Copy button, the text inside the output component will be copied to the clipboard.
The functionality of our application is now fully configured. Enter some text in the input field, click on the Generate Output 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 Continue adjusting the application's functionality to meet your specific text analysis needs. You can create new OpenAI queries for a variety of content enhancement scenarios such as changing the tone of the content, improving SEO, changing the language of the output content, improving clarity, etc.
To learn more, check out the ToolJet documentation or connect with us on Slack.
This content originally appeared on DEV Community and was authored by Karan Rathod
Karan Rathod | Sciencx (2024-08-07T13:42:21+00:00) Build a Grammarly Alternative Using ToolJet and OpenAI in 10 Minutes📝. Retrieved from https://www.scien.cx/2024/08/07/build-a-grammarly-alternative-using-tooljet-and-openai-in-10-minutes%f0%9f%93%9d/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.