Developing with AI

Over the last year, NewCity has been experimenting and exploring the new world of AI and chatbots. Last summer reached a fever pitch for image generation tools like Midjourney, Dall E, and Craiyon. We were passing back and forth new image creations generated by the wildest prompts imaginable. As the tools have undergone revisions we’ve become adept at manipulating prompts with variations like time of day, camera lens settings, and other targeted keywords.

Using AI image tools in web development is not unprecedented. One university for example uses a Microsoft AI service tool to generate alt text for their images on upload. This helps in their efforts to make their site more accessible and they now consider it a core part of their Drupal workflow.

Beyond creating entertaining images for our co-workers, these are some of the ways the development team at NewCity is using AI to improve and streamline our client work.

Coding Assistance with Generative AI

ChatGPT

ChatGPT has made huge waves since it opened up public access in November 2022. ChatGPT describes itself as: 

a large language model developed by OpenAI based on the GPT (Generative Pre-trained Transformer) architecture. I was trained on a massive dataset of human language, allowing me to understand and generate text in a variety of styles and formats. As a language model, my purpose is to understand natural language input from users and generate appropriate responses to their queries. My abilities include answering questions, generating text, completing tasks, and even holding conversations on a wide range of topics.

One of our common maintenance tasks is upgrading client sites from previous software versions. Our developers recently ran into issues updating PHP versions on a legacy version of Kirby CMS. While they were able to fix most problems, there were a few lingering issues with an image resize function. We entered the error message, function names, PHP version, and Kirby CMS into a ChatGPT prompt and it suggested a fix for jpegs. They then asked ChatGPT to make it work across all file types and it suggested another fix. With a few modifications the function was patched and we were able to update PHP without further problems.

You can also use ChatGPT to do what is called “code pairing.” Normally two developers work side by side to solve a problem, each learning from the other and building off each other’s solutions. A single developer can provide ChatGPT with an initial prompt and then respond to the output. This exposes the developer to new techniques or approaches to completing common tasks in code much like a human pairing session.

Copilot

I’ve also been using a set of AI tools from GitHub which they call “Copilot.” I’ve been using the main product since beta and have found it quite useful in day to day coding tasks. It runs in your code editor and makes suggestions as you type. It is more powerful than an autocomplete as it can complete entire functions, will create and use variable names, and also generate test data.

I’ve also been invited to try Copilot CLI. This is a tool that runs in your terminal and allows you to search for commands and execute them. It works for general shell commands, git, and github commands. I find this most useful generating wpcli (command line interface for WordPress) commands and find myself not running to the documentation as much.

In this example, I typed “??” to ask Copilot what the proper syntax is to delete the last 10 posts for the custom post type called “course.” Copilot responded immediately with the command and an explanation so I better understand how to use it in the future.

?? wpcli delete the last 10 posts of custom post type course  

 ──────────────────── Command ────────────────────
wp post delete $(wp post list --post_type=course --format=ids | tail -n 10)

 ────────────────── Explanation ──────────────────
○ wp post delete is used to delete posts.
  ◆ $(...) is used to execute a command and use its output as the argument to
the current command.
    ◇ wp post list is used to list posts.
      ▪ --post_type=course specifies that we want to list posts of type course.
      ▪ --format=ids specifies that we want to list the IDs of the posts.
    ◇ | tail -n 10 takes the output of the previous command and selects the last
 10 lines.

❯ ✅ Run this command
  📝 Revise query
  ❌ Cancel

As more of these tools come out is it important for us to experiment with them and learn how to work with them. As a developer I see many of these tools the same way a designer sees Figma or Photoshop. These tools automate or streamline tasks, so designers and developers can focus on higher-level problem solving. The tool does not replace the designer or do their work for them, it’s only a tool in their digital toolbelt. For a developer, creating a detailed prompt for these tools is half of the task, the other part being analyzing the code or command that is being generated and confirming the code will run as expected and give the desired result. It still takes skill and domain knowledge to shape the overall solution, and AI can be a valuable ally in the process.