Use ChatGPT API to build a README generator app with low-code

Overview

In this tutorial, you will learn to build an application that helps to generate a README markdown for a given repository URL. We will use OpenAI’s ChatGPT language model API for generating the content and ToolJet to build the queries and present them in the front end.

Here’s how the app looks like

Bonus: To use the app without building it, you can download and import the ready-to-use exported app to your ToolJet account.

By the way, we will not write more than 3 lines of code. Wait and watch how we do it ⚡

ChatGPT and its API

The OpenAI enabled APIs to access the `GPT-3 models, and you can sign-up from openai.com/api to start using it. Once you have access,

1. Generate the API Key from the Manage Account section of your profile
2. Use the API reference guide in the documentation to perform the requests. In this tutorial, we will be using the following endpoint with request data for generating the README.

• Endpoint: https://api.openai.com/v1/completions
• Method: POST
• Headers:

  {
    “Content-Type":  “application/json”,
    "Authorization": “Bearer <API KEY>”
  } 
  

• Body:

  {
  "model": "text-davinci-002",
  "prompt": " <PROMPT TO GENERATE THE README>”,
  "max_tokens": 2048,
  "n": 10,
  "temperature": 0.9,
  “Stream”: false,
  “logprobs”:null
  }
  

Do not get intimidated if you are not sure how to use these, you’ll learn to use them with ToolJet in the coming sections.

ToolJet - an open-source low-code framework.

ToolJet enables us to build the application with the pre-built ready-to-use components and quickly deploy it to the web, and we’ll also use it to create the ChatGPT API-request queries.

Check out the GitHub repository and hit ⭐ to save it and to let others know about ToolJet, this means a lot for us.

With this, you are all set to start building the application. Let’s go! 🚀

Build the application UI.

Let us start building the application with the front end; as you know, we’ll be using ToolJet to build it.

Set-up

1. Sign-up at https://tooljet.com
2. After logging in, create a new application
3. Name the application as you wish or set it as README generator

Arrange the components

1. Search for the Container component in the Components Manager.
2. Add the Container component to the Canvas by dragging and dropping.
3. Extend the width and height of the container by expanding the component borders
4. Search and add the Text component to the Canvas from the component manager and set the text value to Generate README for your repositories

1. Search and add the Text Input component and set the placeholder text to Enter your repository URL
2. Add a button from the component manager and set the Button text to Generate from the properties tab and border-radius to 10 from the styles tab of the component.

1. Add the Text area component to the canvas from the component manager, remove the default text and set the
2. Placeholder value to Enter your repo URL and click generate Add two buttons with Buttons text Download and Copy below the text area component

With this, the application UI is ready!
Additionally, you can improve the UI by exploring the various styles and properties of the components.

Build the query with OpenAI API.

Let’s build the query to perform an API request to OpenAI’s ChatGPT model. We’ll be using the request-data from the previous section.

1. From the query panel, click on RestAPI option
2. Set the query name to getReadme
3. Change the Request method from GET to POST
4. Enter the Endpoint https://api.openai.com/v1/completions
5. Set the Headers to
   • Content-Type: applicaiton/json
   • Authorization: Bearer <API KEY>

Replace the <API KEY> placeholder with your Api Key.

Hop over to the Body section and toggle the Raw JSON to paste the below JSON

{
   "model": "text-davinci-002",
   "prompt": "generate the README for the github repo: {{components.textinput1.value}}",
   "max_tokens": 1000,
   "temperature": 0.9,
   "top_p": 1,
   "n": 3,
   "stream": false,
   "logprobs: null
}

Notice the the value of the prompt attribute, the {{components.textinput1.value}} brings the URL from the text input component, the component-id textinput1 can be different in your case.

1. Toggle ON the Enable Transformations to write a Javascript code that alters the incoming data for displaying on the Text Area component.
2. With Enable Transformations turned ON, paste the below code

   
   const choices = data.choices
   const result = choices.map(item => item.text).join('')
   return result
   
   

Hit Save on the top right corner of the query panel.

Connect Query to the UI

Now that we have the UI and the Query read, we can now connect both to bring the functionality and make this a complete app.

1. Select the button Generate and click on Add handler from the Properties tab Set the event to On click, action to Run Query and the Query to getReadme

In the Properties tab, click on the Loading State’s Fx and set the value to {{queries.getReadme.isLOading}}

Select the Text area component and the default value to {{queries.getReadme.data}}

Select the Download button and click on Add Handler button from the Properties tab

Set the

• Event: On click
• Action: Generate file
• Type: Text
• File name: README.md
• Data: {{queries.getReadme.data}}

Similarly, add an event handler to the Copy button to copy the data from the query getReadme

• Event: On click
• Action: Copy to clipboard
• Type: {{queries.getReadme.data}}

Awesome!!, pat yourself if you have made it so far!
We are just a step away from deploying the application, let’s quickly test the functionality of the application.

Test the application

You can instantly test the application by entering a GitHub repository URL and hit the generate button.

1. Make sure to test the README generation
2. The Download button should export the text content to a file named README.md
3. The copy button should copy the README content to the clipboard.

Deploy the application

As we built the app using ToolJet, it has the ability to deploy the application to the web in a single click.

1. Click on the Release button in the to right corner
2. Click on the Share button left to the Release button
3. Toggle the Make application public?
4. Customize the URL path if needed

Congratulations, you’ve successfully built the application 🎉!!
It’s okay if you were unable to make it at any instance, you can always get help from our Slack workspace. Join us at https://tooljet.com/slack and raise your questions at #general or drop them here as a comment. We are always here to help you.

Conclusion and what’s next?

With this tutorial, you’re pretty much ready to build apps with ToolJet. You had learnt

• Building UI with components and customize them with properties and styles
• Using Query panel to add data-source and perform requests
• Running JavaScript to transform and return the data
• Connect the Quereis with the application UI
• Deploy and sharing to the web

With this, you are proficient enough to build applications using ToolJet, make sure to check out blog and try out other tutorials.

Top of this, you are absolutely welcome to contribute to the ToolJet codebase, check out our GitHub repository and be sure to hit the Star ⭐