cit-code-flow-generator

cit-code-flow-generator is a VS Code extension that generates unit tests for your code using OpenAI's language model. It supports various programming languages and unit testing frameworks, making it a versatile tool for developers looking to improve code quality.

Requirements

To use this tool, you need access to CI&T/Flow. Ensure you have the necessary credentials and permissions to authenticate and interact with the CI&T/Flow services.

Features

These features are ready to use out-of-the-box, but you can modify, remove, or add new ones in the prompts.yaml file to fit your needs. You can also maintain multiple YAML files with different sets of prompts and switch between them by updating the extension settings:

• Code Review and Refactoring: Provides detailed code reviews and refactoring suggestions, ensuring code quality, maintainability, and adherence to best practices.
• Customizable Frameworks: Supports different unit testing frameworks, configurable through the extension settings.
• Documentation Generation: Generates detailed documentation from code, including descriptions of functions, parameters, return values, and usage examples.
• Git Diff Evaluation: Evaluates Git diffs and documents changes in detail, identifying inconsistencies or errors and proposing corrections.
• Log Analysis: Performs thorough analysis of server and application log files, identifying issues, anomalies, or patterns, and providing recommendations for resolution or optimization.
• OpenAI Integration: Uses OpenAI's language model to create comprehensive and high-quality unit tests.
• Unit Test Generation: Automatically generates unit tests for selected code snippets and creates comprehensive unit tests for specified functions, covering various cases including edge cases and potential failure points.
• Vulnerability Analysis: Conducts deep vulnerability analysis of code, identifying potential security risks and recommending mitigation steps.
• Wireframe to Components: Converts wireframe images in base64 format into functional and well-structured components.

Code Instructions

The Code Instructions feature allows you to enhance your prompts by adding dynamic content. Within your created prompt, you can include variables, which will be mapped to the text area presented in the form. This means you can select any available prompt, and if it contains the {{...}} variable, it will utilize the text from the form to send instructions accordingly.

Installation

To get started with the cit-code-flow-generator extension, follow these steps:

1. Install the Extension:

   • Open VSCode and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
   • In the search bar, type publisher:"CI&TFLOW" to find the extension.
   • Click on the extension and then click the Install button.

2. Configure the Extension:

   • Open the extension settings by going to File > Preferences > Settings or using the shortcut Ctrl+,.
   • Search for cit-code-flow-generator or select Extensions > CI&T/FLOW - CodeFlow AI Generator in the sidebar to find the extension settings.

3. Set "Path To Chrome":

   • Locate the setting named Path To Chrome.
   • The default value is google-chrome, but some machines may use a different executable path like google-chrome-stable. Update this setting if necessary.

4. Create your "prompts.yaml" file:

   • You may use the example below (prompts.yaml file) as a starting point.
   • Be sure to use the absolute path to the file in the configuration, including the file name.

5. Set "Path To YAML With Prompts":

   • Locate the setting named Path To YAML With Prompts.
   • Update this setting to point to your prompts.yaml file, which contains the customized prompts you want to use.

6. Reload the UI:

   • After setting the prompts.yaml file for the first time, you might need to reload the UI. Open the command palette (Ctrl+Shift+P) and run Developer: Reload Window.

Once these steps are completed, the extension will be ready to use with your customized settings.

example/prompts.yaml

prompts:
- name: "Prompt - Explain Code (selected)"
  description: "Detailed Prompt to Explain the Selected Code"
  model: gpt-4o
  temperature: 0.7
  messages:
  - role: "system"
    content: |
      You are a highly experienced software engineer, responsible for explaining code in a clear and detailed manner. Your objective is to provide a comprehensive explanation of the code's functionality, logic, and structure.
  - role: "user"
    content: |
      ### Instructions:
      1. Thoroughly analyze the selected code.
      2. Provide a detailed explanation of the code's functionality and logic.
      3. Describe the purpose of each function/method, including parameters and return values.
      4. Explain key sections and logic within the code.
      5. Ensure your explanation covers the following aspects:
         - Code readability and style
         - Performance considerations
         - Security implications
         - Adherence to best practices and coding standards
         - Maintainability and scalability
      6. Provide your response in markdown format, with clear explanations for each point.

      ### Task:
      Explain the following code snippet:

      <SourceCode>
      {{selectedCode}}
      </SourceCode>

- name: "Prompt - Explain Code (file)"
  description: "Detailed Prompt to Explain the Selected Code"
  model: gpt-4o
  temperature: 0.7
  messages:
  - role: "system"
    content: |
      You are a highly experienced software engineer, responsible for explaining code in a clear and detailed manner. Your objective is to provide a comprehensive explanation of the code's functionality, logic, and structure.
  - role: "user"
    content: |
      ### Instructions:
      1. Thoroughly analyze the selected code.
      2. Provide a detailed explanation of the code's functionality and logic.
      3. Describe the purpose of each function/method, including parameters and return values.
      4. Explain key sections and logic within the code.
      5. Ensure your explanation covers the following aspects:
         - Code readability and style
         - Performance considerations
         - Security implications
         - Adherence to best practices and coding standards
         - Maintainability and scalability
      6. Provide your response in markdown format, with clear explanations for each point.

      ### Task:
      Explain the following code snippet:

      <SourceCode>
      {{code}}
      </SourceCode>

Usage

1. Log into CI&T/Flow: To use the extension, the first step is logging into CI&T/Flow. You can do this by:

   • Opening the command palette (Ctrl+Shift+P) and running CI&T/Flow - Login.
   • Clicking on the CI&T/Flow icon in the Activity Bar and executing CI&T/Flow - Login from the CI&T/Flow - CODE FLOW MAIN group.

2. Execute Featured Prompts: You can execute any of the featured prompts:

   • For prompts that work with code snippets, select the text you want to work with and then execute the prompt from the Activity Bar, right-click and select the CI&T Flow menu, or use the command palette to execute the prompt.

3. Example: Generate Unit Tests:

   • Activate the Extension: The extension is activated the first time you run a command. Open any code file, select a snippet, and execute the command cit-code-flow-generator.citUnitTestGenerator from the command palette.
   • Configure the Framework: The first time you run the command, you will be prompted to enter the name of the unit testing framework you want to use (e.g., PHPUnit). This configuration is saved globally.
   • Generate Unit Tests: After selecting the code snippet, the extension will interact with OpenAI to generate the unit tests. The generated tests will be displayed in a new markdown document.

4. Updating the Prompts in the YAML File:

   • You can add, alter, or remove prompts as needed in the YAML file.
   • After updating the YAML file, you need to reload the content of the file into the extension.

5. Using Multiple YAML Files:

   • You can create multiple YAML files per context, project, or technology as needed.
   • Switch the current active YAML file by updating the "Path to YAML With Prompts" configuration and reloading the extension.

6. Reloading the Prompts: To reload the prompts into the extension, you can:

   • In the Activity Bar, go to CI&T/FLOW and select CI&T/Flow - Refresh prompts.
   • In the command palette, run CI&T/Flow - Refresh prompts.
   • If the prompts are not refreshing, reload the window by running Developer: Reload Window in the command palette.

Configuration

You can configure the extension through VS Code settings. Go to File > Preferences > Settings and search for cit-code-flow-generator. The following settings are available:

• cit-code-flow-generator.flowToken: The token used for authentication with the OpenAI service.
• cit-code-flow-generator.flowLlmUrl: The base URL for the OpenAI language model.
• cit-code-flow-generator.flowLoginUrl: The URL for logging into the CI&T/Flow service.
• cit-code-flow-generator.flowAgent: The agent identifier for the OpenAI service.
• cit-code-flow-generator.flowTenant: The tenant identifier for the OpenAI service.
• cit-code-flow-generator.pathToYamlWithPrompts: The path to your prompts.yaml file, which contains the customized prompts.
• cit-code-flow-generator.pathToGeneratedFiles: The path where the generated files will be saved.
• cit-code-flow-generator.pathToChrome: The path to the Chrome executable. The default value is google-chrome, but some machines may use a different executable path like google-chrome-stable.

How To Create Prompts

Creating new prompts or adding to existing YAML files is straightforward. Below is a guide on how to structure your prompts using the provided code sample. This structure is currently compatible with OpenAI models used by CI&T/Flow. Support for other model providers will be added in the future, and collaboration is encouraged to help develop these.

Code Structure

Here is an example of how to structure a prompt in your YAML file. By following this structure, you can easily create new prompts or modify existing ones to suit your needs. Remember to reload the prompts into the extension after making changes to the YAML file.

prompts:
- name: "Prompt - Generate Documentation"
  description: "Generate Detailed Documentation from Code"
  model: model-name
  temperature: 0.5
  messages:
  - role: "system"
    content: |
      You are an expert in your field, responsible for generating comprehensive documentation based on the provided code. Your objective is to create detailed and clear documentation that accurately reflects the functionality, usage, and structure of the code.
  - role: "user"
    content: |
      ### Instructions:
      1. Analyze the provided code thoroughly.
      2. Generate detailed documentation that includes:
         - An overview of the code's purpose and functionality.
         - Descriptions of each function/method, including parameters and return values.
         - Explanations of key sections and logic within the code.
         - Any dependencies or required setup for the code.
         - Examples of how to use the code.
      3. Ensure the documentation is clear, well-organized, and in markdown format.

      ### Task:
      Document the following code snippet:

      <SourceCode>
      {{code}}
      </SourceCode>

Explanation of the Structure

• name: A unique name for the prompt, this will be used to run the commands from the Command Palette or the Activity Bar.
• description: A brief description of what the prompt does.
• model: The model to be used (e.g., gpt-4o).
• temperature: A parameter that controls the randomness of the output. A lower value makes the output more focused and deterministic.
• messages: A list of messages sent to the model with all context related to the prompt execution, such as how the model should behave, the prompt itself, and other messages.
  • role: Defines how the model must behave. Usually, it is an instruction like "You are a software engineer" with additional parameters to guide how the AI should execute and provide the output of the required tasks.
  • content: The actual message content, which includes the prompt itself with instructions, code snippets, tasks to perform in this context, and other possible sources attached to the content.

Using Variables

You can use two variables inside the prompt to refer to the code:

• {{code}}: This variable will use the entire content of the currently opened file.
• {{selectedCode}}: This variable will use only the selected content from the current file.

Using Loaders

You can use loaders to load the content of a file into the prompt. This is useful when you want to use the content of a file as part of the prompt. Here is an example of how to use loaders:

• [INCLUDE_CONTENT_FILE=/path/to/file.txt]: This loader will include the content of the specified file in the prompt. You can use this loader to load the content of a file into the prompt.
• You can load any kind of text file (.py, .js, .php, .txt, .log, ... and .pdf)
• You can load PDF files (.pdf)

Troubleshooting

Known Issues

1. CI&T/FLOW Tab Shows "There is no data provider registered that can provide view data":

   • Issue A: Your path to the YAML file is not properly configured. Ensure you have set up the path to the prompts YAML file correctly, and consider using an absolute path.
   • Issue B: The content of your YAML file is malformatted. Review the file structure, correct keys, fix indentations, etc.
   • Issue C: If you see a notification with the error "error loading prompts from YAML file," you need to update your settings as stated in Issue A or B.
   • Post Fix Action: After fixing this issue, you might need to reload the window. Open the command palette (Ctrl+Shift+P) and run Developer: Reload Window.

2. Notification Error "Failed to open browser: connect ECONNREFUSED":

   • You need to configure your Google Chrome executable path correctly. Update the "Path To Chrome" setting with the correct executable name. For example, google-chrome-stable.

3. New Prompt Not Executing After Refresh:

   • If you add a new prompt in the current prompts.yaml file and use CI&T/Flow - Refresh Prompts to update the available prompts, but the prompt won't execute (i.e., there is no notification about FLOW executing this prompt, nor a progress indicator in the bottom left of the status bar), you need to reload the window. Open the command palette (Ctrl+Shift+P) and run Developer: Reload Window.

Contributing

Contributions are welcome! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit with descriptive messages.
4. Push your changes to your fork.
5. Submit a pull request to the main repository.

License

This project is licensed under the MIT license.