Clariodocs | API Documentation Generator

Transform your API specification into a clean, branded, and shareable documentation site instantly. Clariodocs is a powerful tool designed for developers to effortlessly convert OpenAPI specs and Postman Collections into beautiful, interactive documentation.

🚀 Features

• Easy API Spec Upload: Upload your OpenAPI (JSON/YAML) or Postman collection in seconds.
• AI-Powered Enhancement: Automatically generate clear descriptions, functional code examples, and usage patterns using advanced LLMs (e.g., Anthropic Claude 3.5 Sonnet via OpenRouter).
• Beautiful Documentation UI: Get a modern, responsive interface complete with dark mode support.
• Multiple Templates: Choose from Minimal, Developer Hub, Enterprise, or Interactive templates to match your audience's needs.
• Interactive Editor: Tweak and edit your generated documentation in a split-pane interactive Monaco Editor.
• Custom Domain Support: Host on our platform or bring your own domain for a seamless, branded experience.
• Export Options: Download your generated documentation as PDF or ZIP files.

💻 Tech Stack

• Framework: Next.js 15.2 (React 19)
• Styling: Tailwind CSS v4 with Framer Motion, Radix UI primitives, and custom Glowing Effects
• Authentication & Database: Supabase
• AI Generation: OpenRouter for LLM integration
• Editor: @monaco-editor/react & MDX
• Drag & Drop: @dnd-kit

📂 Project Structure

clariodocs-api-documentation-generator/
├── src/
│   ├── app/                 # Next.js App Router (pages layout & routing)
│   │   ├── (dashboard)/     # Main app dashboard, document generation, and editor
│   │   ├── api/             # API Routes for database and OpenRouter calls
│   │   └── ...
│   ├── components/          # Reusable UI components (sections, layouts, MDX elements)
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Service functions (Supabase client, docService, OpenRouter)
│   ├── provider/            # Global context providers
│   ├── services/            # Business logic and external API integrations
│   └── types/               # TypeScript type definitions
├── public/                  # Static assets (images, icons)
├── package.json             # NPM dependencies and scripts
└── next.config.ts           # Next.js configuration

🛠️ Getting Started

Follow these steps to set up the project locally:

1. Clone the repository

git clone <repository-url>
cd clariodocs-api-documentation-generator

2. Install Dependencies

npm install

3. Environment Variables

Create a .env.local file in the root directory and add the necessary environment variables based on .env.example:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
OPENROUTER_API_KEY=your_openrouter_api_key

4. Run the Development Server

npm run dev

Open http://localhost:3000 with your browser to see the application.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.