Use ChatGPT API to build a README generator app with low-code
Tags: chatgpt, openai, lowcode, opensource
Published: 2023-02-10 12:05:00

## 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 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ovwe5mssj7klub7ehx7.png)

> Bonus: To use the app without building it, you can download and import the ready-to-use [exported app](https://github.com/tejakummarikuntla/readme-generator) to your ToolJet account.

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

![](https://media.tenor.com/moGXw2psylIAAAAC/lets-go-dwight-schrute.gif)

## ChatGPT and its API
The [OpenAI](https://openai.com/) enabled [APIs](https://openai.com/api/) to access the `GPT-3 models, and you can sign-up from [openai.com/api](https://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](https://platform.openai.com/docs/api-reference/introduction) 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: 
<pre>
    {
      “Content-Type":  “application/json”,
      "Authorization": “Bearer `<API KEY>`”
    } 
</pre>
  - Body:
<pre>
  {
   "model": "text-davinci-002",
   "prompt": " `<PROMPT TO GENERATE THE README>`”,
   "max_tokens": 2048,
   "n": 10,
   "temperature": 0.9,
  “Stream”: false,
  “logprobs”:null
  }
</pre>

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](https://github.com/ToolJet/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](https://github.com/tooljet/tooljet) and hit ⭐ to save it and to let others know about ToolJet, this means a lot for us._**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzn0nw57u3uufvuevwel.png)
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](https://tooljet.com )
2. After logging in, create a new application
3. Name the application as you wish or set it as `README generator`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43szhn6ro8mip8qz1ge4.png)

### 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`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oti1v14pfpuh0m2or8gr.png)

5. Search and add the `Text Input` component and set the placeholder text to `Enter your repository URL`
6. 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hauh0erairnwyyec0tqq.png)

7. Add the `Text area` component to the canvas from the component manager, remove the default text and set the 
8. Placeholder value to `Enter your repo URL and click generate`
Add two buttons with Buttons text `Download` and `Copy` below the text area component
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tvv6sphdqd6hgprsw7t.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bme3lc6y6x699xbf93og.png)

Hop over to the Body section and toggle the `Raw JSON` to paste the below JSON 
<pre>
{
   "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
}
</pre>
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by82tmesvxwqsuhtueim.png)

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
<pre>
```
const choices = data.choices
const result = choices.map(item => item.text).join('')
return result
```
</pre>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qt43debbpbz77siokk5.png)

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`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6k7n0a7ar6vaivfwuy4.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afaehcxll1oabli16056.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4pglwfuwxh8gsg1dgpt.png)
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}}```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtgrj506pz8a7q8xcrgj.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7fd9trof7ka408txfkt.png)

## 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuuanclxcfss7jywr5ib.png)

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](https://blog.tooljet.com) and try out other tutorials.

Top of this, you are absolutely welcome to contribute to the [ToolJet codebase](https://github.com/ToolJet/ToolJet), check out our [GitHub repository](https://github.com/ToolJet/ToolJet) and be sure to hit the Star ⭐