|
| 1 | +# Azure SDK Copilot Extension for VS Code (Proof-of-Concept) |
| 2 | + |
| 3 | +This project provides a Visual Studio Code extension for interacting with an Azure OpenAI GPT model in a chat-style interface. It consists of a TypeScript UI and a Python backend that communicate with each other via a socket. |
| 4 | + |
| 5 | +The [Python backend](https://github.com/mario-guerra/azsdkchatbot/tree/main/python#readme) implements a chat connection with Azure OpenAI models using connectors from the [Semantic Kernel SDK](https://github.com/microsoft/semantic-kernel). It's currently designed to answer questions by querying a Qdrant vector database embedded with READMEs scraped from Azure SDK GitHub repos. |
| 6 | + |
| 7 | +The [TypeScript front end](https://github.com/mario-guerra/azsdkchatbot/blob/main/src/README.md) implements a VS Code webpanel with a chat interface UI that can be used to interact with the chat backend. |
| 8 | + |
| 9 | +This is strictly a proof-of-concept demonstrating the use of retrieval-augmented generation (RAG) for surfacing content from our GitHub repos. |
| 10 | + |
| 11 | +## Dependencies |
| 12 | + |
| 13 | +### Python Backend |
| 14 | + |
| 15 | +The following dependencies are required to run the Python backend: |
| 16 | + |
| 17 | +1. Python 3.6 or higher |
| 18 | +2. `semantic-kernel==0.2.7.dev0` |
| 19 | +3. `qdrant-client` |
| 20 | +4. `socket` |
| 21 | +5. `re` |
| 22 | +6. `asyncio` |
| 23 | + |
| 24 | +### TypeScript UI |
| 25 | + |
| 26 | +The following dependencies are required to run the TypeScript UI: |
| 27 | + |
| 28 | +1. Visual Studio Code |
| 29 | +2. TypeScript |
| 30 | +3. vscode |
| 31 | +4. path |
| 32 | +5. net |
| 33 | +6. child_process |
| 34 | +7. markdown-it |
| 35 | + |
| 36 | +## Installation |
| 37 | + |
| 38 | +### Python Backend |
| 39 | + |
| 40 | +To install the dependencies for the Python backend, run the following commands: |
| 41 | + |
| 42 | +```bash |
| 43 | +pip install semantic-kernel==0.2.7.dev0 |
| 44 | +pip install qdrant-client |
| 45 | +``` |
| 46 | + |
| 47 | +### TypeScript UI |
| 48 | + |
| 49 | +1. Install [Visual Studio Code](https://code.visualstudio.com/). |
| 50 | +2. Install [TypeScript](https://www.typescriptlang.org/download) globally using npm: |
| 51 | + |
| 52 | +```bash |
| 53 | +npm install -g typescript |
| 54 | +``` |
| 55 | + |
| 56 | +3. Install the required npm packages: |
| 57 | + |
| 58 | +```bash |
| 59 | +npm install vscode path net child_process markdown-it |
| 60 | +``` |
| 61 | + |
| 62 | +## Running the Extension |
| 63 | + |
| 64 | +To run the TypeScript UI, open the extension project in Visual Studio Code and press `F5`. In the new window that loads, press `Ctrl-Shift-P` to bring up the command window. Select 'Start SDK Copilot' from the options, and the chat panel UI will be displayed, allowing you to interact with the chatbot. |
| 65 | + |
| 66 | +## Overview of Functions |
| 67 | + |
| 68 | +### Python Backend |
| 69 | + |
| 70 | +- `create_socket()`: This function initializes a socket object, binds it to a specified address and port, and sets it to listen for incoming connections. |
| 71 | + |
| 72 | +- `create_embedding(data)`: This asynchronous function generates embeddings for the given data. It includes retry logic to account for rate limit errors. |
| 73 | + |
| 74 | +- `ask_chatbot(input)`: This asynchronous function generates a response to the user's question from relevant README content using the ChatGPT API. |
| 75 | + |
| 76 | +- `query_qdrant(user_input, collection_name, language)`: This asynchronous function queries the Qdrant storage with the user input, collection name, and language to find relevant READMEs. |
| 77 | + |
| 78 | +- `chat(user_input: str, previous_input)`: This asynchronous function processes the user input, checks for language matches, and calls the `query_qdrant()` function. It handles cases where the user input does not match any language and provides the chatbot answer at the end of each iteration. |
| 79 | + |
| 80 | +- `main()`: This asynchronous function sets up the socket server, listens for incoming connections and user inputs, and calls the `chat()` function to generate responses. It sends the responses back to the VS Code extension through the socket connection. |
| 81 | + |
| 82 | +### TypeScript UI |
| 83 | + |
| 84 | +- `activate(context: vscode.ExtensionContext)`: This function is called when the extension is activated, and it sets up the extension's functionality. |
| 85 | + |
| 86 | +- `connectToPythonScript(callback: (panel: vscode.WebviewPanel) => void, panel: vscode.WebviewPanel)`: This function connects the TypeScript UI to the Python script via a socket connection. |
| 87 | + |
| 88 | +- `runPythonCode(userInput: string, panel: vscode.WebviewPanel)`: This function sends the user input to the Python script and waits for the response. |
| 89 | + |
| 90 | +- `createChatPanel()`: This function creates the chat panel UI for the extension. |
| 91 | + |
| 92 | +- `deactivate()`: This function is called when the extension is deactivated. |
| 93 | + |
| 94 | +- `startPythonScript()`: This function starts the Python script as a child process. |
| 95 | + |
| 96 | +## Usage |
| 97 | + |
| 98 | +Once you have installed the dependencies and set up the extension, you can start using the ChatGPT extension for Visual Studio Code. Follow these steps to interact with the chatbot: |
| 99 | + |
| 100 | +1. Open the extension project in Visual Studio Code and press `F5`. A new window will load with the extension activated. |
| 101 | +2. Press `Ctrl-Shift-P` to bring up the command window. |
| 102 | +3. Select 'Start SDK Copilot' from the options. The chat panel UI will be displayed. |
| 103 | +4. Type your questions or messages in the input field and press 'Enter' or click the 'Send' button to send them to the chatbot. |
| 104 | +5. Use '/\<language\>' triggers in your question to trigger a query into the backing Qdrant db memory store. Supported languages are: [`/rust`, `/net`, `/javascript`, `/java`] |
| 105 | + Example query: "/rust sdk for service bus" |
| 106 | +6. The chatbot will respond with relevant answers, and you can continue the conversation by asking follow-up questions or entering new queries. |
| 107 | + |
| 108 | +The ChatGPT extension is designed to provide information about Azure SDKs and can answer questions based on the context provided in the prompts. It prioritizes content from the prompts and falls back on its own knowledge only when there is no relevant information in the prompt. The chatbot provides concise and clear answers, formatted using markdown syntax for better readability. |
0 commit comments