🚀 Readme File Overhaul — AI Project Editor Frontend

Overview

This is the Readme document for the Web MVP: AI Project Editor, a cutting-edge front-end application designed to streamline project management and collaboration with AI-driven tools. The goal of this project is to provide users with an intuitive interface that integrates seamlessly with our backend system while offering powerful features such as file browsing, collaborative editing, and AI-assisted task tracking.

Getting Started
Key Features
Project Structure
Technical Details
Installation & Setup
Contributing
Acknowledgments

Getting Started

Prerequisites

Before you begin, ensure your environment meets these requirements:

Node.js v14.x or higher
Docker Compose installed on your machine

Installation & Setup

To set up the development environment:

Clone the repository:

git clone https://github.com/your-repo.git

Navigate into the project folder:
```
cd ai-project-editor-frontend
```
Install dependencies using npm:
```
npm install
```
Start the local server:
```
docker-compose up --build
```
Open the frontend in your browser at:
- http://localhost:8080

Running Backend Locally

The backend is also available via Docker Compose. To run it alongside the frontend:

Change directories to the backend location:
```
cd /path/to/backend-directory
```
Run the following command:
```
docker-compose up --build
```
Access the backend service at:
- http://localhost:8081

Key Features

Core Functionality

File Browsing: Securely access files from user's local directory through showDirectoryPicker or fallback input[webkitdirectory]. Directories like .git are excluded automatically.
Recursive Tree View: Recursively display folders and their contents, allowing users to navigate deep hierarchies easily.
Markdown Editing: Create new Markdown files (.md) directly within the interface by clicking the "+MD" button.
Collaborative Review System: Users can track changes made to documents, view diffs, and approve/reject individual files or sections.
Responsive Layout: Three-column layout with default widths: 15%, 65%, and 20%.
Integration with Backend Services: Real-time communication between frontend and backend includes:
- Post requests to /api/rag/sessions and polling for updates using GET /api/rag/sessions/{rag_session_id}/jobs/{index_job_id}.
- Chat dialogues via POST /api/chat/dialogs and messages via POST /api/chat/messages with real-time polled responses.
Validation: Ensure all required fields in changesets are validated before processing ("create", "update", "delete").
Review Status Management: Track review statuses including pending, accepted_partial, accepted_full, rejected, conflict, and applied.
Apply Accepted Changes: Apply approved changes after verifying hashes and confirming deletion.
No Git Operations: No direct interaction with Git repositories; no automatic application of edits.

Technical Details

Project Structure

The project is organized into several key components:

Frontend: Built using Monaco Editor, React, and CSS modules.
Backend: Uses RESTful APIs powered by Node.js and Express.
Database: Stores user data and session information in MongoDB.

Tools Used

Monaco Editor: Powerful JavaScript-based editor embedded within the application.
React: For building dynamic interfaces and managing state.
MongoDB: Manages persistent storage for user sessions and configurations.
Docker Compose: Facilitates easy deployment and integration testing.

Contributing

If you'd like to contribute to this project, follow these steps:

Fork the repository.
Create a new branch for your feature or bug fix.
Make necessary changes and submit a pull request.
Discuss any major changes with the team beforehand.

Acknowledgments

Special thanks to the developers who contributed to this project, including:

Alex Semenov
Codex 2026.02.23
Team members

This project would not be possible without their dedication and expertise!

4.4 KiB Raw Permalink Blame History