ai_se/project_description.md

#Lightweight Code Editor with AI integration

1. Introduction

This code editor was made as a project for the course Artificial Intelligence in Software Engineering I at FH Graubuenden. Its purpose is to help with coding questions and debugging.

2. Requirements

streamlit openai ddgs dotenv

3. Installation

• install requirements through pip
• aquire the environment variables thourgh FHGR
• connect to the FHGR VPN to get access to the AI model.
• run the app via terminal with "streamlit run app.py". A browser window will open.

4. Architecture

The code is split up into frontend (app.py) and backend modules (FileManager, ChatManager, SystemPrompter, ExecutionEngine, DebugLogger and SearchManager). A lot of functionality is realized through the use of the session_state from streamlit. Since the streamlit app is rerun after each action the session_state is used to keep track of relevant information.

4.1 app.py

This module is the entrypoint for the streamlit functionality. It contains all elements that are visible when the program is run.

• sidebar: The sidebar shows all python files within the working directory through fuctions found in the FileManager. Each file is represented by a clickable button. There is no functionality to add or delete files from within the program. To change the available files the user has to manually add them to the directory. Interacts with FileManger

• code editor: The code editor shows the contents of the opened file. The contents can be changed, saved and also executed. Interacts with FileManager, ExecutionEngine

• chat: This element consists of an input area to send messages to the AI, two toggles to enable different modes as well as a scrollable history. The first toggle is "enable internet search". This appends the results of an internet search to the prompt that is sent to the AI. This means the results from the search are not primarily for the user, but for the AI to use recent information before responing to the user. The second toggle "debug with qwen" appears only when a file was executed. This mode uses more structured output which is also sent to the next prompt for the AI. With this feedback the AI can help with a more focused approach to find and fix bugs in the code. The user has to implement the fixes themself since the AI cannot change the contents of the file. Interacts with ChatManager, Debuglogger

4.2 FileManager.py

This module manages the access to the working directory. It uses Path objects. The open_file function is only used as a helper function to save the file path and contents to the session_state.

4.3 ChatManager.py

The environment variables are located in a .env file which is excluded from the gitea upload. The qwen AI is accessed through the openai API client. While this module sends the messages to the AI it is heavily dependend on the SystemPrompter to supply the relevant context for the finished prompt. Interacts with SystemPrompter

4.4 SystemPrompter.py

This module handles all the context to add to the user message sent via the ChatManager. The instructions for the AI are structured with xml tags. There are two modes which are chosen with a toggle. Both modes differ in the system component and sent context. When the toggle is off the generated prompt includes system instructions which make the AI act as a coding assistant who gives short responses. With the toggle on the output is structured with json and focussed on finding bugs in the provided code. The AI's response is also loaded into the session_state. This means that subsequent messages to the AI keep its own responses therefore having the ability to iterate on them. Interacts with SearchManager

4.5 ExecutionEngine.py

With this module the program can execute the opened file after clicking the corresponding button in the streamlit app. There is a safety check before the subprocess is called to make sure no malicious actions can be made from within the program. Interacts with Debuglogger

4.6 DebugLogger.py

This module handles making all outputs from various other module more readable and useable. It saves the AI's response in the session_state to be able to send it with the next prompt when using the debug toggle.

4.7 SearchManager.py

This modules uses the duckduckgosearch API to make searching the internet possible. The user does not directly see the search, but the result is sent with the prompt to the AI.

5. Usage

The following examples illustrate how to use this program.

I want to ask the AI about something in my file user actions: + click on button with name of the file + write message to AI + it for response + implement suggestions from AI

**interaction flow**:
+ st.sidebar uses list_files() to generate Buttons
+ on_click uses open_file() to load content and file Path into session_state
+ send_message() uses generate_prompt() to add system_prompt and context = file_content to the user_message
+ response is displayed by st.session_state.messages

I want to ask the AI about somehting in my file, but the AI has outdated info about the topic user actions: + click on button with name of the file + activate "enable internet search" toggle + write message to AI + wait for response + implement suggestions from AI

**interaction flow**:	
+ st.sidebar uses list_files() to generate Buttons
+ on_click uses open_file() to load content and file Path into session_state
+ send_message() uses generate_prompt() to add system_prompt and context = file_content and results from perform_search() to the user_message
+ response is displayed by st.session_state.messages

I want to debug my code user actions: + click on button with name of the file + click the "execute code" button + write message to AI + wait for response + implement suggestions from AI + write message to AI + implement suggestions from AI

**interaction flow**:	
+ st.sidebar uses list_files() to generate Buttons
+ on_click uses open_file() to load content and file Path into session_state
+ on_click uses run_code() to execute the file, results are formatted by format_output() or format_error()
+ code_output or code_error are loaded into seassion_state
+ send_message() uses generate_prompt() to add system_prompt which detects the "debug" toggle and adds context = file_content and code_output / code_error to the user_message
+ response is displayed by st.session_state.messages
+ send_message() uses generate_prompt() to add system_prompt which detects the "debug" toggle and adds context = file_content and code_output / code_error and debug response to the user_message
+ response is displayed by st.session_state.messages