|
| 1 | +# ⚙️ Quest: I want to automate code reviews |
| 2 | + |
| 3 | +> To reset your progress and select a different quest, click this button: |
| 4 | +> |
| 5 | +> [](../../issues/new?title=Reset+Quest&labels=reset-quest&body=🔄+I+want+to+reset+my+AI+learning+quest+and+start+from+the+beginning.%0A%0A**Please+click+on+Create+below,+then+wait+about+15+seconds.+Your+progress+will+be+reset,+this+issue+will+automatically+close,+and+you+will+be+taken+back+to+the+Welcome+step+to+select+a+new+quest.**) |
| 6 | +
|
| 7 | +## 📋 Pre-requisites |
| 8 | + |
| 9 | +1. A GitHub account |
| 10 | +2. [Visual Studio Code](https://code.visualstudio.com/) installed |
| 11 | +3. [Node.js](https://nodejs.org/en) installed |
| 12 | + |
| 13 | +## 📝 Overview |
| 14 | + |
| 15 | +You will build an **automated code review system** that uses AI to analyze code changes and provide feedback. This system will help you ensure that your code meets the quality standards best practices of your project, while also learning how to use AI to automate some of your development tasks. |
| 16 | + |
| 17 | +## 🧠 Use GenAIScript in VS Code |
| 18 | + |
| 19 | +[GenAIScript](https://microsoft.github.io/genaiscript/) is an extension of the JavaScript language that allows you to write scripts that can interact with AI models. You can create advanced AI agents and workflows in very few lines of code, making it easier to build AI applications. It comes with a Command Line Interface (CLI) that allows you to run scripts, and a Visual Studio Code extension that provides an interactive editor for writing and running your scripts. |
| 20 | + |
| 21 | +Let's start by installing the GenAIScript extension in Visual Studio Code: |
| 22 | + |
| 23 | +1. Click on the **Extensions** icon in the left sidebar of Visual Studio Code, search for **GenAIScript** and **install**. |
| 24 | + |
| 25 | +2. After installation, you will see a new **GenAIScript** icon in the left sidebar and also in the status bar at the bottom of the window. Click on the **GenAIScript** icon in the status bar and select **Start GenAIScript server**. |
| 26 | + |
| 27 | +3. It will take some time to start the server, as it first install all the required dependencies. |
| 28 | + |
| 29 | +### Set up GitHub token |
| 30 | + |
| 31 | +To use GenAIScript with GitHub Models, you need to set up a GitHub token. |
| 32 | + |
| 33 | +1. Open [this link](https://github.com/marketplace/models/azure-openai/gpt-4-1/playground) in a new tab and click on the **Use this model** button. |
| 34 | + |
| 35 | +  |
| 36 | + |
| 37 | + Follow the instructions provided to get a free developer key, named Personal Access Token (classic). |
| 38 | + |
| 39 | +2. Create a new file in your project root called `.env` and add the following line: |
| 40 | + |
| 41 | + ```text |
| 42 | + GITHUB_TOKEN=<your_github_token_here> |
| 43 | + ``` |
| 44 | +
|
| 45 | +## ✅ Activity: Create a code review script |
| 46 | +
|
| 47 | +Now that you have GenAIScript installed, let's create a script that will analyze code changes and provide feedback. |
| 48 | +
|
| 49 | +1. Create a new file in your project directory called `code-review.genai.js`. |
| 50 | +
|
| 51 | +2. Open the file and add the following code: |
| 52 | +
|
| 53 | +```javascript |
| 54 | +const changes = await git.diff({ staged: true }); |
| 55 | +
|
| 56 | +defDiff("CODE_CHANGES", changes); |
| 57 | +
|
| 58 | +$`## Role |
| 59 | +You are a senior developer whose job is to review code changes and provide meaningful feedback. |
| 60 | +
|
| 61 | +## Task |
| 62 | +Review <CODE_CHANGES>, point out possible mistakes or bad practices, and provide suggestions for improvement. |
| 63 | +- Be specific about what's wrong and why it's wrong |
| 64 | +- Reference proper coding standards and best practices |
| 65 | +- Be brief to get your point across |
| 66 | +`; |
| 67 | +``` |
| 68 | + |
| 69 | +Let's break down what this script does: |
| 70 | +- It uses the `git.diff()` function to get the staged changes in your Git repository. |
| 71 | +- The `defDiff()` function defines a variable `CODE_CHANGES` that contains the code changes, to provide context to the AI model. |
| 72 | +- The `$` template literal is used to define the prompt AI model. It instructs the model to review the code changes, point out mistakes, and provide suggestions for improvement. |
| 73 | + |
| 74 | +### Test the code review script |
| 75 | + |
| 76 | +Open the terminal in Visual Studio Code and run the following command to add some changes to your Git repository: |
| 77 | + |
| 78 | +```bash |
| 79 | +git add . |
| 80 | +``` |
| 81 | + |
| 82 | +Then while your `code-review.genai.js` file is open, select the **Run GenAIScript** button at the top right corner of the editor, or use the command palette (Ctrl+Shift+P) and type `GenAIScript: Run Script`. |
| 83 | + |
| 84 | + |
| 85 | + |
| 86 | +You should then see a new tab open with the AI's code review feedback. It should point out a few things since the model has no knowledge of GenAIScript here, but you can use this as a starting point. Experiment with tweaking the prompt to get more specific feedback based on your coding standards and practices. |
| 87 | + |
| 88 | +### Quest Checklist |
| 89 | + |
| 90 | +To complete this quest and **AUTOMATICALLY UPDATE** your progress, you MUST push your code to the repository as described below. |
| 91 | + |
| 92 | +**Checklist** |
| 93 | +- [ ] Have a `code-review.genai.js` file at the root of your project |
| 94 | + |
| 95 | +1. In the terminal, run the following commands to add, commit, and push your changes to the repository: |
| 96 | + |
| 97 | + ```bash |
| 98 | + git add . |
| 99 | + git commit -m "Add code review script" |
| 100 | + git push |
| 101 | + ``` |
| 102 | + |
| 103 | +2. After pushing your changes, **WAIT ABOUT 15 SECONDS FOR GITHUB ACTIONS TO UPDATE YOUR README**. |
| 104 | + |
| 105 | +**Checklist** |
| 106 | + |
| 107 | +[](/issues/new?title=Quest:+I+want+a+Production-Ready+Template+to+customize&labels=quest&body=🚀+I%27ve+browsed+through+the+AI+App+Template+gallery%21%0A%0A**After+you+click+on+Create+below,+wait+about+15+seconds.+This+issue+will+automatically+close,+and+the+README+will+update+with+your+next+instructions.**) |
| 108 | + |
| 109 | +## 📚 Further Reading |
| 110 | + |
| 111 | +Here are some additional resources to help you learn more about the Azure Developer CLI (azd) and the templates available: |
| 112 | + |
| 113 | +- [More automation ideas with GenAIScript sample collection](https://microsoft.github.io/genaiscript/samples/) |
| 114 | +- [Learn about Generative AI with JavaScript on YouTube](https://aka.ms/genai-js) |
0 commit comments