Use ChatGPT (GPT-4) for Software Development — A Personal Account
Last Updated on May 26, 2023 — 10 min read
In my first project utilizing ChatGPT throughout the software development cycle, I found that it significantly reduced my learning curve in unfamiliar technologies and speed up overall development with its code-generation, debugging, and explanation capabilities. Furthermore, ChatGPT has made the development process less frustrating and more enjoyable.
TL;DR
ChatGPT (with GPT-4) can shorten the learning curve for unfamiliar technologies and make debugging much easier.
Be cautious when dealing with rapidly evolving fields as the ChatGPT internal knowledge may be outdated.
A “ask-verify-revise” loop can help combat the issue of ChatGPT hallucination.
I recently started working on a new open-source project called AI Research Assistant (https://github.com/lifan0127/ai-research-assistant) — a GPT-based chatbot for Zotero, the popular reference management software. This is my first project utilizing ChatGPT extensively in an unfamiliar technical domain and throughout the software development cycle. My overall impression was very positive, as I'm excited about how Generative AI can unlock productivity for developers.
Prior to diving into this project, I had no knowledge about Zotero development. Even though Zotero is widely used in academia, the development community is quite small, which would usually be a barrier for a newcomer like me. Yet, I was very pleased with how quickly I could get up-to-speed with ChatGPT teaching me everything from the high-level technical architecture to more intricate technical details. Overall ChatGPT has significantly reduced my learning curve when it comes to a completely new area.
Explain the technical architecture of the Zotero desktop client.
1. Language and Technologies: Zotero was initially built as a Firefox plugin, written mostly in JavaScript, XUL, and SQLite. However, Zotero is now a standalone desktop application available for Windows, Mac, and Linux systems. Despite becoming a standalone application, it is still largely built with the same web technologies for its interface and local data storage (JavaScript, HTML, CSS, SQLite).
2. Local Database: Zotero uses an SQLite database for local storage of your research data. This includes bibliographic data, notes, and other related information.
3. Synchronization: Zotero provides synchronization capabilities. This allows you to synchronize your research data across multiple devices. Zotero syncs not only the metadata for your library but also the full-text content of your articles, attachments, notes, and even your Zotero settings.
4. Web API: Zotero has a Web API that allows other software to interact with your Zotero library. This makes it possible to use Zotero data in other contexts, and to build apps or services that work with Zotero.
5. Extensions: Zotero supports a variety of plugins that can extend the functionality of the core application. Some plugins help with importing/exporting data, while others provide additional features not present in the main Zotero application.
It is worth emphasizing that the Zotero platform is based on the now-deprecated Netscape/Mozilla XUL (XML User Interface Language) framework. This proved to be a sweet spot for ChatGPT, as this “outdated” technology from several years back ensures relevant information is available in ChatGPT’s memory, and since the XUL framework has been officially deprecated, there is very little information online for me to resort to.
Code Generation
Having never written any Zotero plugin before, I managed to use ChatGPT to scaffold my first plugin, with a simple command of “Generate a boilerplate code for a new Zotero plugin”, in less than 15 minutes! However, this is where ChatGPT's outdated knowledge became somewhat of an issue, as it was unaware of zotero-plugin-template, a very helpful starter kit for plugin development that was launched recently. I ultimately decided to use the zotero-plugin-template instead of the boilerplate by ChatGPT.
Using ChatGPT for code generation was still an immense help for implementing individual features. For example, when attempting to create polyfills for LangChain, the software development framework for GPT and other large language models (LLMs), ChatGPT made things much simpler. Here, the need was to bridge the gap between Firefox 60 (released in 2018), the platform Zotero is based on, and the modern NodeJS runtime which LangChain was designed for. This would have been a challenging task, requiring an in-depth knowledge of both the NodeJS foundational libraries and the custom Firefox/Zotero APIs to replicate the same functionalities. Fortunately, all I had to do was paste in the error messages and ChatGPT would generate the polyfills for me! Note that the polyfills are not always 100% correct, but a few iterations of feeding the new error messages back to ChatGPT usually led to the correct solutions.
How to fix invalid regexp group error for this: /(?<colorString>[a-fd]{6}|[a-fd]{3})/i.exec(hex.toString(16))
The error "invalid regexp group" is likely because you are using a named capture group, which is a feature of the RegExp syntax that was introduced in ECMAScript 2018 (ES9). If your environment does not support ES9, you will encounter this error.
To fix the issue, you can replace the named capture group with a regular capture group like this:
'''js
/(?:[a-fd]{6}|[a-fd]{3})/i.exec(hex.toString(16))
'''
In this example, I replaced `?<colorString>` with `?:` which creates a non-capturing group. Since you're using the `.exec()` method, the match will be available in the result array. You can access the matched color string with the index `0`:
'''js
const hex = 0x1a2b3c;
const match = /(?:[a-fd]{6}|[a-fd]{3})/i.exec(hex.toString(16));
if (match) {
const colorString = match[0]; console.log(colorString);
} else {
console.log('No match found');
}
'''
If you still want to use named capture groups and your environment supports ECMAScript 2018 or later, you might want to check your environment's compatibility or update your environment to a more recent version.
Another use case for ChatGPT is multi-language support. By passing the English locale file into ChatGPT, I was able to easily generate the settings for Chinese, French, German, Japanese, Korean, and Spanish with ease.
Code Explanation
During development, I often had to do some research and check out other Zotero plugins for inspiration. Normally, it would take hours to go through the code base and potentially build and run it in order to get a decent grasp of what was happening. Thanks to ChatGPT, however, I just needed to copy-and-paste the code snippets and ask it to explain what was going on. It was remarkable how accurately ChatGPT could provide an explanation with very little context.
This is an XHTML file that defines the layout of a custom preference pane for a Zotero plugin. It uses a combination of XUL and HTML elements to create the UI components. Here's an explanation of each part of the code:
<vbox id="zotero-prefpane-__addonRef__" onload="Zotero.__addonInstance__.hooks.onPrefsEvent('load', {window})">: This element creates a vertical box container with a custom ID. The onload attribute specifies a JavaScript function to call when the preference pane is loaded. The function is defined in the plugin's JavaScript code and is used to handle any initialization tasks when the preference pane is displayed.
<groupbox>: This element creates a group box container that can be used to visually group related UI components.
<label><html:h2>&zotero.__addonRef__.pref.title;</html:h2></label>: This element creates an HTML heading level 2 (h2) label that displays the preference pane's title. The title is retrieved from the plugin's localization strings, which are defined in a separate file (e.g., en-US.dtd). The &zotero.__addonRef__.pref.title; syntax is used to reference the localized string.
The commented-out <checkbox> element would create a checkbox with a custom label, preference, and ID if uncommented. The label is also retrieved from the plugin's localization strings. The preference attribute specifies the preference key that will be stored in the Zotero preferences system.
<hbox>: This element creates a horizontal box container that can be used to align UI components horizontally.
<html:label for="zotero-prefpane-__addonRef__-OPENAI_API_KEY">&zotero.__addonRef__.pref.OPENAI_API_KEY.label;</html:label>: This element creates an HTML label associated with an input element. The label's text is retrieved from the plugin's localization strings.
<html:input type="text" id="zotero-prefpane-__addonRef__-OPENAI_API_KEY" preference="extensions.zotero.__addonRef__.OPENAI_API_KEY"></html:input>: This element creates an HTML text input field with a custom ID and preference attribute. The preference attribute specifies the preference key that will be stored in the Zotero preferences system.
The commented-out <hbox class="virtualized-table-container" flex="1" height="300px"> and <html:div id="__addonRef__-table-container" /> elements would create a container for a virtualized table if uncommented. This could be used to display data in a table format with efficient rendering and scrolling.
</groupbox> and </vbox>: These elements close the group box and vertical box containers, respectively.
<vbox>: This element creates another vertical box container for additional UI components.
<label value="&zotero.__addonRef__.help.version.label; &zotero.__addonRef__.help.releasetime.label;"></label>: This element creates a label that displays the plugin version and release time information. These values are also retrieved from the plugin's localization strings.
</vbox>: This element closes the last vertical box container.
In summary, this XHTML file defines a custom preference pane for a Zotero plugin with a title, an input field for an API key, and a label for displaying the plugin version and release time information. Some additional elements are commented out and can be enabled by uncommenting them.
Debugging
Debugging unfamiliar technologies can be very time consuming, often requiring one to dig through the call stack, check documentation and inevitably reach out to other developers or resort to Stack Overflow. In contrast, I was very impressed by ChatGPT's capability to explain error messages and propose fixes with just the stack trace. I was able to resolve 80% of the errors after some trial and error on the fixes proposed by ChatGPT. This was a huge timesaver but came at the cost of me not deeply understanding the codebase as I would have liked.
What is this error in Zotero: chrome://zotero/content/standalone/standalone.xul : Unable to run script because scripts are blocked internally.
The error message "Unable to run script because scripts are blocked internally" is a generic error message that may appear in the Zotero environment when there is an issue in your code, such as an unhandled exception, a syntax error, or a reference error. This error prevents the script from running and might cause other issues in the Zotero environment.
To resolve this error, follow these steps:
1. Carefully review your code for any syntax errors, reference errors, or other issues that might prevent the script from running correctly.
2. Ensure that your code handles exceptions properly, especially when dealing with network requests, file operations, or other external resources.
3. Make sure you are using Zotero APIs and modules correctly, and not trying to access restricted or unavailable APIs.
You can use Zotero's built-in error console (accessible via the "Help" menu under "Debug Output Logging") to get more information on the error, such as the file and line number where the error occurred. This can help you pinpoint the exact issue and fix it in your code.
Applying proper error handling throughout your code will help you avoid unexpected issues and improve the stability of your Zotero plugin.
Summary
To sum up, I had a great experience using ChatGPT in this project. I was able to cut down my onboarding time with an unfamiliar technical domain and speed up overall development with its code-generation, debugging, and explanation capabilities. Further, ChatGPT definitely made the development process less frustrating and more enjoyable. I am looking forward to exploring further uses of Generative AI in future software development.
