ClarioDocs API Documentation Generator

ClarioDocs API Documentation Generator is a web application designed to help users upload, process, and generate interactive documentation for API specifications (such as OpenAPI or Postman collections). The project provides a collaborative interface for managing documentation projects, previewing MDX documents, and handling real-time updates to documentation files.

Features

• API Spec Uploads: Easily upload OpenAPI or Postman specification files. The system automatically detects the file type and processes it for documentation generation.
• Project Management: Create and manage multiple documentation projects, each with its own set of MDX files and version history.
• MDX Editor & Live Preview: Edit your documentation in MDX format and preview changes live in the browser.
• Real-Time Collaboration: Sidebar and documentation updates propagate in real time using Supabase channels for team collaboration.
• Code Blocks & Groups: Highlight code examples and organize them into tabbed groups for easy comparison. Includes copy-to-clipboard functionality and MDX parsing fixes.
• Version History: Track changes and revert to previous versions of documentation files.
• Rich Components: Includes UI components for document previews, sidebars, code display, and more.
• Supabase Integration: Uses Supabase for authentication, storage, and real-time synchronization.

Technology Stack

• Frontend: React, Next.js, TypeScript
• Backend: Next.js API routes
• Database & Realtime: Supabase
• Styling: Tailwind CSS
• MDX Support: Custom MDX component integrations

Getting Started

Prerequisites

• Node.js >= 18
• Supabase project (with tables for project_mdx, project_versions, and file storage)
• Yarn or npm

Installation

1. Clone the repository:

   git clone https://github.com/rasenga223/clariodocs-api-documentation-generator.git
   cd clariodocs-api-documentation-generator

2. Install dependencies:

   yarn install
   # or
   npm install

3. Configure Supabase:

   • Copy .env.example to .env.local and set your Supabase credentials.

4. Run the development server:

   yarn dev
   # or
   npm run dev

Usage

• Upload your API specification file (OpenAPI or Postman format).
• Create a project and start editing your documentation in MDX.
• Collaborate with your team in real time.
• Preview changes and publish documentation.

Project Structure

• src/components/: UI components (sidebar, chat window, code display, MDX components)
• src/services/apiDocumentationService.ts: Handles file uploads, project creation, and file type detection.
• src/app/api/publish/route.ts: API route for publishing documentation.
• src/lib/: Supabase client and utilities.

Development Notes

• Code blocks are preprocessed to fix MDX parsing issues (backticks, curly braces).
• The sidebar supports drag-and-drop reordering and real-time updates via Supabase.
• Version history and document outline are kept in sync for collaborative editing.

License

This project is licensed under the GNU Affero General Public License v3.0. See the LICENSE file for details.

Contributing

Pull requests and issues are welcome! Please open an issue to discuss major changes.