DOCSEARCHbyAlgolia
Submit Docs

Docus Documentation

repository·main·Indexed 25 days ago

https://github.com/nuxt-content/docus

A CLI tool and Nuxt layer for building SEO-optimized, responsive documentation websites using Markdown. Built with Nuxt 4, Nuxt UI 4, and Tailwind CSS 4, Docus features a built-in AI assistant, Model Context Protocol (MCP) server for AI tool integration, native i18n support, and an embeddable AI chat interface. It includes a scaffolding CLI via `create-docus` and supports the Cloudflare Agent Skills Discovery RFC.

Tokens
40.8K
Snippets
155
Records
229
Agent score
83%

What's inside Docus

  1. Overview of Docus

    main

    Docus is a documentation theme built on Nuxt UI and Nuxt 4. It is designed to allow developers to focus on writing content using Markdown and MDC syntax provided by Nuxt Content, while providing a professional visual style out of the box.

    Key features include:

    • MDC Syntax Support: Use Markdown with component integration for dynamic content.
    • Auto-generated Sidebar: Navigation is automatically generated from your content structure.
    • Full-Text Search: Built-in search functionality for content discovery.
    • Nuxt Studio Compatibility: Visual editing support via Nuxt Studio.
    • Nuxt UI Integration: Uses a comprehensive suite of UI components.
    • Dark Mode: Native support for dark mode preferences.
    • Optimized Typography: Refined typography for high readability.

  2. Overview of Docus features

    main

    Docus is a documentation framework built on the Nuxt ecosystem that includes several built-in features:

    • Nuxt UI Integration: Provides a beautiful, customizable design out of the box.
    • Nuxt Content: Uses MDC syntax to allow embedding Vue components in Markdown.
    • Built-in Assistant: Allows visitors to ask natural language questions about your documentation.
    • Full-text Search & Navigation: Automatically handles search modals and side navigation.
    • Dark Mode: Built-in support via Nuxt Color mode with no configuration required.
    • Internationalization (i18n): Built-in support with automatic routing and content management.
    • Nuxt Image Optimization: Automatically converts Markdown images to use <NuxtImg>.
    • AI-Ready (MCP): Native Model Context Protocol server support and automatic generation of llms.txt and llms-full.txt for LLM integration.

  3. Overview of the Nuxt Studio module

    main

    The Nuxt Studio module is a browser-based, self-hostable web editor that allows you to manage and edit your Nuxt Content website directly in production. It provides a visual interface for content teams, enabling them to update content without needing local development tools, Git commands, or terminal access.

    Key capabilities include:

    • Visual Editing: Rich Markdown editing via TipTap with MDC support.
    • Code Editing: Advanced editing for Markdown (MDC), YAML, and JSON using Monaco.
    • Form-based Editing: Auto-generated forms for YAML, JSON, and frontmatter based on collection schemas.
    • Real-time Preview: Instant preview of changes on your live production site.
    • Git Integration: Commit changes directly from the production interface to trigger your CI/CD pipeline.
    • Media Management: A centralized library for various image formats (JPEG, PNG, WebP, etc.).
    • Authentication: Secure access via GitHub, GitLab, or Google, with support for custom authentication flows.

  4. Leverage Nuxt 4 features in Docus

    main

    Docus is built on Nuxt 4, making your documentation project a full Nuxt application. While a default scaffold only includes content/, public/, and package.json, you can utilize any standard Nuxt feature including nuxt.config.ts, components/, plugins/, and pages/.

    Note on Directory Structure: You can use the Nuxt 4 new directory structure. For cleaner organization and better IDE performance, place all files related to the front app code in the app/ folder.

  5. Docus core features overview

    main

    Docus is a documentation framework built with Nuxt 4, Nuxt UI 4, and Tailwind CSS 4. Key features include:

    • Design: Responsive, mobile-first design with built-in Dark Mode (toggle with d shortcut).
    • Search: Client-side search with optional FTS5 full-text search backend.
    • Markdown: Enhanced Markdown with custom MDC components.
    • AI Stack:
      • Assistant: Embeddable AI chat that answers questions and cites sources.
      • MCP Server: Native /mcp endpoint for AI tool integration.
      • Agent Skills: Discovery via /.well-known/skills/.
      • LLM-Ready: Automatic generation of llms.txt and llms-full.txt.
    • SEO: Built-in sitemap, robots.txt, and OG image generation.
    • i18n: Native internationalization support.

  6. Use the Nuxt Studio module for production content editing

    main

    The Nuxt Studio module provides a browser-based, self-hostable web editor that allows you to manage content directly on your production Nuxt Content website. It eliminates the need for local development tools, Git commands, or terminal access for content teams.

    Key capabilities include:

    • Visual Editing: Use the TipTap rich Markdown editor with full MDC component support.
    • Code Editing: Use the Monaco editor for raw Markdown (MDC), YAML, and JSON.
    • Form-based Editing: Edit YAML, JSON, and frontmatter via auto-generated forms based on collection schemas.
    • Real-time Preview: Instantly see content changes on your live site.
    • Git Integration: Commit changes directly from production to trigger your existing CI/CD pipelines.
    • File & Media Management: Manage files in the content/ directory and use a centralized media library.

    To install the module, refer to the official Nuxt Studio documentation.

  7. Key Features of Docus

    main

    Docus provides several built-in features for documentation management:

    • Nuxt 4 & Nuxt UI: Built on the latest Nuxt framework and a comprehensive UI component suite.
    • MDC Syntax: Supports Markdown with component integration for dynamic content via Nuxt Content.
    • Nuxt Studio Compatibility: Allows for visual content editing without needing Markdown knowledge.
    • Auto-generated Sidebar: Automatically builds navigation based on your content structure.
    • Full-Text Search: Built-in search functionality for content discovery.
    • UI/UX Enhancements: Includes optimized typography and native Dark Mode support.

  9. Create and publish Agent Skills

    main

    Docus allows you to publish Agent Skills from your documentation site, making them discoverable by AI tools via the /.well-known/skills/ endpoint. This follows the Cloudflare Agent Skills Discovery RFC.

    Quick Start

    1. Create a directory structure: Add a skills/ directory at your project root. Each skill must have its own subdirectory containing a SKILL.md file.
    my-docs/
└── skills/
    └── my-product/
        └── SKILL.md
    1. Write your SKILL.md: The file must follow the agentskills.io specification. The description field is required. If the name field is omitted, it defaults to the directory name.
    ---
name: my-product
description: Build and deploy apps with My Product. Use when creating projects, configuring settings, or troubleshooting issues.
---

# My Product

## Getting Started

Create a new project:

```bash
npx create-my-product my-app
    
3. **Deploy**: Deploy your documentation. Docus automatically serves the skills at `/.well-known/skills/`.

4. **Share**: Users can install your skills using the following command:

```bash
npx skills add https://your-docs-domain.com

    The CLI will attempt to install the skill to all detected agents (e.g., Claude Code, Cursor, Windsurf).

  10. Ensure Code Example Quality

    main

    Follow this checklist for all code examples:

    • Completeness: Examples must be complete and copy-pasteable, not just fragments.
    • File Labels: Use file name labels on all code blocks representing files (e.g., ```vue [App.vue]).
    • Language Match: Ensure the code language matches the project's stack (e.g., TypeScript).
    • Comments: Use comments to explain non-obvious logic.
    • Variables: Use realistic variable names instead of foo or bar.
    • Functionality: Code must be working and avoid placeholder values like YOUR_API_KEY.
    • Style: Maintain consistent indentation and style.

  11. Use the Docus MCP Server for AI tools

    main

    Every Docus site automatically exposes a Model Context Protocol (MCP) server at the /mcp endpoint. This allows you to connect your documentation directly to AI-powered editors and tools like Cursor, VS Code, or Claude, enabling them to query your docs for context.

    To use it, install the MCP endpoint directly into your editor via the Docus documentation or the provided deep links.

    https://docus.dev/mcp/mcp/deeplink

  12. Optimize Content Length by Page Type

    main

    Maintain sufficient content depth to avoid "thin content" penalties.

    Guidelines by Page Type

    Page TypeMinimumOptimal
    Landing (index.md)300 words500-800
    Guide page400 words600-1200
    API reference200 words400-800
    Getting Started300 words500-1000

    Section Length

    • Minimum: 100 words per section.
    • Optimal: 200-400 words between headings.
    • Maximum: 1000 words before requiring a new subsection.