Build a Debug Assistant with Monday.com and GPT: A Step-by-Step Guide

Building a NextJS App with Monday.com: Integrating AI for Bug Fix Suggestions

Every programmer knows the frustration of debugging—searching old Stack Overflow posts, trying to pinpoint the issue, and spending hours stuck. This tutorial will guide you in developing a NextJS application that integrates with Monday.com, specifically utilizing its Incoming Bugs board to generate automated suggestions for bug fixes using GPT.

What is Monday.com?

Monday.com is a dynamic web and mobile work management platform designed for operational efficiency, project tracking, data visualization, and team collaboration. Key features include:

Customizable dashboards and boards
Automation capabilities for repetitive tasks
Integration with various other applications for seamless workflow

Setting Up Your Monday App

Create a Monday.com developer account if you haven’t already.
Log in to your dashboard and add a new item by choosing the Product Development template (specifically the Bug Queue board).
Insert a new column in the Incoming Bugs table titled Suggestions.
Navigate to your avatar → Developers → Create app, naming it Debug Assistant.
In the OAuth section, set permissions for me:read, boards:read, and boards:write.

Installation Steps

To kick-start our project, we utilize a NextJS app template from Monday.com, featuring preconfigured React components:

Clone and install the template.
Add your OPENAI_API_KEY in the .env file.
Start your development server.
Use ngrok to create a tunnel for your local environment. This allows you to expose your server via a public URL.

Connecting to Monday.com

In your Monday app, add a new feature titled Debug Widget, using the Dashboard Widgets option.
Select Custom URL as the source and paste your ngrok URL.
Change the source to Published Build, adding the same ngrok URL.
Publish the initial version of your app.
Go to your workspace, access the Bug Queue board, and add the Debug Widget.

Developing the App

Your next step: create it within the code editor:

Copy the boilerplate file from monday-ai-prompt-template/src/examples/livestream-example/boilerplate.tsx, rename it as debug-assistant.tsx.
Update the component name from LivestreamExample to DebugAssistant.
Edit the main app page at monday-ai-prompt-template/src/app/page.tsx, removing the ContextExplorerExample component and adding the DebugAssistant.

Setting Up Dropdowns

In debug-assistant.tsx, import necessary components and add Dropdowns for board and column selection:

import dynamic from 'next';
//... Add your Dropdowns here

Defining the Prompt Handling

Next, complete the handleSend() function to send prompts to OpenAI and update the column:

const handleSend = async () => {
    // Handle sending logic
d};

Addressing Current Bugs

Acknowledge that recent NextJS versions may present fetching issues on localhost. To resolve this:

Edit app/api/openai/route.ts to circumvent request headers issues.
Comment out authentication verification temporarily during development.

Testing the Application

Return to Monday.com and check your Debug Widget under the Bug Insights board. You’ll need the following for your request:

Select Incoming Bugs in the first dropdown.
Select Suggestions in the second dropdown.
Specify your input condition, e.g., "Write a short technical solution for this bug description: @Bug Description".

After a few moments, the Suggestions column should auto-populate based on the GPT response, demonstrating the integration's effectiveness!

Final Thoughts

In this tutorial, we successfully built a Monday.com app integrated with an AI for automated bug solutions. You are encouraged to personalize the UI and fine-tune requests to suit your team’s needs. Once ready for production, consider deploying your app on a stable server.

For further inquiries or assistance, feel free to connect on social platforms like LinkedIn or Twitter.