Building CodeClarity: An AI-Powered Code Documentation Tool

In this blog, we’ll walk through the process of building CodeClarity, an AI-powered tool that helps developers understand and document legacy codebases. Whether you’re a beginner or an experienced developer, this project will give you hands-on experience with Vertex AI, FastAPI, React, and an innovative technique called RAPTOR summarization. Let’s dive in!

What is CodeClarity?

CodeClarity is designed to:

✅ Generate Documentation: Automatically create detailed documentation for legacy code.
✅ Summarize Code: Provide concise summaries for complex code segments.

It’s aimed at making older or undocumented codebases more accessible to developers, easing onboarding and maintenance.

Tech Stack

For this project, we use:

• Backend: FastAPI (Python)
• Frontend: React (JavaScript)
• AI Models: Vertex AI for generating documentation and RAPTOR for summarization
• Deployment: Docker and Google Cloud

Step 1: Setting Up the Backend

1.1 Install Dependencies

Create a requirements.txt file with the following content:

fastapi==0.95.2
uvicorn==0.22.0
pydantic==1.10.7
python-dotenv==0.21.1
python-multipart==0.0.6
google-cloud-aiplatform==1.26.1
transformers==4.30.2
torch==2.0.1

Then install the dependencies:

pip install -r requirements.txt

1.2 RAPTOR Summarization

RAPTOR (Rapid Analysis and Processing Tool for Outlines and Reports) is a hierarchical summarization engine. It breaks the input code into manageable chunks, summarizes each chunk using a transformer-based summarizer, and then consolidates these summaries into a comprehensive overview.

The core function of RAPTOR looks like this:

def process(self, code: str) -> dict:
    # Split code into chunks
    chunks = self._chunk_code(code)
    # First-level summaries for each chunk
    level1 = [self.summarizer(c, max_length=150)[0]['summary_text'] for c in chunks]
    # Combine the level1 summaries into a final summary
    level2 = self.summarizer(' '.join(level1), max_length=300)[0]['summary_text']
    return {"summary": level2, "chunks": chunks}

This two-tiered approach helps capture both fine-grained and holistic insights about the code.

1.3 FastAPI Backend

The FastAPI backend exposes an endpoint to analyze code files. It passes the content to both RAPTOR and Vertex AI, then returns the combined output.

from fastapi import FastAPI, UploadFile
from app.raptor import RAPTORProcessor
from app.vertex_ai import generate_doc

app = FastAPI()
raptor = RAPTORProcessor()

@app.post("https://medium.com/analyze")
async def analyze_code(file: UploadFile):
    code = (await file.read()).decode()
    return {
        "documentation": generate_doc(code),
        **raptor.process(code)
    }

Step 2: Building the Frontend

2.1 Setting Up

Create a package.json file for your React app:

{
  "name": "codeclarity-frontend",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "axios": "^1.3.4",
    "react-markdown": "^8.0.5"
  }
}

Install the dependencies:

npm install

2.2 React Frontend

The React app provides an interface for uploading code files. Upon file selection, it sends the file to the FastAPI backend and displays the resulting documentation and summary.

import React, { useState } from 'react';
import axios from 'axios';
import ReactMarkdown from 'react-markdown';

function App() {
  const [results, setResults] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    setLoading(true);
    try {
      const response = await axios.post('http://localhost:8000/analyze', formData);
      setResults(response.data);
    } catch (error) {
      console.error('Analysis failed:', error);
    }
    setLoading(false);
  };

  return (
    

      
CodeClarity

      
      
      {loading && 
Analyzing code...
}
      
      {results && (
        

          
Code Summary

          
{results.summary}

          
          
Generated Documentation

          {results.documentation}
        

      )}
    

  );
}

export default App;

Step 3: Running the Application

Backend

cd backend
uvicorn app.main:app --reload

Frontend

cd frontend
npm start

Step 4: Deployment

4.1 Dockerize the Backend

Create a Dockerfile in your backend folder:

FROM python:3.9-slim

WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

Build and run the Docker container:

docker build -t codeclarity-backend .
docker run -p 8000:8000 codeclarity-backend

4.2 Deploy to Vertex AI

Build and push the Docker image:

gcloud builds submit --tag gcr.io/your-project-id/codeclarity-backend

Deploy to Vertex AI:

gcloud ai endpoints deploy-model codeclarity 
  --project=your-project-id 
  --region=us-central1 
  --docker-image-uri=gcr.io/your-project-id/codeclarity-backend 
  --machine-type=n1-standard-4 
  --accelerator=type=nvidia-tesla-t4,count=1

Conclusion

🚀 CodeClarity combines AI and modern web development to bring clarity to legacy codebases. By following this guide, you’ve learned how to:

✅ Build a backend with FastAPI, RAPTOR, and Vertex AI.
✅ Develop a React frontend for an interactive UI.
✅ Deploy the application using Docker and Google Cloud.

💖 Contribute & Support

If you found this project useful, consider giving it a ⭐ on GitHub!

👉 GitHub Repo: https://github.com/carrycooldude/codeclarity

We welcome contributions! Feel free to fork the repo, open issues, and submit pull requests.

Happy coding! 🎉

Building CodeClarity: An AI-Powered Code Documentation Tool was originally published in Google Developer Experts on Medium, where people are continuing the conversation by highlighting and responding to this story.