Duet AI for Developers using VSCode

Recently, we have already seen Generative AI everywhere from a simple Chatbot to some experienced AI lawyer or even doctor. In this article we will see how it could help Developers by looking at Duet AI for Developers. Although I am very skeptical about AI replacing programmers or at least we never have to learn how to do coding anymore, I am very impressed what it could already do now. Let’s take a look at the current state of GenAI in application development by using AI to create a simple web page.

Duet AI, just like any GenAI model to help with coding out there, has 3 main functions:

• Code Generation
• Code Completion
• Code Explanation

Before we go into each one, let’s setup our VSCode to work with Duet AI.

Enable Duet AI in Google Cloud Project

Duet AI is not enabled by default in the GCP project. We can enable it in by activate the Cloud AI Companion API or run the CLI command below.

gcloud services enable cloudaicompanion.googleapis.com

Note that Duet AI for Developers is only free until May 11, 2024. Check out on its pricing to know more.

Install Extension Google Cloud Code for VSCode

In VSCode, install the Extension below.

1. Click Extensions or press Ctrl/Cmd+Shift+X.
2. Search for Google Cloud Code
3. Click Install
4. If prompted, restart VS Code.

After the extension has successfully installed, the Cloud Code icon is added to the activity bar and ready for use.

Connect to Duet AI

Once the Extension is installed, select the GCP project for Duet AI.

If there is a prompt saying Duet AI API is not enabled for the select project click on the button Enable Duet AI API.

Click on the icon Duet AI to show the Duet AI: Chat. It should show us the Welcome message as below.

Develop a Webpage using Python

Now we will ask Duet AI to help us create a simple website to show a table of data read from Cloud Firestore.

Code Generation: Create Test Data

We start with the Code Generation by asking Duet AI to synthesize some test data in JSON format. Technically, this is not code yet, but I like this feature a lot. It helps me to save a lot of time using any tools out there to generate some simple test data.

In the Chat prompt I put the prompt below

Help me create a example JSON file for object People. 
Each People will have FirstName, LastName, Gender, DOB and Email Address.

We can fine-tune the prompt by asking to set the domain for the email (e.g test.com) or DOB range (e.g between 1980 to 1990).

The output should look something like the below. We can ask AI to create 10 examples or more.

[
  {
    "FirstName": "John",
    "LastName": "Doe",
    "Gender": "Male",
    "DOB": "1981-01-01",
    "EmailAddress": "john.doe@test.com"
  },
  {
    "FirstName": "Jane",
    "LastName": "Smith",
    "Gender": "Female",
    "DOB": "1982-02-02",
    "EmailAddress": "jane.smith@test.com"
  }
]

Copy the file to the VSCode editor and save it by pressing Ctrl/Cmd+S and give it the name data.json.

Code Generation: Import Test Data

Google Firestore does not allow to import a JSON file directly, but a simple Python program will do the job. We will ask Duet AI to generate a simple code to import our JSON file to Firestore.

Help me write a Python code to import the data.json to Firestore

The output should be something like the following

import json
from google.cloud import firestore

# Create a Firestore client
db = firestore.Client()

# Get the data from the JSON file
with open('data.json') as f:
    data = json.load(f)

# Create a collection reference
people_ref = db.collection('people')

# Add the data to the collection
for person in data:
    people_ref.document().set(person)

# Print a success message
print('Data imported successfully!')

Copy this code into a Python file and run it. We may want to install the google-cloud-firestore library. We could ask Duet AI for help.

How do I install google firestore python lib?

After running, check if the data is imported successfully in Firestore.

Code Generation: HTML Template

Note that Duet AI does not support a full HTML website, but generate some simple template is fine. In this case, we will generate some jinja2 template to be used with Flask later on.

Help me write a jinja2 template to display list of people in a html table

We need to be careful here when running the prompt above. Duet AI will use the currently open file as the context. In order to run the prompt above correctly, we need to make sure the file data.json is curretly open in the editor so it will understand what do we mean by people here.

The output looks pretty good.

<!DOCTYPE html>
<html>
<head>
  <title>List of People</title>
</head>
<body>
  <h1>List of People</h1>
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Gender</th>
        <th>DOB</th>
        <th>Email Address</th>
      </tr>
    </thead>
    <tbody>
      {% for person in people %}
      <tr>
        <td>{{ person.FirstName }}</td>
        <td>{{ person.LastName }}</td>
        <td>{{ person.Gender }}</td>
        <td>{{ person.DOB }}</td>
        <td>{{ person.EmailAddress }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</body>
</html>

Create a Cloud Run App

This is not Duet AI feature but the Cloud Code feature. We will create a Flask web application for Cloud Run called people-table

Cloud Code will generate some files and folders. Save the HTML above in the templates folder as people.html

Code Completion: Update app.py file

We have seen how Code Generation works, let see how Code Completion works.

In the app.py, remove the default code and put the prompt to read from Firestore right within the editor itself, not the Chat anymore. The prompt is insert as a comment (in Python, it is started with #) and Duet AI should propose the code as below. We can hit tab to accept the code.

# read from collection 'people' from Google Firestore
    db = firestore.Client()
    docs = db.collection(u'people').stream()

We can prompt more along the way to complete the logic.

# convert docs to list of people
    people = []
    for doc in docs:
        people.append(doc.to_dict())

Finally, we update the render_template() function to use the new template.

return render_template('people.html', people=people)

Deploy to Cloud Run

Use the function Deploy To Cloud Run in Cloud Code to deploy our application.

After the Deployment is done, we should see the URL of the Web page. Open it to verify the result.

Code Explanation

So far we have tried using the Code Generation and Code Completion, the Duet AI could also explain the logic of the code using the feature call Code Explanation. We could trigger this by selecting the code block we want to explain → right click on the bulb and choose Duet AI: Explain this

The Duet AI will explain the code in the Chat view. My testing so far on this feature is quite good. However, the block we select for Explanation is very important for an accurate result. Although the AI does read the full code of all the current opening files and explain the selected block, we should select the full block for the logic we want to explain. Missing a few lines of the logic may produce incomplete result.

Summary

Duet AI still have a long way to fully replace any developer out there, but it is already a very powerful tool that could help us to speed up the development time a lot. It is integrated with Google Cloud Shell Editor by default and could be used in the most common IDEs such at VSCode or JetBrains. There is a free lite-edition for Google Colab too.

Currently, one of the feature that missing is to scan the code repository for code style and custom library. This feature is very important for those companies with private code base and coding style/naming convention. I hope Google will release it soon and that will be real game-changer for any developer out there.