AI Programmer for Rocket.Chat

Screen.Recording.2024-08-11.at.23.00.24.mp4

The AI Programmer Rocket.Chat App enables users to generate a short piece of code in C/C++, Java, Javascript, Typescript or Python based on their specification. They can switch between different LLMs (Mistral, CodeLlama, etc.) and ask for a new refinement on the code generation result to make augment or fine-tune. A well-designed interactive UX aiming to simplify user's interactions is also implemented. Finally, the app bridges the generated codes with sharing APIs, allowing users to share the code pieces in RC channel and their Github repositories.

🚀 Features 🚀

• Quick and Easy Setup
• Automatic Code Generation
• Ask for Code Refinement
• Personalized User Configuration with Different Programming Language and LLM Options
• Login to GitHub with one click using built-in App Engine's OAth2 mechanism
• Share the generated code content to GitHub Repository by Seamlessly Manipulating GitHub APIs
• Share generated code content into Rocket.Chat Channels

💡 Usage 💡

Open Main Contextual Bar for Quick Access to Various Features

To open the main contextual bar and access various features, use the command: /ai-programmer.

Main Contextual Bar:

• Set up user configuration options for the different Programming Languages and LLMs.
• After setting up valid user configurations, users can progress to generate code pieces.
• For the code generation result, users will be provided with several action choices.

Action Choices & Modal Features:

• Generate new code pieces by typing in the requirements and expected features of code.
• Ask for code refinement if not satified with the current code result by typing in refinement requirements.
• Share generated code content into the current RC channel to make the content viewable by other users.
• Share generated code content to GitHub repository by setting up correct OAuth2 token, repository name, file path, branch, etc.
• Edit content before sharing to any external resources to verify the correctness.

Command List

• Use the interactive user interface to handle your operations → /ai-programmer ui
• Set the language you want to use to generate code → /ai-programmer set
• List the available LLM options → /ai-programmer list
• Switch to the LLM you want to use to generate code (please view the viable LLM options first!) → /ai-programmer llm
• Generate code pieces with specific description (please set language and llm correctly first!) → /ai-programmer gen
• Login to Github (You should set OAuth2 settings first!) → /ai-programmer login
• Logout to Github → /ai-programmer logout

🚀 Contribution 🚀

• Set up the Application on your server using the following setup guide.
• Explore the app and look for existing issues to solve. We look forward to new PRs 💯.
• If you find a bug or a missing feature, feel free to open a new Issue.
• If you are new to Rocket.Chat App Development, follow the developement documentation and RocketChat Apps Engine TypeScript Defenitions
• You can also follow other Rocket.Chat Apps for inspiration : Polls Plus App, ClickUp Rocket.Chat App , Figma Rocket.Chat App

Rocket.Chat Server Setup 🐳

1. Rocket.Chat Apps Run on a Rocket.Chat server. If you dont have a server setup, please go through this setup and setup a development environment and setup you server
2. To start with development on Rocket.Chat Apps, you need to install the Rocket.Chat Apps Engline CLI. Enter the following commands :

  npm install -g @rocket.chat/apps-cli

Check if the CLI has been installed

rc-apps -v
# @rocket.chat/apps-cli/1.4.0 darwin-x64 node-v10.15.3

3. Clone the GitHub Repository

   git clone https://github.com/RocketChat/Apps.RC.AI.Programmer

4. Enter the AI.Programmer directory and install dependecies

  cd Apps.RC.AI.Programmer
  npm install

5. In order to install Rocket.Chat Apps on your development server, the server must be in development mode. Enable Apps development mode by navigating to Administration > General > Apps and click on the True radio button over the Enable development mode..
6. Deploy the app on your server by executing the following command inside the project directory (/Apps.RC.AI.Programmer)

rc-apps deploy --url http://localhost:3000 --username <username> --password <password>

Where: http://localhost:3000 is your local server URL (if you are running in another port, change the 3000 to the appropriate port).

username is the username of your admin user. password is the password of your admin user. If you want to update the app deployed in your Rocket.Chat instance after making changes to it, you can run:

rc-apps deploy --url http://localhost:3000 --username user_username --password user_password --update

The Application is now installed on the server. You can verify this by checking the installed applications from the administration panel. Enter /ai-programmer or /ai-programmer help in the message input box of any channel on the server to know about different features and how to trigger them using different slash commands.

🖥️ Application Setup 🖥️

In this AI Programmer App, we enabled users to share their generated code content to GitHub repository. Thus, users need to setup the GitHub OAth2 tokens to authenticate and acquire the permission of uploading files into their repositories.

1. The First Step is to setup a GitHub Oauth2 App. To setup the GitHub Oauth App Follow The Official Guidance
2. The callback URL must be set to the url which this app is deployed on. (e.g. http://localhost:3000 for local servers).
   
3. Once the GitHub OAuth app is setup, open the GitHub Application Settings and enter the GitHub App OAuth Client Id and Client Secret over here.
   

The users can login to GitHub by entering the slash command /ai-programmer login and then clicking on the Login button.

Users are logged out after a week using a scheduler mechanism but the users can also logout at any time by entering /ai-programmer logout.