APC: Accessibility Programmer Copilot GPT3 and ChatGPT POC extension for VSCode

This Visual Studio Code extension allows you to use the Azure Opan AI to generate frontend code or natural language responses to your questions from OpenAI's GPT3.5 Turbo instruct or GPT3.5 Chat, right within the editor. This extension concentrates on helping the developer write frontend HTML code that meets accessibility guidelines.

Improve your hift left efforts by coding with our AI-powered assistant! This will help us reduce the number of frontend accessibility bugs that make it to production. Automatically write new code from scratch, ask questions, get explanations, refactor code, find bugs and more. (Linting coming soon!)

Note: APC has been context set to work mainly for development related interaction and currently supports HTMl only. Other languages will work but we do not guarantee correctness*

Links:

• Visual Studio Marketplace

Features

• 💡 Ask general questions or use code snippets from the editor to query GPT3 via an chat box box in the sidebar
• ➡️ Right click on a code selection and run one of the context menu shortcuts
  • Explain the selected code
  • Refactor or optimize it
  • Find problems or accessibility bugs with it
• ➡️ View GPT's responses in a panel (sidebar with webview render) next to the editor
• ➡️ Use GPT-4, GPT-3.5, GPT3 your API Key from OpenAI or Azure OpenAI Service
• ➡️ Get streaming answers to your prompts in sidebar conversation window
• ➡️ Stop the responses to save your tokens.
• ➡️ Create files or fix your code with one click or with keyboard shortcuts.
• ➡️ Export all your conversation history at once in Markdown format.
• ➡️ Automatic partial code response detection. Continues and combines automatically, when response is cut off.
• ➡️ Ad-hoc prompt prefixes for you to customize what you are asking ChatGPT
• ➡️ Edit and resend a previous prompt
• ➡️ Insert code snippets from the AI's response into the active editor. Copy, insert or create new file from the code, ChatGPT is suggesting right into your editor.

Installation

To use this extension, install it from the VSCode marketplace.

1. After the installation is complete, you will need to add your Azure OpenAI API key to the extension settings in VSCode. The GPT instance that the extension connects to is controlled and hence we would like to limit the amount of traffic, hence you will need a key to access. Further to this, to allow flexibility to the developer, this allows for configuration of another model that the developer has access to. You are not limited to our model deployment instance only. To ssetup an API key , navigate to File->Settings->Preferences->Settings.
2. In the search bar, type APC to filter the settings list.
3. In the APC section, enter your API key in the properly labeled input field

After completing these steps, the extension should be ready to use.

Obtaining API key

To use this extension, you will need an API key that authenticates an instance of Azure Open AI deployment. You will also need an endpoint url to your AI model. Reach out to devninja.

Configurations

Using the Extension

To use the extension, open a text editor in Visual Studio Code and open the APC panel by clicking on the APC icon in the sidebar. This will open a panel with an input field where you can enter your prompt or question. By clicking enter, it will be sent to GPT3. The response will be displayed below the input field in the sidebar (note that it may take some time for it to be calculated).

You can also select a code snippet in the editor and then enter a prompt in the side panel, or right-click and select "Ask APC". The selected code will be automatically appended to your query when it is sent to the AI. This can be useful for generating code snippets or getting explanations for specific pieces of code.

To insert a code snippet from the AI's response into the editor, simply click on the code block in the panel. The code will be automatically inserted at the cursor position in the active editor.

You can select some code in the editor, right click on it and choose one of the following shortcuts from the context menu:

Commands:

• Ask APC: will provide a prompt for you to enter any query
• APC: Explain selection: will explain what the selected code does
• APC: Refactor selection: will try to refactor the selected code
• APC: Find problems: looks for problems/errors in the selected code, fixes and explains them. This section is still work in progress, with MAS rules forming the basis of validation.
• APC: Optimize selection: tries to optimize or improve the selected code

Ask APC is also available when nothing is selected. For the other four commands, you can customize the exact prompt that will be sent to the AI by editing the extension settings in VSCode Preferences. Considering this is work in progress, this section aims at introducing a channel where developers can tweak the prompts to get back more refined results.

The extension has been built without ties to a specific model. As a developer, you can also change the model that is referenced for the requests. The default is GPT3.5-Turbo-instruct which is more tailored to code generation. You can change it to another model if the default one doesn't work. Confirm that the model exists first. You can also change the temperature and number of tokens that will be returned by the AI. The default values are 0.5 and 1024, respectively.

Please note that this extension is currently a proof of concept and may have some limitations or bugs. We welcome feedback and contributions to improve the extension. Kindly cchannel any insights to airtdevninja@microsoft.com.

How to install locally

• Install vsce if you don't have it on your machine (The Visual Studio Code Extension Manager)
  • npm install --global vsce
• Run vsce package at the root folder of this extension's source code.
• Follow the instructions and install manually.

To do:

• Liniting against MAS rules.
• Code auto completion through leveraging AI

License

This project is released under Microsoft License.