GitGPT: Mobile Coding Assistant with GitHub Contextual Integration

Team 13 - Yecheng Wang, Tianxi Huang, Yvan Zhang, Albert Zhang

Built with React Native, OpenAI API, and demo deployed on Vercel.

Try out our app simulator! 🔗 Web App Simulator

Watch the video walkthrough: Youtube

Introduction

GitGPT is an improvement of ChatGPT on mobile, where we aim to resolve the key pain points using ChatGPT for coding: The lack of context and inability to paste large code blocks or import files.

There are 2 main tasks that our prototype implements:

1. Importing a repository for contextual information
2. Editing code and pushing back to the repository

This ReadMe walks through

(a) how to clone and run the project on personal devices, and

(b) how to effectively navigate the application and use all features provided

I suggest using the web app simulator as it already integrates an OpenAI API key, otherwise you would be required to create your own API key. You can follow the steps below.

Contents

• Cloning the project
• Project Setup and API Key
• Running the Project
• Step-by-Step App Walkthrough
• Additional Features

---

Cloning the repository:

First clone the repository in your desired directory, in your terminal run:

git clone https://github.com/Vancarii/gitgpt.git

Then run this to open the project in vs code:

code .

Project Setup and API Key:

Before setting up the project, ensure you have Node installed to use npm, or alternatively you can use yarn

1. Go to OpenAI website and create your own api key

2. Navigate to the server folder

   cd server
   

3. Create a file named .env in the server folder with the following contents:

   OPENAI_API_KEY=actual_openai_key_here
   

and replace actual_openai_key_here with the openai key you obtained in step 1

4. Now in the terminal of the server folder run:

   npm install
   

5. Navigate back to the root folder of the project and run:

   npm install
   

---

Running the Project

1. First navigate to the server folder and run the server:

   cd server          // navigate to server folder
   node server.js     // run the server
   

   Ensure the server is running of port 8081

2. Then to run the whole project in the root directory:

   cd ..       // navigate back to root directory
   npm start   // run the project
   

Once prompted to run the project on port 8082, select y for yes

You will now be prompted with the local host link for the web version, and also the QR code to open the expo app. If the expo app is installed, simply scan the QR code with your camera (for iOS) or use the expo app to scan (for Android).

Step by Step App Walkthrough

Task 1: Login, Connect GitHub, Import Repository

Step 1: Login Process

Now that the app is up and running on either mobile or web, here are steps to navigate the app.

1. Tap the top-right login button to enter the login interface

3. Since our app checks for null input values, enter some text in the input boxes, for example:

• username: user
• password: 1234

Then click Sign in

---

Step 2: Connect GitHub Account

1. Connecting to GitHub now can be done in 2 way:
   • (Shorter method) Click the GitHub Login button in the main chat interface

• OR: Go to the menu sidebar and click Linked Accounts, then click on Connect in the GitHub tab

2. Enter a simple text into the input boxes (ex. username: user, password: 1234) and click on the Connect to GitHub button to sign in

You will then be brought back to the home chat screen

Step 3: Select GitHub Repository

1. After linking GitHub, click on Import Repository in the chat screen

2. Select any repository from the displayed list, for example: react-native-app

---

Task 2: Get AI Code Suggestions, Edit code, Push to Repository

Step 4: Review and Edit Code

1. Now that the app has context, you can provide a prompt in the text box at the bottom. An example prompt would be:

   Give me a short for loop in python
   

2. Next, you can review the suggested code and its explanations, then click View Code Editor to open the code editing page

3. Click Accept to write in the new code suggestions into the file.

---

Step 5: Push Changes to GitHub

1. Click the top-right upload icon

2. Select Push to Main from the dropdown menu

3. Input your commit message, then tap the Commit Changes button at the bottom of the page

4. Click Commit in the popup dialog

5. Your changes will be committed to your repository. Tap Back to Chat to return to the chat screen and complete the workflow

Thats it! You've completed the 2 main tasks of our application.

---

Additional Features

• Personalization: Users are able to see their own account details and also toggle light mode and dark mode

• Error handling and prevention:

  • If prompts are sent without network connect, users will be notified of the error and suggested to check their network
  • If users try to login with null input boxes, it prompts them to input a value
  • History shows any older changes made allowing users to revert back to an older version if errors were made
  • Users are shown a guide to effectively navigate the new code editor screen and inform them of possible actions

• System feedback:

  • functionalities not yet implemented (not part of the main 2 tasks) are shown a popup for feedback
  • After accepting the new changes or editing the text in the file, there will be a M shown beside the filename, indicating the file has new changes saved. You will also be able to undo and redo, and view the history of changes made.