CodeAI — AI-Powered Code Editor

CodeAI is a modern, browser-based code editor that combines a smooth coding experience with AI-powered code review and live execution capabilities. It is designed to feel like a lightweight IDE in the browser.

The primary focus of the project is the code editor itself, which is fully managed and hosted by users. AI review is an optional enhancement powered by the Groq API and is not required for the core functionality.

Key Features

CodeAI offers a set of powerful features aimed at improving developer productivity:

• Monaco Editor Integration
  Uses the same editor that powers VS Code, providing rich syntax highlighting and a familiar coding experience.

• AI Code Review (Optional)
  Sends user code to Groq’s language model and returns intelligent, real-time feedback.

• Live Code Execution
  Supports execution of JavaScript and Python directly on the server, with output streamed back to the UI.

• Multi-language Support
  Currently supports JavaScript and Python.

• Tabbed Output Panel
  Allows users to switch between terminal output and AI review without losing context.

Project Structure

The project is organized into backend and frontend components:

• server.js
  Express backend handling API routes such as /api/review, /api/run, and /api/health.

• src/App.jsx
  Main React component responsible for layout and editor integration.

• src/App.css
  Contains all styling, including the dark IDE theme.

• src/ReviewPanel.jsx
  Component used to display AI-generated code reviews.

• .env
  Stores environment variables (not committed to version control).

• package.json
  Project dependencies and scripts.

• README.md
  Documentation file.

Setup and Installation

Prerequisites

Before setting up the project, ensure you have:

• Node.js version 18 or higher

• Python 3 (required for Python code execution)

• A Groq API key (only if you want AI review functionality)

Installation Steps

1. Clone the repository

   Clone the project and navigate into it.

2. Install dependencies

   Install backend dependencies using npm.
   If the frontend is in a separate directory, install its dependencies as well.

3. Configure environment variables

   Create a .env file in the root directory and add:

   • GROQ_API_KEY (your API key)

   • PORT (default: 5000)

   Important: Never commit this file to version control.

4. Run the application

   • Start the backend server

   • Start the frontend development server in a separate terminal

   The application will typically run on http://localhost:5173.

API Overview

POST /api/review

This endpoint sends code to the AI model for review.

• Input: Code and programming language

• Output: AI-generated feedback on the code

POST /api/run

This endpoint executes code securely on the server.

• Supports JavaScript and Python only

• Uses a sandboxed child process with a 5-second timeout

• Returns the execution output

If another language is provided, an error is returned.

GET /api/health

A simple health check endpoint to verify that the server is running.

• Response: Status confirmation

Tech Stack

The project is built using the following technologies:

• Frontend: React with Monaco Editor

• HTTP Client: Axios

• Backend: Node.js with Express

• AI Integration: Groq SDK

• Code Execution: Node.js child_process

• Styling: Custom CSS with developer-friendly fonts

Security Considerations

• Code execution is limited to 5 seconds to prevent infinite loops.

• Only JavaScript and Python are supported to reduce risk.

• Temporary files are written for execution; in production, isolated environments (such as Docker containers) are recommended.

• The API should never be exposed publicly without authentication, as it allows arbitrary code execution.

Deployment Status

The project currently runs successfully in a local development environment.

Deployment has not yet been completed because the execution system depends on the local setup.

Future Scope

• Containerize the execution environment using Docker

• Enable safe and scalable deployment

• Improve sandboxing for better security

• Add support for more programming languages