1MEIC08T03: ModifAI - FEUP-MEIC-DS-2024-25/ai4sd GitHub Wiki

The goal of this project is to develop an Visual Studio Code plugin that utilizes AI to suggest refactoring techniques to the user, based on what could be improved in his code.

Vision

ModifAI is designed to revolutionize the way software developers approach code quality and maintenance by seamlessly integrating AI-driven refactoring suggestions directly into their development environment. Through its innovative capabilities, ModifAI acts as a powerful, intelligent assistant within VS Code, providing real-time analysis and personalized recommendations to help developers create cleaner, more efficient, and sustainable code. By leveraging the power of artificial intelligence, ModifAI enhances the developer's workflow, reducing the cognitive load associated with manual refactoring and empowering developers to focus on building innovative features instead of worrying about repetitive code optimizations.

The primary goal of ModifAI is to enable developers to write high-quality code with minimal effort, leading to enhanced productivity, faster development cycles, and long-term code maintainability. By offering context-aware suggestions based on the specific needs of a project, ModifAI ensures that each recommendation aligns with the developer's coding style and the project's overall goals, making the refactoring process intuitive and non-intrusive.

ModifAI is more than just a tool — it's a collaborative assistant that acts as a co-pilot in the development process, helping developers make better decisions while writing code. By automating and simplifying the refactoring process, ModifAI empowers developers to continuously improve the quality of their code, allowing them to focus on the more creative and complex aspects of software design and implementation.

Research

This project's idea originated from LiveRef. LiveRef is a live code refactoring extension for IntelliJ IDEA that analyzes refactoring options in real-time utilizing heuristics.

Refact is an open-source extension for multiple IDEs that is very similar to our project vision but requires users to type certain commands to instruct the AI assistant on how to proceed.

Pros:

• As our project is a VSCode plugin, it will be available to use for all languages, while IntelliJ is primarily focused on Java.
• Our project will allow users to have a more intuitive interaction with the AI by typing custom prompts without needing to memorize the extension's commands.

Cons:

• Our project will have many dependencies.
• Because our project makes requests to different API's over the network, there might be some related security concerns.

Domain Analysis

High-level Class Diagram

Sequence Diagram

Architecture and design

The user, having VSCode and a code file opened and the ModifAI extension installed, will call the extension by clicking the badge available in the user interface's sidebar. After selecting (or not) the code the user wants to be refactored, and inputting a prompt, the extension will call Rest API to deliver that prompt to Gemini's API through the network, which in turn will return the answer to the prompt with the code and explanation, sending it back to the extension and will display it to the user.

Component Diagram

Technologies

• Gemini Developer API was our elected chatbot, due to the client's requirement of a free-to-use AI assistant.

• TypeScript was our chosen language to develop the extension.

• VSCode Extension

• Docker to help with scalability, portability and consistency.

So far, the user is able to ask for a refactoring of the entire opened file or a selected part of code.

Development guide

Installation

To make use of this vscode extension, the first step is installing VsCode.

The user also needs to have node and the node package manager (npm) installed in order to run the extension.

You can verify if these are installed by running the following commands:

node -v
npm -v

If you need to install them, you can do so by following this link Node.

After having npm installed, you may check if you have typescript installed using the following command:

tsc -v

Otherwise, install it using this command:

npm install -g typescript

Once all of the software is installed, go to the project directory and run the following command:

npm install

This commmand will install all the necessary dependencies.

Running the extension

To run the extension, press Ctrl+F5 to Run Without Debugging.

This will open a vscode window containing the extension.

Once the extension is running, there are two options to refactor your code.

• Refactor File: This command will refactor the entire file for the currently selected editor.
• Refactor Selected: This command will only refactor the currently selected code.

There are two ways to call these commands:

• Ctrl+Shift+P: This will open the vscode command palette, containing all the callable commands.
• Context Menu: By right clicking on the piece of code/file, and scrolling to the bottom of the context menu, you can press on the desired command.

The refactored code can be displayed in two ways:

• Webview: The default option will create a new vscode window containing a webview of the refactored code and, if enabled, the explanation for said code.
• Directly on the editor: With this option enabled, the refactored code will replace the previous code directly on your editor, and can be accepted or denied via a QuickPick.

In order to change these settings, the user can access the settings page via the ModifAI logo found in the primary sidebar.

Known Issues

There is currently an issue with the Gemini API where it returns a badly formatted JSON response. A fix is being worked on; however, a temporary workaround involves resending the prompt when an incorrect response is received. This approach, however, has the potential to create an infinite loop, as the conditions causing the badly formatted response are still unknown.

To address this issue, a limit has been set on the number of retries. This limit can be adjusted in the settings page but may result in longer wait times if the API call fails multiple times. This error has been observed more frequently when refactoring HTML code. However, the amount of data is inconclusive, and the issue has occurred in various unrelated scenarios.

Code Conventions

The team is adopting the following code conventions:

• camelCase for methods and variables (snake_case for Python)
• PascalCase for classes
• ALL_CAPS for constants
• Consistent Identation (1 tab)
• const and let instead of var in JavaScript/TypeScript

Security concerns

As the project is still in an early phase, we have not identified any security concerns yet.

Quality assurance

To assure the quality of this project, the group is thinking about using these tools for testing in the future:

Security Testing

• OWASP ZAP is an open-source security tool that allows you to identify all accessible endpoints and interaction points, such as API endpoints, that the chatbot, automatically running penetration tests, looking for vulnerabilities like cross-site scripting (XSS), SQL injection, and more.

CI/CD

• Jenkins allows you to automate deployment and testing processes

How to use

Head to the Extensions section in Virtual Studio Code. Search for ModifAI and click Install. The ModifAI badge should show on your environment's sidebar. Whilst having a code file opened, click it, write a prompt and wait for a response.

Mockup

Sprint Retrospective

Sprint 1

Retrospectives

• What went well:

  • Timely Completion: All US's were completed within the respective time frame.
  • Activate/Deactivate Explanation: A user can activate and deactivate the AI explanation for why the refactor was used.
  • Accept/Deny Refactor: A user can now accept or deny inserting the suggested refactor into his code, whether in the webview or through quickpick.
  • Open Communication: A decision was made to integrate our assistant with other groups with similar projects. The group discussed whether to agree or disagree with this integration and all members were openly communicative about it, leading to a collaborative decision-making process. The team reached a collective agreement, ensuring alignment and commitment to the decision.

• What went wrong:

  • Lack of communication in other areas: While communication was effective in some moments, such as decision-making, there were gaps in other aspects, like code development. The team feels there could be more consistent updates on what each member is working on.
  • Misunderstanding between teams: There was a little misunderstanding at the end of the sprint while deciding what each team would integrate, due to the fact that our group already had a couple of features done that would be implemented by us but ended up being done by another team without our knowledge.
  • Json Response: Sometimes Gemini returns a badly formatted JSON response, which we worked around by sending a limited number of retries until a correctly formatted response is sent. A real fix is being worked on. This error has been observed more frequently when refactoring HTML code.

• What is still a problem:

  • Outside of the JSON Response that has not yet been fixed, there are no other detected errors.

Sprint 2 & 3

Deprecated, see: WhatTheDuck

How to contribute

If you want to help us develop this project, take a look at the Development Guide.

Contributions

• Team 3
  • Diogo Silveira Viana (PO)
  • Gonçalo Martins
  • Sofia Minnemann (SM)
  • João Silva
  • Bernardo Pinto
  • Bruno Machado