DocomateAI Frontend

The frontend for DocomateAI, a smart AI-powered documentation assistant that helps developers auto-generate project documentation, preview markdown output, and interact with their codebase visually and intuitively.

📌 For the backend and full-stack implementation, visit our GitHub organization

---

Table of Contents

• DocomateAI Frontend
  • Table of Contents
  • Features
  • Screenshots
    • Login Page
    • Dashboard
    • Project Page
    • Readme Section Selection Page
    • Readme Output Page
    • Save Readme Page with Download Btn (in Dark Mode)
    • Chat Page (in Dark Mode)
    • Chat Page with response
    • Profile Page (in Dark Mode)
    • Settings Page (in Dark Mode)
  • Installation
    • Requirements
    • Steps
  • Wanna Try It
  • Author

---

Features

• Sleek, responsive UI built with ShadCn + TailwindCSS
• AI integration to generate READMEs and chat with codebase.
• Markdown editing and live preview support
• Secure user authentication (via backend API)
• Seamless API interaction with Groq.
• Built with Vite for super fast dev experience

---

Screenshots

Login Page

Dashboard

Project Page

Readme Section Selection Page

Readme Output Page

Save Readme Page with Download Btn (in Dark Mode)

Chat Page (in Dark Mode)

Chat Page with response

Profile Page (in Dark Mode)

Settings Page (in Dark Mode)

Installation

Requirements

• Node.js (v18+ recommended)
• npm

Steps

1. Clone the repository

   git clone https://github.com/docomate-ai/docomate-ai-frontend.git
   cd docomate-ai-frontend

2. Installing Dependencies

   npm install

3. Update the axios configuration: Open src/lib/axios.ts and do following changes.

   axios.defaults.baseURL = "<write your backend URL>";

4. Start the development server:

   npm run dev

5. Open http://localhost:5173 in your browser.

Wanna Try It

• Check out the live site here: Docomate AI

Author

• Gitanshu Sankhla