Create Jira tickets with ChatGPT and JiraAPI

Introduction

(Go to “First thing first” section for the start of the project)

I am a lover of emerging technologies, and I always feel a sense of excitement and wonder when thinking about the potential they may have and what cool things that can be created with them.

My latest love was Spark AR, and you can see a cool filter I made, which enhanced the book cover of The Little Prince here.

But recently, I discovered ChatGPT.
I was truly amazed by its capabilities. Not only does it possess an immense amount of knowledge on a variety of topics, but it also presents this information in a way that is easy for me to understand.
I can only imagine how useful this tool would have been during my high school math classes, I still have dreams about exams.

With this newfound love for ChatGPT, I decided to put it to the test by asking for its help with some of my daily and weekly tasks, such as coding questions and experimenting with creating Jira tickets. To my surprise, ChatGPT was able to provide me with insightful answers and even gave me a great example of a Jira ticket.

As always on the look for some fun side project I thought, what if I could use ChatGPT to create a simple web app that generates Jira tickets by simply providing a title? And so, I started experimenting with this concept.

The main goal for me was to have fun with the ChatGPT API, understand how it works, and try to build something on top of it. And it happened.

First thing first

I needed a few things

• Create an App with frontend and server
• Set up ChatGPT for making API Calls and read about how to interact with ChatGPT through the API
• Figure out how to create a Jira ticket through their API, if even possible.

Before adventuring to do everything myself I had a look at the OpenAi GitHub repo. And I have found exactly what I was looking for; a “quick start node app”. Built-in React and Nextjs, are perfect for me, exactly my cup of tea.

Action

I cloned it and had a good look at the application.

How ChatGPT was being set up was fairly simple I just had to get my OpenAI key, add it and I could immediately do the calls by using the createCompletion function. Which did fit my needs for creating Jira ticket texts.

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

After playing around with some of the parameters and reading the OpenAI documentation I finally did get a satisfying basic ticket text for a React component Jira ticket, I could pass any title and have the ticket content and title rendered on my page.

Clicking “Generate ticket text” a call to OpenAi gets done; the result is received and rendered on the page.

I asked to create a ticket titled “ Create a Card component for NewsKit Design System”, the team I am working for at the moment.

I tested it a few times and this is one of the outputs:

Title: Create Card Component for Newskit Design System

Description:
The goal of this ticket is to create a Card component for the Newskit design system. The Card component should be a ReactJS component, composed by semantic HTML tags following WCAG 2.0 guidelines. The Card component should be customisable through props, and should be designed following the Newskit design system.

Requirements:
The Card component should accept the following props:
- data (Type: Object): This prop should contain all the data that the card will display.
- size (Type: String): This prop should determine the size of the card. The possible values are ‘small’, ‘medium’ and ‘large’.
- onClick (Type: Function): This prop should determine what happens when the card is clicked.

The Card component should be composed by the following HTML tags:
- div (HTML attributes: className): The className attribute should be used to assign a class to the div, so that it can be styled with CSS.
- h3 (HTML attributes: className, id): The className attribute should be used to assign a class to the h3, so that it can be styled with CSS. The id attribute should be used to assign a unique id to the h3, so that it can be targeted with CSS.
- img (HTML attributes: className, alt): The className attribute should be used to assign a class to the img, so that it can be styled with CSS. The alt attribute should be used to provide a descriptive text for the image, for accessibility purposes.
- p (HTML attributes: className): The className attribute should be used to assign a class to the p, so that it can be styled with CSS.

Accessibility:
The Card component should be designed following the WCAG 2.0 guidelines, and should be tested using an automated accessibility testing tool.

SEO:
The Card component should be designed following SEO best practices and should be tested using an automated SEO testing tool.

HTML Example:
<div class=”card”>
<h3 class=”card-title” id=”card-title”>Card Title</h3>
<img class=”card-image” src=”image.jpg” alt=”Image of a cat” />
<p class=”card-description”>Description of the card.</p>
</div>

Design:
The Card component should follow the design of the Newskit design system.

Acceptance Criteria:
- The Card component should be created as a ReactJS component.
- The Card component should be composed by semantic HTML tags following WCAG 2.0 guidelines.
- The Card component should be customisable through props.
- The Card component should be designed following the Newskit design system.
- The Card component should be tested using an automated accessibility testing tool.
- The Card component should be tested using an automated SEO testing tool.

Supporting Information:
N/A

Dependencies:
N/A

A total of 439 words and 2711 characters. Impressive!

As you can see a simple title gave me lots of information! In order to achieve this, from a short title, I automatically complete the input I have written with extra requests; for example: the accessibility section, React props, a semantic HTML structure, and so on. Also, through the API call, I ask OpenAI to use a “higher” amount of “tokens” to get a longer and better result, ideally.

Now, as quickly as I got my ticket content I want to create it on Jira to be a real ticket!

I asked ChatGPT to provide me with a function to create a Jira ticket using the Jira API. They provided me with a helpful function I used as a base, however, it required some adjustments before it could be used. To be honest, this was the most challenging part of the process so far. I had to read the Jira API documentation and troubleshoot multiple 405 and 400 errors. After resolving my authentication credentials and creating a properly formatted request body, I was finally able to create the ticket successfully. The request returned a status of 201 and my Jira ticket was added to the backlog!

Thoughts

For companies where tickets creation is a daily task which does take time, it is definitely something to explore or consider.

Through this approach, you can create JIRA tickets quickly, and for someone with no technical knowledge, it can be really handy! Then the tickets can be reviewed by the team to fit better the project you are developing.

But, I want to stress out, the tickets created by default by ChatGPT are definitely not ready to use. Props might need to be changed based on your requirements, the accessibility suggestions might not be on point, etc. But.. do not forget, OpenAI models can be trained by providing prompt and result examples so they can create something closer to your needs. Worth the time? I guess depends on how different the tickets you create are, how need to be written, why, and what is your company/team process.

In the end, it was really cool to achieve what I had in mind with my first attempt. Now I got a better idea of how ChatGPT API works and definitely there is more I can learn about it.

Curious? Here is the GitHub repo of the project: https://github.com/Vanals/Jira-tickets-with-ChatGPT

And

https://www.linkedin.com/in/marco-vanali/